My site is well overdue a face lift flavoured with HTML5, a dash of ARIA and a healthy dose of WCAG 2.0. As you’d expect playing under the hood with all these things has made me ask a lot of questions so I thought I’d post a few tips along the way that I’ve found have helped with the redesign process (more of which later).
So without further ado:
- The <header> element can be used multiple times on a page and can contain site <nav> and search.
The <header> element is typically used on every page for the site header and contains an <hgroup> of site name as H1, site tagline as H2 and a logo. Bundled into the <header> you can also add your primary <nav> as well as search. As the HTML5 specification says:The header element represents a group of introductory or navigational aids. A header element typically contains the section’s heading (an h1–h6 element or an hgroup element), but can also contain other content, such as a table of contents, a search form, or any relevant logos.
Note that <hgroup> only really only makes sense when there is a group of heading information (site name, tagline, logo) and is not appropriate for single headings.
- The <nav> element and primary navigation
In the HTML5 specification <nav> is defined as follows:The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element.
There has been a lot of discussion around what “major” navigation means (site, section, in page navigation, related links?) and what can legitimately be wrapped in the element and what can’t. General thinking is that “major” refers to global site navigation (About, Services, Products, Contact) as well as sub-navigation. Secondary navigation such as related links or grouped links of resources would not qualify for <nav>.
- <footer> can be used multiple times in a page.
Typically you’d expect to use a footer at the end of a page housing your copyright and site design information and other bits and pieces. <footer> can also be used for footer information for any section you are in within a page. For example a common usage may be at the foot of a blog post – itself contained in an <article> – containing information about tags, categories, author, comments and date/time information. The HTML5 specification explains <footer> as follows:The footer element represents a footer for its nearest ancestor sectioning content. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
Note that the <footer> element can not contain any other sectioning content such as <nav>, <section>, <header> or <footer>.
- An <article> can appear within an <article>.
Possibly one of the more obvious tips but worth a mention anyway. The <article> element is a container that can in turn contain many parts. For example on a blog posts contained within an <article> you may have another <article> housing comments. Designing a blog post with HTML5 from HTML5 Doctor has an excellent overview of this. - Using <!DOCTYPE html>
The new Doctype in HTML5 is much simpler – and memorable – than previous Doctypes. <!Doctype html> will render content in standards mode by all modern browsers (IE, FireFox, Opera, Safari) while the good news is that all pre-HTML5 Doctypes are still valid. - HTML5 can be used with WAI-ARIA.
HTML5 and ARIA certainly cross over but should not be seen as contenders. At the moment there is not much know of screen reader support for HTML5 given that the screen reader vendors themselves have not been visible in the development of the spec. This may well be because they are ll racing to implement ARIA which is a priority at this point. This makes sense given that the ARIA is in Last Call – the final stage a specification goes through before it becomes a W3C specification – and as such will be a reality sooner than HTML5. - (Update) HTML5, IE and Firefox 2
- Declaring HTML5 elements
Most modern browsers (Firefox 3+, Safari 3+, Opera 9+, Chrome 1+) are yet to recognise section elements which means problems when laying them out in CSS. To get sections to display properly always use display:block in the CSS:header, nav, section, article, aside, footer {display:block;}
IE and Firefox 2 lack native support for structural elements so you’ll need to add in some JavaScript to make it work. In IE you add the following to the head to get IE to behave:
<!--[if lte IE 8]>
<script src="html5.js" type="text/javascript"></script>
<![endif]-->
Firefox 2 and Camino can be fixed using JavaScript or by serving Gecko XHTML. Getting HTML5 working on IE and Firefox 2 from HTML Doctor has a good article about how to do this.
This obviously has a baring on whether you want to use HTML5 in your site or not yet. Given FireFox 2 has a tiny market share (most Firefox users upgrade fairly quickly) it’s really your call. The same can’t be said of IE however. I think this is why we are seeing more HTML5 sites in personal websites and blogs rather than corporate websites which have more at stake.
Resources
Being a hot topic right now there are reams of resources and tools being built that cover HTML5. This is my pick of a few that are well established, consistently useful and updated regularly:
- HTML5 Doctor - Articles and tips covering HTML5 and its semantics and how to use them. You’re also invited to submit questions for the HTML5 Doctors to answer.
- HTML5 Gallery – a showcase of sites using HTML5.
- HTML5 cheat sheet – A PDF of HTML tags and attributes together with brief explanations.
- HTML5 differences to HTML4 – a W3C resource that does what it says on the tin.
- Bruce Lawson – one of the brains behind HTML5 Doctor as well as the ultimate HTML5 cowboy forging ahead with implementing HTML5 and sharing his findings as he goes along. Follow @brucel on Twitter too.
- Remy Sharp – Remy’s blog covering things HTML5.
- HTML5 demos – set up by Remy Sharpe who focuses on JQuery and HTML5 this is a repository of demos looking at more of the application side of HTML5.
- HTML5 Outliner – a nifty tool from @gsnedders that outlines structure in HTML5.
- The Paciello Group blog – for the more ARIA minded developer with some HTML5 on the side.
And of course, last but not least the HTML5 Specification.
