Mar 27, 2019
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.
It used for highlighting content. Like, run a text as marked for reference purpose, due to its relevance in a particular context.
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.
<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.
Represents an independent piece of content of a document, such as a blog entry or newspaper article.
Defines a dialog box element or window.
Represents a piece of content that is only slightly related to the rest of the page.
Defines a visible heading for the <details> element. The heading can be clicked to view/hide the details.
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.
Specifies a header for a section or page.
Describes the explanation for Asian typography so your web page can display Asian symbols correctly.
Defines external interactive content or plugin.
Represents control for key pair generation.
Represents a line break opportunity.