Some Lesser Known HTML Tags Worth Knowing

Some Lesser Known HTML Tags Worth Knowing

There is a long lost list of HTML tags. Some are quite popular like semantic tags , some are lesser known but useful , while some for deprecated for various reasons. Lets dive deep in some of those unknown stuff.

1. The <mark> element is used to highlight or a mark a specific word in the Html document. No more need to write an extra css line for highlighting.

<p>
In this sentence , there is <mark>a highlighted </mark> word.
 </p>

Output:

2. Want to use an abbreviation in sentence and also want the full form of the abbreviation be displayed if hovered over it. Use the <abbr> tag. This element is a modern version of the deprecated <acronym>

<p><abbr title="Cascading Style Sheets">CSS</abbr>is used to style webpages</p>

3. The <bdi> tag stands for bi-directional tag. Which means the text will be displayed in the opposite direction i.e., left <- right. Is tag is useful if you want to display any Arabic or Urdu or other bi-directional Language. This would be useful to an arabic or urdu user. Also <bdi> tag is not supported in safari browsers

<p>This is a text in English </p>
<p><bdi>هذا نص باللغة العربية</bdi></p>

4. The <blink> tags lets a specific tag to blink. But you can't use it because it is a deprecated tag due to various accessibility issues.

Want to see an example of blink tag. Check out this Google page. You Would see a lot of stuff blinking 👀

5. The <meter> tag is very useful if you want to define a scalar measurement within a known range, or a fractional value. This is also known as a gauge.

<label>My internet usage is 60%</label>
    <meter id="disk_c" value="6" min="0" max="10">2 out of 10</meter><br />

6. The <progress> tag is used to show progress bars , prefarably download progress. With the help of javascript , you can pretty much make a functional progress bar.

<label for="file">Downloading progress:</label>
<progress id="file" value="40" max="100"> 40% </progress>

Note: Dont confuse with tag and tag . While the progress element represents the completion progress of a task , the meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result.

Thanks for reading about The HTML tags. What do this about the above tags. Comment below your thoughts. Would Love to Connect On Twitter. My Twitter Handle : ___Nadaa