Semantic code and header tags within DotNetNuke skins
DotNetNuke - Header Tags Suggestions and conclusions
Here I am going to offer some suggestions for how you could approach using header tags within your DotNetNuke skins based on the approaches taken in the websites we have analyzed.
Please bear in mind that there is no definite answer for the use of header tags, it all depends on the layout and content within your own website.
From analyzing the various websites we can see that there is not a standard implementation for the use of header tags. We can see however that they have used the header tags to define a ‘level of importance’ for the various elements on the page and that the header tags are not necessarily listed in tag number order, ie. h1, h2, h3, h4, h5, h6.
We are going to discuss and use this ‘level of importance’ method within our DotNetNuke skins.
Considerations
H1 tag
Ideally we only want to place one H1 tag on the page. This is so that the search engines can read and understand exactly the topic for the page.
Approaches taken:
From the websites we have analysed we can take two approaches:
1) H1 tag replaced by the logo
Place a H1 tag which contains the main title of the website. This text is replaced by the logo of the website for users with standard browsers, while search engines and screen readers will read the H1 text.
You can view an example of this here: http://veerle.duoh.com/index.php
<div id="header"><h1>Veerle's blog</h1></div>
Disadvantages:
If we hardcode this into the DotNetNuke skin, for every single page the website will have an identical h1 title. Some people state that the h1 tag should display the title of the website and all the following header tags should then display the article titles etc.
I disagree with this approach. The main disadvantage this will bring is related to the search engines. Ideally you would want to create a different h1 title for every single page which will contain a descriptive title with keywords. This can then be aimed directly at search engines helping them to index your page related to your h1 title and therefore increasing your chances of appearing in the search results.
On http://www.alistapart.com/articles/worldgrowssmall
They have used two h1 tags, one around the logo and the other for the article title of an article page. For the home page they use one h1 tag around the logo. I personally would just use one h1 tag to ensure there is no confusion for the search engines.
Advantages:
You can set the h1 tag for the entire site and forget about it. If you have a beginner client who is going to be adding their own content to a DotNetNuke portal, you do not have to worry about training them to use h1 tags.
2) H1 tag for the main page title
Place a H1 tag around the main title of the article for the page.
Advantages:
The topic will be clear for every single page because every page will have a different keyword related h1 title, meaning improved search engine results.
Disadvantages:
With this method, the h1 tag within DotNetNuke will be added by including it in the title of a container. We only want to display one h1 tag per page, so you would need to create a container especially for an h1 tag and another container for all further header tags (We will expand on this later.)
This could potentially be confusing for beginner clients, but if you label each container name appropriately such as “main_article_container” and “sub_container” they should be able to add content in the correct manner without the need for fully understanding the use of header tags.
(Also, as demonstrated later in the tutorial, you can style the H1 container tag text to be different to the other containers title text. This will help to ensure that the H1 tag container is always used as the main article title container.) |  |
|
|