The HTML5 Robot

Let the robot chose a tag for you

Follow me on twitter
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...


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 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?


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?


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?


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?


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


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