Semantic code and header tags within DotNetNuke skins

Possible Header Tag Structures for the DNN-Blue skin Following the H1 tag possibilities, let’s look at some possible header tag structures based on the DNN-blue skin. Structure One The first structure that you can see in figure 10 is based on the Home Page of a website using the DNN-Blue skin layout. The H1 tag is placed around the logo H2 tags are placed in the title of each container H3 tags are used as headings within a container H4 tags are used as sub-headings within a container DNN-Blue Home Page: (fig. 10) Structure Two The second structure in figure 11 is based on an Article Page of a website using the DNN-Blue skin. The logo does not use any header tags The H1 tag is placed in the title of the container that holds the article H2 tags are used as sub-headings within the article H3 tags are placed in the title of any further containers on the page (for example holding an image or links module) DNN-Blue Article Page: (fig. 11) So far we have based these two header layouts on the websites that we have analysed where they used a different header tag structure for a home page and an article page. For DotNetNuke this brings the disadvantage that we would need to create different skins and containers for the different header tag structures. I personally would want to combine these two header tag layouts into one layout which we can use for the entire website. This is because I would like to keep the future content management of the site as simple as possible, but, at the same time still flexible enough to manage the layout of different pages. Therefore, the third structure is based on a combination of the Home page and Article page layouts using the DNN-Blue skin. Structure Three (combined) The logo does not use any header tags The H1 tag is placed in the title of the container that holds the article (As discussed earlier, this ensure that every page has a different H1 title, which will improve the search engine results) H2 tags are placed in the title of any further containers on the page (for example holding an image or links module) H3 tags are used as sub-headings within the article H4 tags are used as sub-sub headings within the article This is a similar structure as used by an article page on http://veerle.duoh.com/index.php DNN-Blue combined layouts for one skin: (fig. 12)

14 | Page 15 of 26 | 16

Article Contents

1. Tutorial Overview
2. Introduction - What is Semantic code?
3. How do we create semantic code?
4. Analysis of the pros | Helpful Tools
5. Header Tags Structure Analysis | A List Apart - Home Page
6. A List Apart - Article Page
7. ESPN - Home Page
8. Veerle – Home Page
9. Veerle - Article Page
10. Think Vitamin - Home Page
11. Think Vitamin - Article Page
12. Web Standards - Home Page
13. Web Standards - Article page
14. DotNetNuke – Header Tags Suggestions and Conclusions
15. Possible Header Tag Structures for the DNN-Blue skin
16. Applying the header tag structure to a DotNetNuke skin
17. Edit the container for h2 tags
18. Edit the container for h1 tags
19. Style the H3 and H4 tags
20. Further Styling Options
21. A step further
22. Styling the Module Titles
23. Putting it altogether
24. Demo of Fangs and Document Outline
25. Final Thoughts
26. References / Useful links