12 HTML Tags You Don't Know

Subscribe to my newsletter and never miss my upcoming articles

HTML (Hyper Text Markup Language) is used to design web pages using a combination of Hypertext and Markup language.

In this post, we're going to take a look at some cool stuff that can be done using HTML. Let's look at some of the html tags, you might not be knowing even existed. ould be making use of today.

Let's get started πŸ’ͺ


1. The <figure> tag

This can be used to mark up a photo. The <figure> element can also contain a <figcaption>.

<figure>
  <img src="https://images.unsplash.com/photo-1593642634315-48f5414c3ad9" alt="Person using lack laptop computer on brown wooden table" style="width:100%">
  <figcaption>Person using lack laptop computer on brown wooden table</figcaption>
</figure>

2. The <audio> tag

⁣<audio> element provides a way to add audio resources to a web page without the need to use any other plugin.⁣ It's used to play a sound much as music or an audio stream. It supports mp3, wav and ogg. ⁣ A fallback text is enclosed within the tag to be shown to browsers that don't support the element.⁣ ⁣ By default, the browser does not show any controls. ⁣ To add the ability for users to play, pause, adjust volume, etc. the 'controls' attribute can be used.

<audio controls>
  <source src="music.mp4" type="audio/mp4">
  <source src="mucis.ogg" type="audio/ogg">
</audio>

3. The <video> tag

This allows you to embed a media player for video playback. It's used to play a video clop or a video stream without embedding youtube or vimeo videos. It supports mp4, webm and ogg.

For example, you can upload your video on AWS S3 and use the <video> tag to embed it on your website.

You can also specify certain attributes, such as width, height, autoplay, loop, controls, etc.

<video width="960" height="540" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
</video>

4. The <progress> tag

The <progress> tag represents the progress of a task.

The <progress> tag should not be confused with the <meter> tag (which represents a gauge). It has two attributes value and max.⁣⁣

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

5. The <meter> tag

You can use the meter element to measure data within a given range (a gauge).

This can be achieved with min and max values or with a percentage.

<meter value="7" min="0" max="10">7 out of 10</meter>

<meter value="0.4">40%</meter>

6. The <data> tag

It specifies the machine-readable translation of the content of the element. It also provides a human-readable text.

<ul>
  <li>
    <data value="010">Dogs</data>
  </li>
  <li>
    <data value="011">Cats</data>
  </li>
</ul>

7. The <datalist> tag

⁣The <datalist> tag is used to provide autocomplete feature in the input field of the form.⁣ ⁣ It specifies the set of predefined suggestions for the user to input.⁣

<input type="text" list="days" placeholder="Choose a Day">
<datalist id="days">
  <option value="Monday"></option>
  <option value="Tuesday"></option>
  <option value="Wednesday"></option>
  <option value="Thursday"></option>
  <option value="Friday"></option>
  <option value="Saturday"></option>
  <option value="Sunday"></option>
</datalist>

8. The <noscript> tag

The content inside the <noscript> element is rendered by the browser only when JavaScript is disabled. It provides a fallback mechanism for the components that will stop working without JavaScript.

<noscript><h2>JavaScript is disabled in your browser.</h2></noscript>

9. The <detail> tag

The <⁣detail> tag is used to make collapsible sections when it is required to provide extra information about a subject that users can hide or view by their choice. ⁣ It uses the <summary> tag which specifies the title that can be clicked to expand or collapse the details.⁣

<details>
  <summary>Click To Open</summary>
  Hey, I am natively collapsable section. My content remains hidden till you click on summary.
</details>

10. The <wbr> tag

The <wbr> tag stands for word break 🍞 opportunity which is used when a word is too long, and you don't want the browser to break it at the random place, helps to break the word where you want.⁣

<p>This is a lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnngggggggggggggggggggggggggggggggggggggggggg<wbr>word.</p>

11. The <mark> tag

<mark> is a very simple and useful native tag used to add some nice highligting in your webpage without any CSS.

<p>HTML can do <mark> MAGIC </mark>.</p>

12. The <ins> and <del> tag

<ins> element indicates text that has been added to the document.⁣⁣ <del> is used for the text that has been deleted from the document.⁣⁣

<p>Jatin is a
  <del>spider man</del>
  <ins>web developer</ins>
  from India.
</p>

References


You can also connect with me on Discord .

Chris Bongers's photo

Great article Jatin, but darn it I knew all 12 🀨

Jatin Rao's photo

Thanks Chris Bongers

You're a Unicorn πŸ¦„

Prateek Aher's photo

Those are some cool tags Jatin Rao. I admit, didn't know half of them. It'd be even cooler if you could mention any of their use cases.

Ekomobong Otu's photo

Great Article. I knew like 80% but it was still a good read

Jatin Rao's photo

Thanks Ekomobong Otu

I'm glad It was a good read πŸ˜€

Catrina's photo

you got me. i've been doing html for many years and this was just the refresher (update) i needed. thanks for your work!

Jatin Rao's photo

Thanks for your kind words Catrina

I'm glad you liked it πŸ˜€

Peter Thaleikis's photo

Oh, there are really some I didn't know πŸ˜…οΈ

Jatin Rao's photo

Aha! I hope you got some to learn about some new tags Peter 😊

Peter Thaleikis's photo

Yeah, didn't know about meter and progress Jatin Rao

Brian Morrison's photo

Excellent list! I actually didnt know a few of these but I'll be using them going forward. πŸ™

Jatin Rao's photo

Thanks Brian Morrison

I'm glad you liked it πŸ₯³πŸ₯³

Ameen's photo

I know only 8 of em 🀯🀯🀯

Jatin Rao's photo

That's great Ameen

Now you know 4 more πŸ˜‰

Ritvij Kumar Sharma's photo

This is Awesome!

Sandeep Panda's photo

Super interesting! I think you used an incorrect programming tag. Could you remove and use General Programming tag instead?

Jatin Rao's photo

Thanks for pointing it out Sandeep Panda

I've changed the tag for the post πŸ˜€