Paying attention to semantics

What are semantics? Simply put, semantics are about putting everything in its place; a series of design principles that have been around since Gutenberg looked at his Granny’s washing mangle and thought ‘I can print a newsletter with that’.

Semantics within web design has been a hotly debated subject in recent years, since the structuring of web documents has become more linear. Regardless, there are many valid reasons for ensuring your site pages and emails use well-formed semantic markup.

Why semantics matter

The expectations of modern readers are changing. More people are using handheld devices and other platforms to check their mail. So if you want to ensure the quality of your documents is maintained and they are accessible to W3C compliancy standards, instilling semantics XHTML markup, as well as the contextual page markup, is imperative.

Think of the page’s content of headers, footers and navigation bars as the all-important cargo - all part of the vessel carrying the message to its destination. As such, your semantic markup should appear higher in the page order than any additional elements like adverts or flash animations.

It is all too common to find pages which use floated or nested elements in a backwards order – this can cause no end of problems.

For example, screen readers  – commonly used by people with visual impairments – often fall foul of badly structured markup. As the screen reader processes the page from top to bottom it is often jettisoned from one statement to another, which may be entirely unrelated due to the page order being badly structured.

Semantics for search

As well as ensuring you aren’t running the risk of alienating your audience, effective semantic markup can improve your search rankings.

Search engines rely on well-formed page structure to sniff out the relevance of the page data in relation to the term that has been searched.

Additionally, ensuring a strong linear page order you make it possible for any member of your team to pick up the code and update or improve any aspect of the document which is not gaining the desired effects.

Getting it right – an example

In the example below, the page is showing a simple structure of header, content, sidebar and footer.

<div id=”header”>
<h1>Here is my site’s banner head</h1>
</div>
<div id=”content” style=”float: left;”>
<h1>My content title</h1>
<p>Introductory paragraph</p>
<h2>Sub Heading</h2>
<p>Some more content</p>
</div>
<div id=”navigation” style=”float: left”;>
<ul>
<li><a href=”#”>This is where my links will be</a></li>
</ul>
<div id=”footer”>
<p>My footer</p>
</div>

So, pay attention to semantics and follow these basic rules when designing your pages – you’ll ensure your web content is not only accessible to your existing readers, but also to search engines and a whole new audience.