{"id":23967,"date":"2021-04-29T21:11:22","date_gmt":"2021-04-29T13:11:22","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23967"},"modified":"2021-04-29T16:51:42","modified_gmt":"2021-04-29T08:51:42","slug":"cool-useful-html-tags","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/cool-useful-html-tags\/","title":{"rendered":"10 Cool Things HTML Tags Can Do"},"content":{"rendered":"<p>At the moment there are a <strong>total of 142 HTML elements<\/strong> standardized by W3C excluding the ones in the initial phases of standardization and those that went obsolete. That said, it is possible to miss or forget few of them that can be useful when needed.<\/p>\n<p>Earlier we did a recap of some of the <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/useful-css-tricks-you-might-have-overlooked\/\" rel=\"noopener\">best CSS tricks<\/a> you might have overlooked. This post will remind you some of the HTML tags that you didn\u2019t know you could use to implement features such as:<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/css-text-effects\/\" class=\"ref-block__link\" title=\"Read More: 15 Beautiful Text Effects Created with CSS\" rel=\"bookmark\"><span class=\"screen-reader-text\">15 Beautiful Text Effects Created with CSS<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-text-effects.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-23417 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-text-effects.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">15 Beautiful Text Effects Created with CSS<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tBeautiful text or typography will make your design look attractive. In web design, CSS helps to give style...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>1. Map Images<\/h2>\n<p>The HTML <code>&lt;map&gt;<\/code> elements can be used to create image maps. <strong>Image maps<\/strong> are basically images with clickable areas on them, that can be hyperlinked to another web page or other parts of the same document. You can define which areas of an image are clickable by simply mentioning the corresponding X Y coordinates of those points in the <code>&lt;area&gt;<\/code> elements nested inside <code>&lt;map&gt;<\/code>.<\/p>\n<p><strong>Note:<\/strong> The clickable areas cannot be styled through CSS so, if you want those markers to be styled, use a simple image editing software to draw the markers.<\/p>\n<p><strong>Tip:<\/strong> If you want to know the coordinates for a point in an image, open the image in an image editing software and move the cursor to that point, you should be able to see the coordinates of it in the software itself. For GIMP it is shown at left side of the bottom bar.<\/p>\n<p><iframe height=\"483\" scrolling=\"no\" src=\"https:\/\/codepen.io\/\/rpsthecoder\/embed\/PqZNzG\/?height=483&theme-id=12825&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\/pen\/PqZNzG\/\">PqZNzG<\/a> by Preethi (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\">@rpsthecoder<\/a>) on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\">CodePen<\/a>. <\/iframe><\/p>\n<h2>2. Input suggestions<\/h2>\n<p>Use <code>&lt;datalist&gt;<\/code> to provide a list of relevant suggestions that appear while typing an input value.<\/p>\n<p><iframe height=\"350\" scrolling=\"no\" src=\"https:\/\/codepen.io\/\/rpsthecoder\/embed\/MwKybG\/?height=350&theme-id=12825&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%; height:350\">See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\/pen\/MwKybG\/\">MwKybG<\/a> by Preethi (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\">@rpsthecoder<\/a>) on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\">CodePen<\/a>. <\/iframe><\/p>\n<h2>3. Highlight Text<\/h2>\n<p>Highlighted text usually has dark text color with a light background. You can achieve that highlighted text effect with markup alone. Any text enclosed inside the <code>&lt;mark&gt;<\/code> will have that effect.<\/p>\n<p>You can customize the <strong>highlight color<\/strong> with the <code>background-color<\/code> CSS property of <code>&lt;mark&gt;<\/code> and the <strong>text color<\/strong> with the <code>color<\/code> property.<\/p>\n<p><iframe height=\"350\" scrolling=\"no\" src=\"https:\/\/codepen.io\/\/rpsthecoder\/embed\/XbXdMy\/?height=350&theme-id=12825&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%; height:350\">See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\/pen\/XbXdMy\/\">XbXdMy<\/a> by Preethi (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\">@rpsthecoder<\/a>) on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\">CodePen<\/a>. <\/iframe><\/p>\n<h2>4. Define Templates<\/h2>\n<p>Along with HTML5 came the new <code>&lt;template&gt;<\/code> element. The <code>&lt;template&gt;<\/code> element holds markup inside it that is not rendered by the browsers, the markup enclosed by it are to be used to <strong>generate dynamic contents<\/strong> in the page <strong>using JavaScript<\/strong>.<\/p>\n<p>For example, suppose you have a <code>&lt;table&gt;<\/code> where rows are to be added dynamically, you can simply put the markup of an empty row of that table inside the <code>&lt;template&gt;<\/code> tag and when needed call a JavaScript function containing script to copy the markup from inside the template tags and add it to the table markup. This is not supported by IE.<\/p>\n<p><iframe height=\"282\" scrolling=\"no\" src=\"https:\/\/codepen.io\/\/rpsthecoder\/embed\/KpVzmQ\/?height=282&theme-id=12825&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\/pen\/KpVzmQ\/\">KpVzmQ<\/a> by Preethi (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\">@rpsthecoder<\/a>) on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\">CodePen<\/a>. <\/iframe><\/p>\n<h2>5. Fine Print<\/h2>\n<p>Fine print refers to the text of document that is typically printed in very small size containing information like conditions, terms, restrictions, citations, legal rights etc. The <code>&lt;small&gt;<\/code> tag in HTML can be used to show fine prints. From HTML5 onwards the <code>&lt;small&gt;<\/code> tag not only shows a fine-print styled text but will also semantically define the same as legal disclaimers and caveats.<\/p>\n<p><iframe height=\"350\" scrolling=\"no\" src=\"https:\/\/codepen.io\/\/rpsthecoder\/embed\/RPraga\/?height=350&theme-id=12825&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%; height:350\">See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\/pen\/RPraga\/\">RPraga<\/a> by Preethi (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\">@rpsthecoder<\/a>) on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\">CodePen<\/a>. <\/iframe><\/p>\n<h2>6. Assign a Base URL<\/h2>\n<p>The <code>&lt;base&gt;<\/code>HTML element is quite handy when you have multiple links in your document with the same domain URLs, it allows you to <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/html-base-element\/\" rel=\"noopener\">add a base URL to the document<\/a> which in turn allows you to add only relative URLs to other links in the page as needed.<\/p>\n<p><strong>Note:<\/strong> All of the relative URLs in the page will be referred based on the base URL, if you have any link with a different domain don\u2019t forget to assign the complete URL to it.<\/p>\n<p><iframe height=\"350\" scrolling=\"no\" src=\"https:\/\/codepen.io\/\/rpsthecoder\/embed\/eNJZRP\/?height=350&theme-id=12825&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%; height:220\">See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\/pen\/eNJZRP\/\">eNJZRP<\/a> by Preethi (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\">@rpsthecoder<\/a>) on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\">CodePen<\/a>. <\/iframe><\/p>\n<h2>7. Responsive Images<\/h2>\n<p>Responsive web development is in vogue with ever growing mobile access. Images can be toggled for different screen sizes with markup. The <code>&lt;picture&gt;<\/code> HTML5 element lets you add various image sources for different media for the image inside it.<\/p>\n<p><strong>Note:<\/strong> This currently works in Chrome only. You will have to set <code>dom.image.picture.enable<\/code> to <code>true<\/code> in <code>about:config<\/code> in Firefox.<\/p>\n<p><iframe height=\"336\" scrolling=\"no\" src=\"https:\/\/codepen.io\/\/rpsthecoder\/embed\/jPWqLZ\/?height=336&theme-id=12825&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\/pen\/jPWqLZ\/\">jPWqLZ<\/a> by Preethi (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\">@rpsthecoder<\/a>) on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\">CodePen<\/a>. <\/iframe><\/p>\n<h2>8. Color Picker<\/h2>\n<p>HTML5 introduced many <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/html5-form-input-type\/\" rel=\"noopener\">new input type elements<\/a>; the color input element is one of them. It lets you chose a color on a webpage with the help of a color picker.<\/p>\n<p><iframe height=\"350\" scrolling=\"no\" src=\"https:\/\/codepen.io\/\/rpsthecoder\/embed\/XbXzeb\/?height=350&theme-id=12825&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%; height:350\">See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\/pen\/XbXzeb\/\">XbXzeb<\/a> by Preethi (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\">@rpsthecoder<\/a>) on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\">CodePen<\/a>. <\/iframe><\/p>\n<h2>9. Group options<\/h2>\n<p>If you have many options in a dropdown list and would like to show them grouped, the <code>&lt;optgroup&gt;<\/code> element will get the job done. You can also style the groups with CSS.<\/p>\n<p><iframe height=\"350\" scrolling=\"no\" src=\"https:\/\/codepen.io\/\/rpsthecoder\/embed\/XbXdLv\/?height=350&theme-id=12825&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%; height:350\">See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\/pen\/XbXdLv\/\">XbXdLv<\/a> by Preethi (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rpsthecoder\">@rpsthecoder<\/a>) on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\">CodePen<\/a>. <\/iframe><\/p>\n<h2>10. The <code>&lt;noscript&gt;<\/code> element<\/h2>\n<p>The markup inside <code>&lt;noscript&gt;<\/code> is rendered by the browser only when the script is disabled. This tag is useful for letting users know when the script is disabled in their browser and to provide any alternate fallback mechanism for components on the web pages that will stop working without JavaScript.<\/p>\n<pre>\r\n &lt;head&gt;\r\n &lt;noscript&gt;&lt;link rel=\"stylesheet\" href=\"noscript_fallback.css\"&gt;&lt;\/noscript&gt;\r\n &lt;\/head&gt;\r\n &lt;body&gt;\r\n &lt;noscript&gt;&lt;h2&gt;Javascript is disabled in your browser.&lt;\/h2&gt;&lt;\/noscript&gt;\r\n &lt;\/body&gt;\r\n <\/pre>\n<h2>Now Read:\n  <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/useful-css-tricks-you-might-have-overlooked\/\" onclick=\"_gaq.push(['_trackEvent', 'readmore', 'internal', 'cool-useful-html-tags']);\" rel=\"noopener\">15 Useful CSS Tricks You Might Have Overlooked<\/a><\/h2>\n<figure><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/useful-css-tricks-you-might-have-overlooked\/\" onclick=\"_gaq.push(['_trackEvent', 'readmore', 'internal', 'cool-useful-html-tags']);\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/useful-css-tricks-you-might-have-overlooked\/useful-css-tricks.jpg\" width=\"800\" height=\"428\"><\/a><\/figure>","protected":false},"excerpt":{"rendered":"<p>At the moment there are a total of 142 HTML elements standardized by W3C excluding the ones in the initial phases of standardization and those that went obsolete. That said, it is possible to miss or forget few of them that can be useful when needed. Earlier we did a recap of some of the&hellip;<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[506],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>10 Cool Things HTML Tags Can Do - Hongkiat<\/title>\n<meta name=\"description\" content=\"At the moment there are a total of 142 HTML elements standardized by W3C excluding the ones in the initial phases of standardization and those that went\" \/>\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\/cool-useful-html-tags\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Cool Things HTML Tags Can Do\" \/>\n<meta property=\"og:description\" content=\"At the moment there are a total of 142 HTML elements standardized by W3C excluding the ones in the initial phases of standardization and those that went\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/cool-useful-html-tags\/\" \/>\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=\"2021-04-29T13:11:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/useful-css-tricks-you-might-have-overlooked\/useful-css-tricks.jpg\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\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=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cool-useful-html-tags\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cool-useful-html-tags\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"10 Cool Things HTML Tags Can Do\",\"datePublished\":\"2021-04-29T13:11:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cool-useful-html-tags\\\/\"},\"wordCount\":821,\"commentCount\":14,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cool-useful-html-tags\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/useful-css-tricks-you-might-have-overlooked\\\/useful-css-tricks.jpg\",\"keywords\":[\"HTML\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cool-useful-html-tags\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cool-useful-html-tags\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cool-useful-html-tags\\\/\",\"name\":\"10 Cool Things HTML Tags Can Do - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cool-useful-html-tags\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cool-useful-html-tags\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/useful-css-tricks-you-might-have-overlooked\\\/useful-css-tricks.jpg\",\"datePublished\":\"2021-04-29T13:11:22+00:00\",\"description\":\"At the moment there are a total of 142 HTML elements standardized by W3C excluding the ones in the initial phases of standardization and those that went\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cool-useful-html-tags\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cool-useful-html-tags\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cool-useful-html-tags\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/useful-css-tricks-you-might-have-overlooked\\\/useful-css-tricks.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/useful-css-tricks-you-might-have-overlooked\\\/useful-css-tricks.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/cool-useful-html-tags\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 Cool Things HTML Tags Can Do\"}]},{\"@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\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 Cool Things HTML Tags Can Do - Hongkiat","description":"At the moment there are a total of 142 HTML elements standardized by W3C excluding the ones in the initial phases of standardization and those that went","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\/cool-useful-html-tags\/","og_locale":"en_US","og_type":"article","og_title":"10 Cool Things HTML Tags Can Do","og_description":"At the moment there are a total of 142 HTML elements standardized by W3C excluding the ones in the initial phases of standardization and those that went","og_url":"https:\/\/www.hongkiat.com\/blog\/cool-useful-html-tags\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2021-04-29T13:11:22+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/useful-css-tricks-you-might-have-overlooked\/useful-css-tricks.jpg","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/cool-useful-html-tags\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/cool-useful-html-tags\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"10 Cool Things HTML Tags Can Do","datePublished":"2021-04-29T13:11:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/cool-useful-html-tags\/"},"wordCount":821,"commentCount":14,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/cool-useful-html-tags\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/useful-css-tricks-you-might-have-overlooked\/useful-css-tricks.jpg","keywords":["HTML"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/cool-useful-html-tags\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/cool-useful-html-tags\/","url":"https:\/\/www.hongkiat.com\/blog\/cool-useful-html-tags\/","name":"10 Cool Things HTML Tags Can Do - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/cool-useful-html-tags\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/cool-useful-html-tags\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/useful-css-tricks-you-might-have-overlooked\/useful-css-tricks.jpg","datePublished":"2021-04-29T13:11:22+00:00","description":"At the moment there are a total of 142 HTML elements standardized by W3C excluding the ones in the initial phases of standardization and those that went","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/cool-useful-html-tags\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/cool-useful-html-tags\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/cool-useful-html-tags\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/useful-css-tricks-you-might-have-overlooked\/useful-css-tricks.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/useful-css-tricks-you-might-have-overlooked\/useful-css-tricks.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/cool-useful-html-tags\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"10 Cool Things HTML Tags Can Do"}]},{"@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\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6ez","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23967","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\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23967"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23967\/revisions"}],"predecessor-version":[{"id":54494,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23967\/revisions\/54494"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23967"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23967"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23967"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}