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.
If you wish to analyse the document structure and header tags of a website page, the following tools are useful:
Firefox Web Developers Toolbar:
Using the Firefox web developers toolbar, go to Information / View Document Outline.
Fangs for Firefox: The Screen Reader Emulator
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:
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:
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.