Semantic code and header tags within DotNetNuke skins

ESPN - Home Page: http://www.espn.com (fig. 3) Right column H1 – Chat in the Show! (latest chat shows) H3 – next content header section in right column H3 – Further heading sections of links in the right column Left column H4 – Columns and Features (bottom left column) H4 – Further heading sections of links in the bottom left column H4 – More links Middle column H2 – Top Middle column item title H1 – ESPN News Headlines H4 – Article title ESPN have used the H1 tag twice. In this case they have used it for the latest headlines and chat shows. It appears as though they are using the Header tags to state the importance of each link section, but the location on the page of these header tags does not seem to match their importance. For instance, why isn’t there a H1 tag, or any header tags in the top left section which is known to be the area that your eye goes to first on the web page? – Based on location importance of a page, you would expect the content in the top left of the page to have the highest priority, yet none of the content uses a header tag. ESPN have used header tags from H1 to H4 within their home page. ESPN - Article page: H1 – Title of article There are no sub headings used within an article and there are no heading tags used for other sections on the page. There is just one H1 tag used on an article page within ESPN.

6 | Page 7 of 26 | 8

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