demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

HTML5 Testing Tools

html / validation

Estimated reading time: 2 minutes, 8 seconds

While validation will remain your front-line defense against pages that render poorly in the browser, there is a suite of other testing tools that can help you determine that you’ve created your page the right way, most especially for search engines. As a broad rule, these tools should be used after you’ve validated the page.

HTML5 Outliners

One of the advances that HTML5 has provided us is the ability to create pages that are far richer in semantics: generic <div> elements with class and id replaced with <article>, <section>, <aside> and more.

Validation will tell you if you’ve used these tags in the right order, but to actually understand the structure of your page, you should view your page in an HTML5 Outliner. Like the validator, the outliner accepts input either directly or from a URL.

Very simply, an outliner looks at the structure and headings of your page, and maps it as a series of nested ordered lists.As an example, this is a map of this article in the context of this blog:

  1. demosthenes.info
    1. featured articles
    2. popular favourites
    3. HTML5 Testing Tools
      1. HTML5 Outliners
      2. Rich Snippets Testing Tool
      3. Facebook Linter
    4. web developer guide
    5. featured comment
    6. what i'm reading
    7. what i'm watching
    8. what i'm playing
    9. what i'm hearing
    10. blogs
    11. podcasts
    12. no ads ever
    13. creative commons licensed

As an open algorithm, outliner tools are also available as extensions for Chrome, Opera, and as a bookmarklet that works in every modern browser.

Some common errors reported in the outliner:

  • If you find entries in the outliner are untitled, you are probably not using headings correctly.

  • If you find numbers skipped, you are likely not resetting your headings. (Remember that using <article>, <section> or <aside> resets your elements in HTML5: you use <h1> again from the start).

Rich Snippets Testing Tool

The advent of HTML5 has meant that search engines are now moving on from looking at metatags within the <head> of web pages to far more discrete, particular information, most especially in the form of microdata. The tools available to test this are less advanced, the schema proposal only being a year old. The only reliable service that I am aware of that tests “rich snippets”, as Google calls microdata-enhanced pages, is the Rich Snippets Testing Tool. There is no offline version yet available for the tool: the page to test must be on a public server.

Facebook Linter

While not directly related to HTML5, it is worthwhile mentioning the Facebook Linter (aka the Facebook debugger), which can show how your page appears to Facebook, together with any errors the Facebook crawler encounters. Like the Rich Snippets Testing Tool, the page to test must be on a publicly accessible server.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.