Pragmatic Semantics

June 7, 2011 § Leave a comment

HTML5, Microformats, ARIA roles, CSS3 and a whole host of other technologies are making our lives as front end developers easier and better.

We usually have to rely on the user’s browser supporting these new technologies. That is fine for a site with fairly technical readers, but we also work on sites for a much broader (and potentially less tech-savvy) audience.

So what can we use now to make our markup more semantic and how can we ensure backwards compatibility for our clients? Let’s run through a list (because the internet loves a list).

HTML5

At Mint we have held back from using the new markup tags (header, section, article etc) on client sites. There has been much debate internally on the subject but ultimately we decided that requiring to correctly render the page in older browsers is not a good thing for our clients. It’s fine for an old browser with JavaScript disabled to see a square corner, but not for the layout to be completely broken. So far we have chosen the pragmatic approach here and are sticking to pre-HTML5 tags.

But that doesn’t mean we are shunning HTML5 completely. We use the super clean <!doctype html>, as well as form input types. It’s easy to use <input type="email" /> and it degrades gracefully, giving iPhone users a more convenient keyboard layout. Users of browsers which do not recognise email as an input type will not notice any difference – simple, clean, easy.

We have also made use of the JavaScript history API allowing PJAX style asynchronous page loading. We set up a site’s navigation to work exactly as normal with full reloads between pages and then layer on inline loading of new page content for browsers which support history. It’s easy to check for History API support in JavaScript:

// Returns true or false for HTML5 history support
function testHistoryAPI() {
  return !!(window.history && history.pushState);
}

If HTML5 is new to you, stop reading this, go buy Jeremy Keith’s HTML5 For Web Designers and then come back. I’ll wait here for you.

ARIA Landmark Roles

A great way to add semantic meaning to various elements on the page is with WAI-ARIA roles. Machine readable ARIA roles can flag important elements to assistive technologies. This is great for signalling the page navigation or a site search form to a screen reader for example. The following is a subset of ARIA landmark roles which are useful on pretty much any web page:

banner — denotes the site header
navigation — the main site navigation
search — a site wide search form
main — the main page content, useful as an alternative to traditional ‘skip-links’
contentinfo — meta information about the page, good for the site footer.

Just add a role="" attribute to the appropriate element and you’re away.

There’s a lot more that can be done with ARIA, particularly in JavaScript heavy applications where a lot of DOM manipulation is happening. Dev.Opera has a great write-up.

Microformats

Microformats are a great way to standardise the markup used for certain types of content. This lets us describe contact details, events and more in a uniform machine readable way. This information can then be interacted with by another service.

A great example of this is Brian Suda’s hCard parser which will scan a page for microformat hCards and provide a vCard download for a user to import into contact management software. Here’s a super simple hCard implementation:

<p class="vcard">
  <span class="fn">Andrew Appleton</span>
  <span class="role">Developer</span>
  <span class="org">Mint Digital</span>
</p>

Simple and as a bonus you get a set of semantic elements to hook your CSS into.

Microformats are an evolving set of standards so I would definitely recommend checking out the wiki for an up to date look at what’s new.

So there it is, a few easy unobtrusive ways to build richer web pages without any browser compatibility issues. There’s no reason not to make use of this stuff today and plenty to gain from doing so.

Logical Friday