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
<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
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
<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
4. Define Templates
Along with HTML5 came the new
<template> element. The
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
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
<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
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.
The markup inside