10 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 bring 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 <strick> tag.

<q> & <blockquote> - Both of these tags are meant to be used for external quotations, but their usage are little bit differ. <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 tag. 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 use 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 subtitle 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 complete something is, the scenario. Where, <meter> tag is for gauges and measurements of value like thermometers, quantity used, etc.

<canvas> - The most exciting feature of HTML5 is <canvas>. It allows us to render 2D shapes or graphics on web page with help of JavaScript. Even, it enable 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.

Comments