Semantic code and header tags within DotNetNuke skins
How do we create semantic code?
The basics:
- For headings / titles use heading tags starting with H1 through to H6
- For paragraphs use p tags
- For lists use list tags
You need to ensure that you use the standard HTML elements that are available rather than style a HTML element to look like another HTML element, for instance not using font tags.
Using header tags
Following the introduction to semantic code, let’s look at the use of header tags within the structure of a website page. In particular we are going to apply this to DotNetNuke skin designs.
If you read various CSS web design books, they usually tell you to make use of header tags to structure your web page, but they never offer any suggestions for how to use the header tags (h1, h2, h3, h4, h5, h6). A typical statement would be ‘ensure you use header tags starting with h1 through to h6.’
If you search various forums and articles no-one can offer a definite ‘answer.’
Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped.
Others think that you should not have more than one H1 element on a page.
A book which offers a clue is Wrox’s Professional CSS,
“When building your well-meaning markup, it’s helpful to think of your document as conforming to a kind of outline – the most important header sits at the top in a h1, beneath it are a number of h2s, beneath each of which is an h3 or two, and so on down to h6. How you envision your document’s outline is entirely up to you. Settle upon a model that makes sense to you, and keep it consistent throughout your site’s markup” – page 42.
There are two elements we can pick out here:
“How you envision your document’s outline is entirely up to you. Settle upon a model that makes sense to you, and keep it consistent throughout your site’s markup”
This is why there is not a set answer for how to structure your heading tags as every single website is different, but if you keep it consistent for your site it will help users with speech browsers to understand the content of your website. |  |
|
|