Semantic code and header tags within DotNetNuke skins

Final Thoughts Ideally, to fully take advantage of pure semantic code, header tags, and the main content appearing at the top of the source code, you need to create a CSS based skin. A semantic CSS skin using header tags will make your website more accessible to the variety of browsers such as screen readers, as well as give you an advantage within the search engines. The methods demonstrated in this tutorial for applying header tags to a table based skin can also be used for a CSS based skin. To view an example of a DotNetNuke CSS skin using a header tag structure as we have discussed in this tutorial, go to: http://www.skinningtoolkit.com/CONTENTS/tabid/86/Default.aspx and view the page using Fangs and the Web Developers Toolbar: The Document Structure View

24 | Page 25 of 26 | 26

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