Quite often semantic aspect of web design and development is neglected, either because of not even thinking about it or because of wrong impression that there is no time to cater for semantics when working under pressure of meeting the project deadlines. In either case, it is not an excuse. Time has come to change the mindset. Writing semantically correct code is nothing more than common sense. All that there is about HTML code semantics is that each element in a web page should have an HTML element corresponding to its meaning that would correspond to its content and purpose.

The recommendations for writing semantically rich code are quite easy to follow.For example, different types of headings in the page context should be wrapped within header HTML tags, <h1> - <h6>. For paragraphs of text, paragraph element <p> should be used to wrap its content. If you are creating any kind of list items, list tags (<ul>, <ol>, <li>, etc) should be used, and so on. Quite easy, isn’t it?

To picture this, see the two examples of HTML code below.

An example of semantically poor code:

<div class="header">This is the title</div>

<div class="paragraph">
This is the smart paragraph saying
it is a paragraph within div tag
which is semantically poor.
</div>

<a href="/links/link1" class="menu">Link 1</a>
<a href="/links/link2" class="menu">Link 2</a>
<a href="/links/link3" class="menu">Link 3</a>

An example of semantically rich code:

<h1>This is the title</h1>
<p>

This is the smart paragraph saying
it is a paragraph within p tag,
which is semantically rich.

</p>
<ul>

<li><a href="/links/link1">Link 1</a</li>
<li><a href="/links/link2">Link 2</a</li>
<li><a href="/links/link3">Link 3</a</li>

</ul>

Even in this simple example it is obvious that the latter case is more readable, meaning it will be much easier to maintain, style, upgrade, whatever… Needless to say search engine optimization of the page will benefit as well since semantic code will help search engines understand the pages better and index your site optimally.

If you are an old-school web developer, you probably wander where are the tables. Well I got news for you. Tables should not be used for laying out header, footer, sidebar and so on. If you need to present some data in a tabular format, that’s where tables come in.

Finally, your semantically coded page definitely will not appear the same across different browsers. For example, in Internet Explorer 6 <h1> header element will appear bigger than in Firefox or Internet Explorer 7 will show text within <p> tags look like it is bolded. This is not due to the semantics, but because of different implementations of HTML elements in browsers. The way to fix this is not to change the code, but to use CSS to accomplish a design that will show the same in any browser.

What’s in it for me?

If are an Internet user, you benefit by visiting a website which will not limit you which browser to use.

If you are the web designer and/or developer, writing semantic code will make your life much easier and work much more interesting. It is really much easier when presentation is logically structured and you can understand and visualize the structure of the page even without any styling but just by laying the markup.

If you are a business owner, getting a semantically written website ensures a solution which will be

• easier to manage and maintain
• cheaper in long terms
• independent of the developer who created it
• more search engine friendly, thus bringing in more visitors, potentially turning them into customers.

In any case, if you are interested in further reading on this topic, here are some good articles:

The Meaning of Semantics
Writing Semantic HTML
The semantic Code
Semantic code: What? Why? How?
Semantics, HTML, XHTML, and Structure