Semantic code and header tags within DotNetNuke skins

Header Tags Structure Analysis Using the web designer tools we have analysed the following websites: http://www.alistapart.com http://www.espn.com http://veerle.duoh.com/index.php http://www.thinkvitamin.com/ http://www.webstandards.org/ A List Apart - Home Page: http://www.alistapart.com/ (fig. 1) H1 tag surrounds logo of the site <h1 id="masthead"> <a href="/"><img src="/pix/alalogo.gif" alt="A LIST Apart: For People Who Make Websites" /></a> </h1> Left column (Main Content) H3 – Presents today’s date (top of main content column) H4 - Article title - recent articles list, H4 and H5 repeated for each article H5 – By-line (Article author) Middle column H3 – Editor’s Choice (Heading for this column of articles) H4 – Article title H5 - By-line, Article author Right column H3 – Search H3 – Topics H4 – Job Board There are no H2 tags used in the Home Page. This is the only website from the selection that we have analysed that makes use of the H5 tag.

4 | Page 5 of 26 | 6

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