Find Semantic Tags Using This HTML5 Robot

The HTML5 doctype changed a lot in the world of frontend coding. The new standard came with a bunch of new elements, many of which are now more semantically accurate than simple divs.

But how do you know which element is best for your sub-navigation or sidebar? Just ask the HTML5 Robot.

This free webapp tells you exactly which tags are the best choice for your HTML page. It considers semantics first and tells you which tag(s) should work best in your situation.

To get started you’ll answer a series of yes and no questions to determine the type of page element you’re building. From there HTML5 Robot will calculate all the latest HTML5 elements and find the perfect match to suit your needs.

html5 robot code generator

Each of the questions helps to determine if the page element is part of the main content, an accessory, or something else altogether.

You’ll only need to answer about 5 questions before finding the tag you need, so this isn’t too hard to use. Even newbie coders can learn to love the HTML5 Robot!

html5 semantic codes robot

Currently, this webapp has been released in both English and French. More translations may be on the way in the future, but no doubt this is a valuable tool for semantic frontend coding.

It’s hosted on the Webflow platform and this whole thing was built as a project running on Webflow.

Take a look at the main page and see what you think. If you have questions or ideas you can share them with the site’s developer @vinchubang.

Show Comments
FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail