10+ Unknown HTML Tags You Should Be Using (With Examples)

/ Updated on March 12, 2023 / HTML /
  • 4.6 out of 5 Stars

The HTML specification describes many built-in elements, or tags, that define the structure and content of a web page. While many developers are familiar with the most commonly used HTML tags, such as <p>, <div>, or <a>, there is a number of lesser-known tags that you may not be aware of. Most of them were introduced in HTML5. In this article, we'll take a look at these "unknown" tags that you can (and should) use to enhance your web pages. For your convenience, we have arranged them in alphabetical order and provided a code example for each tag.

HTML tags


The <abbr> tag is used to designate an abbreviation. It can be used to indicate that a word is an abbreviation and also to specify the full form of the word using the title attribute. It supersedes the <acronym> HTML4 tag that has been deprecated in HTML5.


Abbreviations are marked up as follows:

I like editing a <abbr title="Cascading Style Sheets">CSS</abbr> file without necessarily having to edit an <abbr title="Hypertext Markup Language">HTML</abbr> file.
I like editing a CSS file without necessarily having to edit an HTML file.


The <datalist> tag is used in conjunction with an <input> element and defines a list of predefined options for it. It can be used to provide a list of suggested values, but, unlike the <select> element, the <input> with the <datalist> allows the user to enter any value manually.


HTML datalist demo:

<label for="lang">Choose a programming language:</label>
<input id="lang" list="langs">
<datalist id="langs">
 <option value="JavaScript">
 <option value="PHP">
 <option value="Python">

<details> and <summary>

The <details> tag is used to create an expandable section on a web page. The <summary> tag inside the <details> is used to specify the text that will be displayed when the section is collapsed.


Expandable details:

 <summary>View more&hellip;</summary>
 Additional information
View more… Additional information

It is a pure HTML collapsible section without any JavaScript, and you can style it with CSS as you wish. Here are several examples from Codepen:

Another live example is from our website: <details> and <summary> tags are used in our IP Address Lookup tool to show the expandable information about the parent network of an IP address:

Illustration of the use of the details/summary tags

<figure> and <figcaption>

The <figure> and <figcaption> tags can be used to create captions for images, videos, charts, diagrams, code listings, etc. The <figure> tag is used as a container, and the optional <figcaption> tag is used to specify the caption.

Why use the <figure> tag? The <figure> HTML tag improves the organization and structure of the content. It also provides a semantic meaning that makes the content more accessible for users with disabilities and search engines.


A figure with a caption:

<img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Hide_the_Pain_Harold_%28Andr%C3%A1s_Arat%C3%B3%29.jpg">
<figcaption>Hide the Pain Harold</figcaption>
Hide the Pain Harold


The <mark> tag is used to highlight text. It can be used to indicate that a section of text is relevant or important.


Search results with keywords highlighted by <mark>:

 <mark>HTML</mark> Obfuscator<br>
 <small>Protect your <mark>HTML</mark> code by encoding it.</small>

HTML Obfuscator
Protect your HTML code by encoding it.


The <meter> tag is used to create a scalar measurement within a known range, such as a gauge. It can be used to display a value such as a rating or a percentage, and also allows to specify the minimum and maximum values using the min and max attributes.


A meter showing value of 7 out of 10 is marked up as follows:

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


The <picture> tag can be described as an <img> with several image variants. You can specify multiple versions of an image to be used based on different conditions such as screen size, pixel density, or orientation. This allows you to choose and show better responsive images and get faster page load times.

The element usually contains several <source> elements, and a default fallback <img> element in case nothing matches.

Example of <picture> with the "media" condition

Change the browser window width to see the image change:

  <source media="(min-width:800px)" srcset="/i/a/html-tags/image1000x500.svg">
  <source media="(min-width:600px)" srcset="/i/a/html-tags/image700x350.svg">    
  <img src="/i/a/html-tags/image500x250.svg" alt="Example image">
Example image

Example of <picture> with the "orientation" condition

Change the device orientation to see the image change:

 <source media="(orientation: portrait)" srcset="/i/a/html-tags/image-portrait.svg">
 <img src="/i/a/html-tags/image-landscape.svg" alt="Example image">
Example image
Media conditions share the same syntax with CSS Media Queries. For the full Media Queries documentation consult the W3C reference.


The <progress> tag is used to create a progress bar. It can be used to display the progress of a task, such as a download or an upload, and also allows to specify the current and maximum values.


A progress element showing 25% out of 100:

<progress value="25" max="100">25%</progress>


The <time> tag is used to specify a time or date. It allows to specify the time or date in the machine-readable format using the datetime attribute, and show it to the user in a different, human-friendly format. Why can it be useful? It adds more semantic information that can be easier parsed by search engine crawlers.


Datetime is marked up as follows:

The birthday of the Internet: <time datetime="1983-01-01">January 1, 1983</time>
The birthday of the Internet:


How many letters has the longest word you know? 10, 15? What about a 38-letter word? Here it is: Eierschalensollbruchstellenverursacher. (If you know a longer word, write it in the comments below). It is in German and means "egg-opener", literally: "egg shell pre-determined breaking point causer".


And this is where <wbr> tag becomes handy.

The <wbr> tag is used to specify a line break opportunity within a word. It can be used to prevent text from overflowing its container, or from breaking text at the wrong place.


Resize the container div to see the text wrap:

<div style="border: 2px dashed silver; width: 40%; overflow: hidden; resize: horizontal;">
<p>Without wbr: Eierschalensollbruchstellenverursacher</p>
<p>With wbr: Eierschalen<wbr>sollbruchstellen<wbr>verursacher</p>

Without wbr: Eierschalensollbruchstellenverursacher

With wbr: Eierschalensollbruchstellenverursacher


Instead of <wbr>, you can also use a soft hyphen character (in HTML: &shy;) to control word breaks. Its difference is that it adds a hyphen between word parts.


Using the soft hyphen (&shy;) to break the word:

<div style="border: 2px dashed silver; width: 40%; overflow: hidden; resize: horizontal;">


In conclusion

These are just a few examples of the lesser-used HTML tags that can be used to enhance the structure and functionality of your web pages and improve the user experience on your website. For a complete list of elements introduced in HTML 5, consult the W3C Wiki.

In the next article, we are going to take a look at the useful HTML attributes you probably don't know. Follow us and stay tuned!

Rate This Article

How would you rate the quality of this content?
Currently rated: 4.6 out of 5 stars. 3 users have rated this article. Select your rating:
  • 4.6 out of 5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5

About The Author

Lembit Kuzin is a software developer from Estonia. He is passionate about new technologies, web development and search engine optimization. He has over 10 years of webdev experience and now writes exclusive articles for Webmaster Tips and Tools.