{"id":43537,"date":"2018-04-06T21:01:48","date_gmt":"2018-04-06T13:01:48","guid":{"rendered":"http:\/\/www.hongkiat.com\/blog\/?p=43537"},"modified":"2022-07-15T16:58:36","modified_gmt":"2022-07-15T08:58:36","slug":"find-semantic-tags-using-html5-robot","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/find-semantic-tags-using-html5-robot\/","title":{"rendered":"Find Semantic Tags Using This HTML5 Robot"},"content":{"rendered":"

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

But how do you know which element is best for your sub-navigation or sidebar? Just ask the HTML5 Robot<\/a>.<\/p>\n

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

Read Also:<\/strong> A Look Into: Proper HTML5 Semantics<\/a><\/p>\n

To get started you\u2019ll answer a series of yes and no questions to determine the type of page element you\u2019re building. From there HTML5 Robot will calculate all the latest HTML5 elements and find the perfect match to suit your needs.<\/p>\n

\"html5<\/a><\/figure>\n

Each of the questions helps to determine if the page element is part of the main content<\/strong>, an accessory, or something else altogether.<\/p>\n

You\u2019ll only need to answer about 5 questions before finding the tag you need, so this isn\u2019t too hard to use. Even newbie coders can learn to love the HTML5 Robot!<\/p>\n

\"html5<\/a><\/figure>\n

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.<\/p>\n

It\u2019s hosted on the Webflow platform and this whole thing was built as a project running on Webflow.<\/p>\n

Take a look at the main page<\/a> and see what you think. If you have questions or ideas you can share them with the site\u2019s developer @vinchubang<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"

A great free web app tells you exactly which semantic tags are the best choice for your HTML page.<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[506,3847],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nFind Semantic Tags Using This HTML5 Robot - Hongkiat<\/title>\n<meta name=\"description\" content=\"A great free web app tells you exactly which semantic tags are the best choice for your HTML page.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/find-semantic-tags-using-html5-robot\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Find Semantic Tags Using This HTML5 Robot\" \/>\n<meta property=\"og:description\" content=\"A great free web app tells you exactly which semantic tags are the best choice for your HTML page.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/find-semantic-tags-using-html5-robot\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-06T13:01:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-15T08:58:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/find-semantic-tags-using-html5-robot\/01-html5-robot-homepage.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/find-semantic-tags-using-html5-robot\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/find-semantic-tags-using-html5-robot\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Find Semantic Tags Using This HTML5 Robot\",\"datePublished\":\"2018-04-06T13:01:48+00:00\",\"dateModified\":\"2022-07-15T08:58:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/find-semantic-tags-using-html5-robot\\\/\"},\"wordCount\":277,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/find-semantic-tags-using-html5-robot\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/find-semantic-tags-using-html5-robot\\\/01-html5-robot-homepage.jpg\",\"keywords\":[\"HTML\",\"semantics\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/find-semantic-tags-using-html5-robot\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/find-semantic-tags-using-html5-robot\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/find-semantic-tags-using-html5-robot\\\/\",\"name\":\"Find Semantic Tags Using This HTML5 Robot - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/find-semantic-tags-using-html5-robot\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/find-semantic-tags-using-html5-robot\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/find-semantic-tags-using-html5-robot\\\/01-html5-robot-homepage.jpg\",\"datePublished\":\"2018-04-06T13:01:48+00:00\",\"dateModified\":\"2022-07-15T08:58:36+00:00\",\"description\":\"A great free web app tells you exactly which semantic tags are the best choice for your HTML page.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/find-semantic-tags-using-html5-robot\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/find-semantic-tags-using-html5-robot\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/find-semantic-tags-using-html5-robot\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/find-semantic-tags-using-html5-robot\\\/01-html5-robot-homepage.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/find-semantic-tags-using-html5-robot\\\/01-html5-robot-homepage.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/find-semantic-tags-using-html5-robot\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Find Semantic Tags Using This HTML5 Robot\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Find Semantic Tags Using This HTML5 Robot - Hongkiat","description":"A great free web app tells you exactly which semantic tags are the best choice for your HTML page.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/find-semantic-tags-using-html5-robot\/","og_locale":"en_US","og_type":"article","og_title":"Find Semantic Tags Using This HTML5 Robot","og_description":"A great free web app tells you exactly which semantic tags are the best choice for your HTML page.","og_url":"https:\/\/www.hongkiat.com\/blog\/find-semantic-tags-using-html5-robot\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2018-04-06T13:01:48+00:00","article_modified_time":"2022-07-15T08:58:36+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/find-semantic-tags-using-html5-robot\/01-html5-robot-homepage.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/find-semantic-tags-using-html5-robot\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/find-semantic-tags-using-html5-robot\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Find Semantic Tags Using This HTML5 Robot","datePublished":"2018-04-06T13:01:48+00:00","dateModified":"2022-07-15T08:58:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/find-semantic-tags-using-html5-robot\/"},"wordCount":277,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/find-semantic-tags-using-html5-robot\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/find-semantic-tags-using-html5-robot\/01-html5-robot-homepage.jpg","keywords":["HTML","semantics"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/find-semantic-tags-using-html5-robot\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/find-semantic-tags-using-html5-robot\/","url":"https:\/\/www.hongkiat.com\/blog\/find-semantic-tags-using-html5-robot\/","name":"Find Semantic Tags Using This HTML5 Robot - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/find-semantic-tags-using-html5-robot\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/find-semantic-tags-using-html5-robot\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/find-semantic-tags-using-html5-robot\/01-html5-robot-homepage.jpg","datePublished":"2018-04-06T13:01:48+00:00","dateModified":"2022-07-15T08:58:36+00:00","description":"A great free web app tells you exactly which semantic tags are the best choice for your HTML page.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/find-semantic-tags-using-html5-robot\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/find-semantic-tags-using-html5-robot\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/find-semantic-tags-using-html5-robot\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/find-semantic-tags-using-html5-robot\/01-html5-robot-homepage.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/find-semantic-tags-using-html5-robot\/01-html5-robot-homepage.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/find-semantic-tags-using-html5-robot\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Find Semantic Tags Using This HTML5 Robot"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-bkd","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/43537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=43537"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/43537\/revisions"}],"predecessor-version":[{"id":60440,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/43537\/revisions\/60440"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=43537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=43537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=43537"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=43537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}