The most useful HTML5 tags you might not Know

HTML5 brings a host of features that allow developers to make their documents more easily understood by other systems. HTML5 brings many brand new tags and elements as well as attributes. You might have used some of these tags before maybe just not in the same way.

Let's find out them -

<ins>, <del> & <s>

These tags are useful when you are using dealing with content that has been changed or whose relevance has been updated. Where, <ins> tag defines text that has been newly added to a document, <del> tag defines text that has been removed from the document and <s> tag is best used for when content has been removed and then updated similar to <strike> tag.

<q> & <blockquote>

Both of these tags are meant to be used for external quotations, but their usage is a little bit different. <q> tag used to define a short inline quotation of text. On the other hand, <blockquote> tag used for large spans of text.

<mark>

It used for highlighting content. Like, run a text as marked for reference purpose, due to its relevance in a particular context.

<optgroup>

This is one of the oldest tags. But, it’s still overlooked by developers. <optgroup> used within the <select> tag to supports various categories of <option> elements.

<datalist>

It acts like a combo box. You can now use the <datalist> to define the list of valid option for your various <input> tags, such as a search box pre-populated with items based on the user's history. Which currently requires a bunch of JavaScript or JavaScript libraries to handle but that can be done natively with HTML5.

<output>

This tag used for the content that generated dynamically with JavaScript. It has a value attribute, which can be manipulated through the DOM with JavaScript to change what is displayed on the screen. This is much more convenient than the current ways of doing things.

<header>, <footer> & <nav>

HTML5 were created to help us better explain the semantic structure. HTML5 tags like <header>, <nav> and <footer> can be used to replace the id and class with <div> to provide semantic structure to content.

<figure> & <figcaption>

Both tags used with images in text content, but it can be anything. <figure> is a container for content like images, and <figcaption> provides a caption or subtitles for the contents of the <figure> tag.

<progress> & <meter>

Both are similar but have different semantic meanings. <progress> use for a task or to measure how to complete something is the scenario. Where, <meter> tag is for gauges and measurements of value like thermometers, quantity used, etc.

<article>

Represents an independent piece of content of a document, such as a blog entry or newspaper article.

<dialog>

Defines a dialog box element or window.

<aside>

Represents a piece of content that is only slightly related to the rest of the page.

<summary>

Defines a visible heading for the <details> element. The heading can be clicked to view/hide the details.

<small>

Tag explains that this tag should be used to lower the importance of text or information. Browsers interpret this by making the font smaller so it has a less visible impact.

<hgroup>

Specifies a header for a section or page.

<rt>

Describes the explanation for Asian typography so your web page can display Asian symbols correctly.

<embed>

Defines external interactive content or plugin.

<keygen>

Represents control for key pair generation.

<wbr>

Represents a line break opportunity.

<canvas>

The most exciting feature of HTML5 is <canvas>. It allows us to render 2D shapes or graphics on a web page with the help of JavaScript. Even, it enables us to create an animation using HTML5 Canvas. It is a great way to build charts and graphs, which have been a traditional weak spot in HTML, as well as custom graphics.