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.
Headers
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.
Emphasis
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.
Blockquote
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.
Addresses
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.
Conclusion
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".
