5 HTML Tags That You Probably Never Used Before

·

2 min read

If you have just started your journey to become a developer or you're a pro, HTML is something that you will be encountering often in your path. Here is the list of five less-known HTML tags which can be especially useful in your web page design -

  • <details> and <summary>: These tags can be used to add optionally expandable sections to your web page. The <details> tag adds expandible/collapsible functionality for a given content and the <summary> tag holds the summary of the content to be displayed.

Example :

<h1>This is a Details section</h1>
<details>
  <summary>The Content</summary>
  <p>This is the content you wanted to read after clicking</p>
</details>

Result :

  • <mark>: This tag is used to highlight a particular word or section to put more emphasis on a particular area.

Example :

<h1>The mark element</h1>
<p>Do not forget to buy <mark>milk</mark> today.</p>

Result :

  • <small>: This tag is used to display a particular section in smaller font - thus implying that the denoted part is less important

Example :

<h1>The small element</h1>
<p>This is normal text.</p>
<p><small>This is smaller text.</small></p>

Result :

  • <meter>: This element is used as visual representation of a number within a predefined range of numbers. This is particularly useful to display current usage status, progress bars etc.

Example :

<h1>The meter element</h1>

<label for="disk_c">Disk usage C:</label>
<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>

<label for="disk_d">Disk usage D:</label>
<meter id="disk_d" value="0.6">60%</meter>

Result :

  • <cite>: This tag is used to denote the title of a work of art (e.g. - a song, a movie, a play, a painting etc). The display is in italics.

Example :

<h1>The cite element</h1>

<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream">
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

Result :

Apart from these tags, there are lots of other tags as well which can be carefully chosen to design your webpage fantastically. So do fiddle around and explore unlimited possibilities.

References and Image Credits:

W3Schools.com