8 HTML Tags You Should Know!

Details & Summary

The <detail> tag is used to make collapsible sections when it is required to provide extra info. It uses the <summary> tag which specifies the title that can be clicked to expand or collapse the details.

For Example:

<details>
   <summary>You Must Know</summary>
   <p>You Must Know also known as a YMK</p>
</details>

Output:

You Must Know (click here)

You Must Know as also known as a YMK

---

The <ins> & <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.

For Example:

<p> Yujan is a 
   <del>app developer</del>
   <ins>web developer</ins>
   from Nepal.
</p>

Output:

Yujan is a app developer web developer from Nepal.

---

Meter Tag

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

For Example:

<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>

Output:

Disk usage C: 2 out of 10
Disk usage D: 60%

---

Template

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

For Example:

<template>
  <h1>Yujan</h1>
  <p>Random para</p>
  <img src="/path.jpg">
</template>

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

---

The <mark> Tag

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

For Example:

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

Output:

HTML can do MAGIC .

---

ABBR

The <abbr> tag defines an abbreviation or an acronym, like “HTML”, “CSS”, “MR.”, “Dr.”, “ASAP”, “ATM”.

For Example:

<p>Our Page <abbr title="Developer Community">(DC)</abbr> have 100k followers today.</p>

Output:

Our Page (DC) have 100k followers today.

---

Datalist

The <datalist> tag is used to provide an “autocomplete” feature for <input> elements. Users will see a drop-down list of pre-defined options as they input data.

For Example:

<input list="posts" name="post" id="post">
<datalist id="posts">
   <option value="css flexbox"></option>
   <option value="css grid"></option>
   <option value="html tags"></option>
   <option value="JavaScript setTimeout"></option>
   <option value="JavaScript array meathods"></option>
</detalist>

Output: