Semantic code and header tags within DotNetNuke skins

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26   Veerle - Home Page: http://veerle.duoh.com/index.php (fig. 4) H1 – Main title of website (graphic header of site) <div id="header"><h1>Veerle's blog</h1></div> Left Column H2 – Latest post title H2 – Archive by Category Middle Column H2 – Previously H2 – Search H2 – What’s Cookin here Right Column H2 – Flickrness H2 – Veerle’s Art H2 – Art / Type elsewhere Bottom footer H2 – Approved H2 – Hot tunes I dig H3 – Recently bought at iTMS (sub heading of Hot Tunes) H2 – Recommended H2 – Upcoming events On the home page, the H1 tag is used for the website name and H2 tags are used for headings of each container section.

7 | Page 8 of 26 | 9

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