10 HTML Elements You Probably Didn’t Know About

Posted by TotalDC

HTML is a powerful markup language which 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 elements you probably dint’t know. And maybe it will make your life when writing HTML a little bit easier.

Audio

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>

Blockquote

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>

Output

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>

Picture

The <picture> tag allows you to specify image sources. Instead of having an image which 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 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 backwards 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>

Progress

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>

Meter

The <meter> tag defines a scalar measurement within a defined rage 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 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>

Template

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);
}

Time

The <time> tag defines a human-readable date or time. This can be used to encode date 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>

Video

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>

Word Break

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>

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: