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 <header>, <footer>, <nav>, <article> and others are widely used. However, there are a number of recent tags that gives better semantic meaning.
Lets discuss some of them.
1. <time>
MDN says, the <time> 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. <dfn>
The HTML tag <def> 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 <abbr> 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.
<def> is an inline element.
3. <mark>
The <mark> 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 <mark> 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 <mark> and <strong> tags is that <mark> is used to show content with an degree of relevance while <strong> indicates text of importance.
4. <details>
The <details> 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. <summary> tag can also be used along with it to provide a label or title to the element.
<!-- <details> Syntax -->
<details>
<summary>Copyright</summary>
© - Learn Computer Academy
<p>All content and graphics of this website are the property of Learn Computer Academy</p>
</details>
<details> is a block default value in most browsers. Sadly, there’s no built-in way to animate the transition between open and closed.
5. <figure>
The <figure> tag is a used to hold other content, like illustrations, diagrams, photos, code listings, etc inside it.
The elements in <figure> 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> <img src="https://learncomputer.inwp-content/uploads/2019/12/logo.png" alt="The beautiful LCA logo."> <figcaption>LCA Logo</figcaption> </figure>
<!-- <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. <datalist>
The <datalist> tag contains a set of pre-defined options for an <input> 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. <picture>
The <picture> tag is similar to <img> tag, but provides flexibility by allowing multiple <source> elements for the same resource, which can adapt based on different display/device scenarios.
<!-- <picture> Syntax -->
<picture>
<source srcset="/wp-content/uploads/2020/01/Website-Design-Facts-You-Probably-Didn%E2%80%99t-Know-About-300x150.jpg" media="(min-width: 500px)">
<img src="/wp-content/uploads/2020/01/Website-Design-Facts-You-Probably-Didn%E2%80%99t-Know-About.jpg">
</picture>
The browser will look into each child <source> element and choose the best match. If no matches are found, or if the browser doesn’t support the <picture> element, the URL of the <img> element’s src attribute is selected. The selected image is then shown in the <img> element.
While both <video> and <audio> elements contain the <source> element, the resource selection algorithm is different for the <picture> element.
An important point to note is the <picture> element itself does not display anything. It provides a context for its contained <img> element that enables it to choose from multiple URLs.
8. <dl>
The <dl> tag is used to show a list of definition or description. The tag is used along with <dt> and <dd> 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, <dt> and <dd> inside a <dl> tag.
9. <code>
<code> tag is a phrase which is used to define a piece of computer code in HTML.
The text inside the <code> tag is used to show a short fragment of computer code.
<!-- <code> Syntax --> <code>A piece of computer code</code>
<pre> tag can be wrapped <code> element to represent multiple lines of code.
10. <meter>
The <meter> 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 <meter> 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. <progress>
The <progress> tag is used to show the progress of a task.
The difference between <meter> and <progress> is how the value changes. Progress is one way change from zero to max. While the meter value may fluctuate in either direction.
<!-- <progress> Syntax --> <label for="file">File progress:</label> <progress id="file" max="100" value="30"> 30% </progress>
12. <template>
The <template> tag holds HTML code that isn’t displayed on page load. javascript can be used to make the content inside the tag visible.
<!-- <template> Syntax --> <template> <h2>Image of Car</h2> <img src="car.jpg"> </template>
13. <track>
The <track> tag can be used to hold subtitle or text for <audio> or <video> tags. It is visible when the media is playing.
<!-- <track> Syntax --> <video width="320" height="240" controls> <source src="bollywood.mp4" type="video/mp4"> <source src="bollywood.ogg" type="video/ogg"> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> <track src="subtitles_hi.vtt" kind="subtitles" srclang="hi" label="Hindi"> </video>
14. <var>
The <var> is a phrase tag which is used to define variables.
Most browsers apply font-style to "italic" of the same current typeface when rendering <var>.
<!-- <var> Syntax --> <p><var>a</var>(<var>b</var>+<var>c</var>)=<var>ab</var>+<var>ac</var></p>
15. <wbr>
The <wbr> tag stands for Word Break Opportunity. It specifies where in a text it would be ok to add a line-break.
<!-- <wbr> Syntax --> <p>This is a veryveryveryveryveryveryvery<wbr>veryveryveryveryver<wbr>yveryveryveryveryveryvery<wbr> long word.</p>
It is an empty element meaning it doesn’t have any end tag
16. <data>
This <data> tag provides both a machine-readable value for data processors, and a human-readable value for rendering in a browser.
<!-- <data> Syntax --> <ul> <li><data value="01234">Habra</data></li> <li><data value="96480">Barasat</data></li> <li><data value="42501">kolkata</data></li> </ul>
If the content is related to date or time, the <time> 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.
You can check for new proposed HTML tags in w3 org’s proposed markup docs.
Always check for browser and device compatibility before using any of the tags.
Visit our institute, Learn Computer Academy for learning Website Design in Habra,
