HTML is an ever evolving language. W3C have mentioned that HTML5 as a living standard. In other words, any recent additions to HTML5 will be referred just as HTML and no version numbers will be added. With new HTML tags releasing frequently, lets have a look a some of them.
Common HTML5 tags such as , , , and others are widely used. However, there are a number of recent tags that gives better semantic meaning.
Lets discuss some of them.
1.
MDN says, the element represents a specific period in time. It may also include the datetime attribute.
By using this we can encode dates and times in a machine-readable format so that user agents can offer to add meeting reminders or scheduled events, and search engines can produce smarter search results.
<!-- <time> Syntax -->
<p>Durga Puja starts on <time datetime="2020-09-07">Sept 7</time> in Deshbandhu Park.</p>
<p>The local train leaves Habra station at <time datetime="20:00">8PM</time> and reaches Sealdah station at <time datetime="21:30">9:30PM</time>.</p>
2.
The HTML tag is used to indicate the term that is defined within a sentence. The word defined is usually placed at the beginning of the sentence. In addition, you may also use the tag for an abbreviation of the definition.
<!-- <def> Syntax -->
<dfn><abbr title="Hyper Text Markup language">HTML</abbr></dfn>
is a markup language that is commonly used for creating webpages.
is an inline element.
3.
The tag is used to highlight parts of a text or sentence. It is useful to showcase the importance or relevance of a section in a paragraph.
By default, most browsers renders text within tags as black text on a yellow background.
<!-- <mark> Syntax -->
<p>There are several new <mark>shopping complex</mark> in Habra</p>
It is designed to pick out sections of a content for the reader’s attention.
The main difference between and tags is that is used to show content with an degree of relevance while indicates text of importance.
4.
The tag is used to show additional details that the user can view or hide.
It creates a disclosure widget by default in which information is visible only when the the widget is clicked. tag can also be used along with it to provide a label or title to the element.
is a block default value in most browsers. Sadly, there’s no built-in way to animate the transition between open and closed.
5.
The tag is a used to hold other content, like illustrations, diagrams, photos, code listings, etc inside it.
The elements in should be Self-contained meaning it should not be a part of flow of another content and can easily be moved away without breaking the meaning of the content.
<!-- <figure> Syntax -->
<figure>
<p style="white-space:pre">
Twinkle, twinkle, little star, How I wonder what you are, Up above the world so high, Like a diamond in the sky; Twinkle, twinkle, little star, How I wonder what you are.</p>
<figcaption><cite>Rhymes for the Nursery</cite>,
by Jane Taylor</figcaption>
</figure>
6.
The tag contains a set of pre-defined options for an element.
This items can be a list of recommended input values. It is useful to provide auto complete features without JavaScript.
<!-- <datalist> Syntax -->
<label for="location">Choose a place to visit in India:</label>
<input list="places" id="location" name="location" />
<datalist id="places">
<option value="Goa">
<option value="Darjeeling">
<option value="Puri">
<option value="Andaman">
<option value="Ladakh">
<option value="Varanasi">
</datalist>
7.
The tag is similar to tag, but provides flexibility by allowing multiple elements for the same resource, which can adapt based on different display/device scenarios.
The browser will look into each child element and choose the best match. If no matches are found, or if the browser doesn’t support the element, the URL of the element’s src attribute is selected. The selected image is then shown in the element.
While both and elements contain the element, the resource selection algorithm is different for the element.
An important point to note is the element itself does not display anything. It provides a context for its contained element that enables it to choose from multiple URLs.
8.
The
tag is used to show a list of definition or description. The tag is used along with and to showcase the list.
<!-- <dl> Syntax -->
<p>Web Design basic languages:</p>
<dl>
<dt>HTML</dt>
<dd>Markup language for creating webpages.</dd>
<dt>CSS</dt>
<dd>Giving styles to markup</dd>
<dt>JavaScript</dt>
<dd>Provides scripting functionality</dd>
</dl>
It is also possible to define multiple terms with single or multiple corresponding descriptions, and inside a
tag.
9.
tag is a phrase which is used to define a piece of computer code in HTML.
The text inside the tag is used to show a short fragment of computer code.
<!-- <code> Syntax -->
<code>A piece of computer code</code>
tag can be wrapped element to represent multiple lines of code.
10.
The tag is used to measure a data within a given range. It can represent either a scaler value or a fractional value.
<!-- <meter> Syntax -->
<meter value="25" min="1" max="100">25 out of 100</meter><br>
<meter value="0.8">80%</meter>
The is also known as a gauge, and can be used to display disk usage, the amount raised during fundraising activities, or the relevance of a search query result.
11.
The tag is used to show the progress of a task.
The difference between and is how the value changes. Progress is one way change from zero to max. While the meter value may fluctuate in either direction.
If the content is related to date or time, the tag must be used.
Conclusion
There several new HTML tags that you must be using. In addition, there are several other new tags that are either been proposed or have just been released. Further, for a list of tags, you can check out these cheat sheets of HTML and HTML-DOM.
