10 Cool Things HTML Tags Can Do

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 best CSS tricks you might have overlooked. This post will remind you some of the HTML tags that you didn’t know you could use to implement features such as:

1. Map Images

The HTML <map> elements can be used to create image maps. Image maps 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 <area> elements nested inside <map>.

Note: 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.

Tip: 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.

2. Input suggestions

Use <datalist> to provide a list of relevant suggestions that appear while typing an input value.

3. Highlight Text

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 <mark> will have that effect.

You can customize the highlight color with the background-color CSS property of <mark> and the text color with the color property.

4. Define Templates

Along with HTML5 came the new <template> element. The <template> element holds markup inside it that is not rendered by the browsers, the markup enclosed by it are to be used to generate dynamic contents in the page using JavaScript.

For example, suppose you have a <table> where rows are to be added dynamically, you can simply put the markup of an empty row of that table inside the <template> 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.

5. Fine Print

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 <small> tag in HTML can be used to show fine prints. From HTML5 onwards the <small> tag not only shows a fine-print styled text but will also semantically define the same as legal disclaimers and caveats.

6. Assign a Base URL

The <base>HTML element is quite handy when you have multiple links in your document with the same domain URLs, it allows you to add a base URL to the document which in turn allows you to add only relative URLs to other links in the page as needed.

Note: 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’t forget to assign the complete URL to it.

7. Responsive Images

Responsive web development is in vogue with ever growing mobile access. Images can be toggled for different screen sizes with markup. The <picture> HTML5 element lets you add various image sources for different media for the image inside it.

Note: This currently works in Chrome only. You will have to set dom.image.picture.enable to true in about:config in Firefox.

8. Color Picker

HTML5 introduced many new input type elements; the color input element is one of them. It lets you chose a color on a webpage with the help of a color picker.

9. Group options

If you have many options in a dropdown list and would like to show them grouped, the <optgroup> element will get the job done. You can also style the groups with CSS.

10. The <noscript> element

The markup inside <noscript> 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.

 <head>
 <noscript><link rel="stylesheet" href="noscript_fallback.css"></noscript>
 </head>
 <body>
 <noscript><h2>Javascript is disabled in your browser.</h2></noscript>
 </body>
 

Now Read: 15 Useful CSS Tricks You Might Have Overlooked