Kim Siever's Portfolio — Version 7

Articles / Semantic Design

I have been designing websites for over seven years now and have a learned a lot in that time. I have tried to match my skills to the prevailing trends and technologies of the times. One of the current trends is that a growing number of websites are being built using a CSS and HTML combination. The HTML is used for structuring the document, while CSS is used to stylise the document (fonts, colours, etc).

In conjunction with this separation of content and presentation movement, there is another movement called semantic design. The basis of semantic design is that designers use specific HTML code to describe specific page elements. For example, a <p> tag is used to describe a paragraph tag.

During the bygone Browser Wars era, the browser companies—as a way to convince website developers that their particular browser was better—introduced numerous proprietary tags. What this encouraged was the use of HTML code for visual effect (like using <blockquote> for indenting) instead of describing the page elements. Semantic design reverses this trend.

There are a number of resources out their describing semantic design, but I wanted to put something together as a quick resource for myself. Perhaps others will find it useful as well.


A popular method of defining headers in a page is to use something like <p><b><font size=5>My Heading</font></b></p> or <p class="header">. Semantic design would see such code replaced with <h1>My Heading</h1> or one of the other <hn> tags. Heading tags should specify headings. As well, the <h1> should be used for the most important heading, the <h2> should be used for the second most important heading, and so forth.


Many website developers use the <i></i> and <b></b> tags to emphasise something on the page. While these do provide emphasis, they make no sense to a browser that reads text aloud to a visually impaired user. Instead of using <i></i> for emphasis, use the emphasis tag (<em></em>). Instead of using the italics tag for citing publications, use the <cite></cite> tag. Instead of using the italics tag for short quotations, use the <q></q> tag.

Sometimes you want a stronger emphasis than that provided by the <em></em> tag. Instead of using <b></b>, use the <strong></strong> tag.


Another common strategy implemented by website developers is to use the <blockquote></blockquote> to set margins around not only text, but list items, images, form elements, and other page elements. Semantic design encourages the blockquote tag be used only for quoting a block of text. CSS can then set the margins and padding of any page element.


While not as common as the other methods mentioned above, some developers use code similar to the following to display an address:

<blockquote> Mr, John Doe<br> 123 Main St.<br> Somewhere, SK S1S S1S<br> Canada </blockquote>

A semantic method would be to replace the blockquote tag with the <address></address> tag pair.


Semantic design is not difficult and just because habits were built over months or years does not mean it will take that long to change them. All it takes is the ability to change one's way of thinking. Rather than thinking, "What tag can I use to achieve the formatting I want", try thinking, "What tag can I use that accurately describes its content".