Semantic code and header tags within DotNetNuke skins

Analysis of the pros Following this I have analysed the structure of five websites that are well known for their good design. In particular I have looked at how they have implemented the use of headings to outline the structure of their pages. From this information I will then offer some suggestions for how this can be applied to DotNetNuke skins. I have analysed two pages from each of these websites, the home page and an article page. Helpful Tools If you wish to analyse the document structure and header tags of a website page, the following tools are useful: Firefox Web Developers Toolbar: http://chrispederick.com/work/webdeveloper/ Using the Firefox web developers toolbar, go to Information / View Document Outline. Fangs for Firefox: The Screen Reader Emulator http://www.standards-schmandards.com/index.php?show/fangs Fangs creates a textual representation of a web page similar to how the page would be read by a modern screen reader. The extension and source can be downloaded from the SourceForge project page: http://sourceforge.net/projects/fangs Once you have installed Fangs to your Firefox browser, right click on the page and select “View Fangs”. You will now be able to view your page as if viewed by a screen reader. You can also view the list of headers from the tabs at the top of the page. Test the Tools You can view examples of these tools in action by viewing the Document Outline / Fangs outline for these links: http://www.skinningtoolkit.com/tabid/90/Default.aspx http://www.skinningtoolkit.com/tabid/112/Default.aspx If you view the majority of DotNetNuke websites you will notice that they do not make use of heading tags. View www.dotnetnuke.com in Fangs and the Web Developers Toolbar for an example.

3 | Page 4 of 26 | 5

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