The HTML5 Robot

Let the robot chose a tag for you

En
Follow me on twitter
Fr
Hmm... One more question!
Here's some advice!
Let me think...

The HTML5 Robot

Let the robot choose what semantic tag is right for your HTML5 element

Start now!

Is your element a major navigation block?

A menu, submenu, navigation bar...

nav

Use <nav> for any element that represents the navigation within the page and the site: menu or navbar.

Is this a complete piece of content?

Does this content make sense on its own? Can it be extracted and shown alone in a page, for reference? Would it make sense to syndicate it in a RSS feed?

article

Article can be a complete news story, but also a forum post, comment, or sidebar widget. It needs a unique heading.

Is it required to understand the current content?

Is it an accessory? I.e., could it be removed without making the page impossible to understand?

aside

Anything on a sidebar, the comments, footnotes, glossary, advertisement, should get the <aside> tag.

Could you move it to an appendix?

Can it be listed as a reference, aside from the document itself?

figure

An image, an ensemble of image, a graphic... comes with a <figcaption> element for the legend.

Is there a title for your block?

Is it logical that your block should begin with a title?

section

If it has a title but is not an <article>, then it should be a <section>. There can be multiple <section> tags in an <article>.

Is it semantic?

Does it represent something, or is it just for CSS hooks and layout?

p

Probably a paragraph. Or another appropriate element such as <address>, <blockquote>, <pre>...

div

Stands for "division of page".
The default block in the flow, which doesn’t have any particular meaning.