Semantic code and header tags within DotNetNuke skins
Introduction - What is Semantic code?
HTML was originally intended to describe the contents of a document, not as a way to make your pages appear visually pleasing.
Semantic code returns to this original concept and means that you are using HTML tags for their original purpose rather than styling how the page should look.
For instance, for styling a title you could use:
<font size="20px"><strong>This is a title</strong></font>
This displays the text in a bold large font so that it appears visually on the page as a title. But, thinking in terms of semantic code there is nothing here that actually describes this piece of text as a title.
Semantically, the code would appear as:
<h1>This is a title</h1>
So you can easily see within the actual HTML code that this section of text is a title.
To style the title text you would define the h1 tag within your skin.css file.
ie:
h1
{
font-size: 20px;
font-weight: bold;
}
Benefits of Semantic code
Semantic code makes it easier for various browsers (ie. browsers without style sheets, text browsers, PDAs) and search engines to understand the content of a page.
- Speech browsers for visually impaired people rely on semantic code to understand the content of a page
- Search engines find it easier to index your content, which should improve your search engine results. (A search engine typically will associate a title surrounded by a H1 tag as the main keyword / theme of the page.)
Further benefits include:
- Reduced code required, so pages will load faster, therefore lower bandwidth costs etc
- All styling is completely separate so it’s easy to adjust the style of the entire site by editing the skin.css file rather than on a page by page basis
|  |
|
|