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   Think Vitamin - Home Page: http://www.thinkvitamin.com (fig. 6) No H1 Tag used Top left H2 – Featured article title H3 – Featured article comments Top middle H2 – Article title H3 – Sub title of article (category of article) Middle section H2 – Sitewide topics (listing of categories) Bottom left column H2 – Article Title H3 – Article comments H2 – Article Title H3 – Article comments etc. Bottom middle column H2 – News Blog Right Column H2 – Vitamin Interviews H2 – Advisory Board H2 – Search etc. For the Vitamin home page: H1 – not used H2 used as article titles for container sections of home page H3 used as comments link for articles and sub-title (category of an article)

9 | Page 10 of 26 | 11

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