10 HTML Tags You Didn’t Know About

HTML is a powerful markup language that can be used to give our web applications structure and provide powerful accessibility benefits, but only when used appropriately. So in this article, I will tell you about 10 HTML tags you didn’t know. And maybe it will make your life when writing HTML a little bit easier.

HTML Audio Tag

The <audio> tag defines a sound, such as music or other audio streams. There are three currently supported file formats: MP3, WAV, and OGG.

<audio controls>
  <source src="sound.ogg" type="audio/ogg">
  <source src="sound.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

HTML Blockquote Tag

The <blockquote> tag specifies a section that is quoted from another source.

<blockquote cite="https://www.lipsum.com/feed/html">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris bibendum fermentum purus     ut rutrum. Phasellus rhoncus mi at mi porttitor sagittis. Vivamus semper, odio id dapibus aliquam, arcu tellus dictum lorem, sed sagittis urna dolor quis nunc. Curabitur ligula enim, faucibus ac turpis vitae, euismod lacinia odio. Nunc tempor pharetra tortor, in blandit velit tristique sit amet. Suspendisse quis eleifend arcu. Vivamus sit amet pellentesque eros, sit amet viverra nulla. Mauris mi nulla, interdum quis arcu a, lobortis rhoncus nibh. Duis facilisis consequat tincidunt. Mauris sit amet lacus vitae velit gravida luctus.
</blockquote>

HTML Output Tag

The <output> tag represents the result of a calculation. You can use the plus sign and equal symbol to indicate that the first and second input values should be assigned to the output tag. You can denote this with a for attribute containing the IDs of the two elements to combine.

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="a" value="50">
  +<input type="number" id="b" value="25">
  =<output name="x" for="a b"></output>
</form>

HTML Picture Tag

The <picture> tag allows you to specify image sources. Instead of having an image that you scale up and down depending on the viewport width, multiple images can be designed to fill the browser viewport.

The attributes of the source element are:

• srcset (required): Defines the URL of the image to display
• media: Accepts any valid media query that you might define within CSS
• sizes: Defines a single width value, a single media query with a width value, or a comma-separated list of media queries with a width value
• type: Defines the MIME type.

The browser uses the attribute values to load the most appropriate image; it uses the first <source> element with a matching hit and ignores the subsequent source elements.

The <img> tag is used to provide backward compatibility if a browser doesn’t support the element or if none of the <source> tags match.

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

HTML Progress Tag

The <progress> tag is not a replacement for the <meter> tag in that case components indicating disk space usage or query relevance should use the <meter> tag.

<progress value="45" max="100"></progress>

HTML Meter Tag

The <meter> tag defines a scalar measurement within a defined range or a fractional value. You also can refer to this tag by the name “gauge”.

You can use the <meter> tag to display disk usage statistics or to indicate the relevance of search results.

The <meter> tag should not be used to indicate the progress of a task. These types of components should use <progress> element.

<meter value="5" min="0" max="10">5 out of 10</meter><br>
<meter value="0.5">50%</meter>

HTML Template Tag

The <template> tag contains content that is hidden from the user but will be used to instantiate HTML code repeatedly.

<template>
  <h2>Person</h2>
  <img src="person.jpg">
</template>

Using JavaScript you can render this content with the cloneNode() method.

function showTemplate() {
  const myTemplate = document.querySelector('template');
  const templateClone = myTemplate.content.cloneNode(true);
  document.body.appendChild(templateClone);
}

HTML Time Tag

The <time> tag defines a human-readable date or time. This can be used to encode dates and times in a machine-readable manner so that user agents can add birthday reminders or scheduled events to the user’s calendar. Additionally, this allows search engines to produce “smarter” search results.

<p>You need to get up at <time>07:00</time>.</p>

HTML Video Tag

The <video> tag specifies a movie clip or video stream. This tag suports formats: MP4, WebM and Ogg.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

HTML Word Break Tag

If you have a long block of text or a long word, you can use the <wbr> tag to specify where in a body of text it would be ideal to break. This is one way to ensure the browser upon resize doesn’t break your text in a strange spot.

<p>Lorem ipsum <wbr>dolor<wbr> sit amet, consectetur adipiscing elit.</p>