Please leave your sense of logic at the door, thanks!

Quality Assurance tools for HTML5

by Simon Pieters in Conformance Checking

I see more and more people switch over to HTML5 these days, and to help you make sure you did things correctly, there are some tools at your disposal that might be good to know about.

HTML5 validator

To make sure you didn't misspell any tag or nest elements in a way that is not allowed, or find similar mistakes in your markup, you can use

Alt text for images

The above-mentioned validator has a feature to help you quality-check your alternative text for your img elements. Check the Show Image Report checkbox.

You can also disable images in your browser or try to use a text-only browser — the information that the images convey should still be available (but in text form). Sometimes an image doesn't convey any further information than what the surrounding text already says, and in such cases you should use the empty value: alt="".

For further advice and examples on how to use the alt attribute, the HTML 5 spec has lots of information on the topic. If you're not going to read it all, just read the section called General guidelines.

Document outline

The document outline is the structure of sections in the document, built from the h1-h6 elements as well as the new sectioning elements (section, article, aside, nav). The document outline is more commonly known as the Table of Contents.

To make sure that you have used the new sectioning elements correctly, you can check that the resulting outline makes sense with the HTML5 Outliner.

If you see "Untitled Section" and didn't expect them, chances are that you should have used div instead of section.

If you have a subtitle of a heading that shouldn't be part of the document outline, you should use the hgroup element:

 <h1>The World Wide Web Consortium</h1>
 <h2>Leading the Web to Its Full Potential...</h2>

In this example, only the h1 will show up in the document outline.

Table inspector

(This only applies to table elements used for tabular data — not for layout.)

HTML tables have two types of cells: header cells (th elements) and data cells (td elements). These cells are associated together in the table: a data cell in the middle of the table can have associated header cells, typically in the first row and/or the first column of the table. To a user who can see, this association seems obvious, but users who cannot see need some help from the computer to understand which cells are associated with which.

You should mark up your header cells with the th element and check that your cells get associated as you intended using the Table Inspector. If it isn't as you intended, you can consider simplifying or rearranging your table, or you can override the default association using scope or headers attributes.

Other tools?

If you know about other tools for helping with quality assurance of HTML5, or if you have made your own, please share!

4 Responses to “Quality Assurance tools for HTML5”

  1. How can Nav be a section, if he naturally doesn’t contain a Heading?
    I recive Untitled Section for my Nav, which is the main navigation bar of the site. Do you recomand me to Display:none an H1 there with a title for this section?

  2. I am not sure how good this will be to organise the information upto this much extend. It all look great, will work much better. In a grand scale of organisation this document outline concept is good for new documents but we have billions of non compatible documents floting around. HTML 5 guidelines are conceptually excellent, It’s defiantly a way forward and i do agree with the concept of “Progressive Enhancement” but the missing bit is the backward compatibility. Or have i misunderstood it completely ?

  3. @NeoSwf

    I believe that’s exactly what’s recommended – use an H1 for the title of your Nav ‘section’, then hide it with CSS. I already do this with HTML4/XHTML, good for accessibility, screen readers, etc.