
As designers who code and developers, we like to shout about writing semantic HTML as a standard in our work, but a lot of the time we then get asked "What does Semantic HTML actually mean?"
In short, it means the HTML tags we use imply meaning to the content, rather than presentation. This in affect means our HTML is cleaner, easier to understand, more accessible for screen readers, and should no custom CSS be applied to the document – the content is still readable in the manner it was intended.
Some examples of these would be using: <p> tags for our paragraphs of text; <address> for, you guessed it, an address; <h1>, <h2>, <h3> for headings and sub-headings – increasing the number as the heading decreases in the page's hierarchy.
When writing semantic HTML, we also tend to use <em> and <strong> tags rather than <i> and <b>. Earlier we stated we want to use HTML tags which imply content, not presentation. In this case <em> and <strong> imply that the content should be emphasised and have strong meaning, whereas if we were to use <i> and <b>, they are a presentational instruction for the content to be italicised and bolded – which can just as easily be done through CSS, further separating visual style from content.
The above are just a small handful of the tags we can use, and with the continuing development of HTML5 we are seeing even more tags created to make our templates even more semantic, removing the need of copious amounts of <div> tags (a <div> being just a container, implying no meaning to its content).
Headings and SEO
On the topic of semantic HTML, the conversation about the use of headings and its impact on the SEO (Search Engine Optimization) of a page is often raised – and one tag which causes confusion and a plethora of opinions, is the <h1> tag.
The <h1> tag is intended for the most important heading on the page. Most of the time designers and developers wrap the site title and/or logo in the <h1> tag as they deem this piece of information as the most important. However some SEO specialists disagree, and would rather the current page's or blog post's title should be within the <h1> as this holds the most weight about the information that is on the page. So who is right and who is wrong?The answer is there is no right or wrong way, and there is a lot of grey area, just personal preference and different SEO strategies – hence the reason for difference in opinions and implementations.
Personally, I agree that the page title should be in the <h1>, and the site title should then be within a link to the site's homepage.
But what about the home page, that doesn't necessarily have a title? After a recent discussion with other developers we came up with a simple solution. This solution can also be found in the recently released Twenty-Ten default theme for WordPress 3.0.
On the home page, the most important heading on the page is the site title, correct? Well on this page, we wrap the site title and/or logo within a <h1> tag, giving it the highest priority on the page in terms of structure, and search engines will recognise this.
When moving onto a subsequent page, the <h1> tag will then be used for the page title as discussed earlier, and the site title will then be wrapped with a link.
This might require a bit more code from the server side point of view, but the result is a lot more efficient for your semantic HTML, and it will definitely make SEO consultants and specialists happy.
Currently rated 5.0 by 1 people
- Currently 5/5 Stars.
- 1
- 2
- 3
- 4
- 5