9 HTML Tags That Will Change Your Life!
There are many HTML tags that are used in rare cases for special functions or queries. And these tags are very important for building accessibility.
- <abbr>
- <acronym>
- <ins> and <del>
- <cite>
- <link>
- <wbr>
- <meter>
- <kbd>
- <progress>
1. <abbr>
The <abbr> tag is an HTML element that defines an abbreviation or an acronym. It is used to mark up the abbreviated form of a word or phrase and provide a full expansion of the term in plain text on first use.
The title attribute can be used to provide a description for the abbreviation or acronym when the user hovers over the element.
Here is an example of how to use the <abbr> tag:
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>2. <acronym>
The <acronym> tag in HTML is used to define an acronym. It is used to give useful information to browsers, translation systems, and search-engines. However, this tag is not supported in HTML 5.
Instead, you can use the <abbr> tag to represent an abbreviation or acronym.
3. <ins> and <del>
The <ins> tag is used to indicate a range of text that has been added to a document. It is usually used in conjunction with the <del> tag, which represents a range of text that has been deleted from the document.
The <ins> tag is often used to track changes made to a document, and the inserted text is usually underlined by default.
<p>My favorite food is <del>rice</del> <ins>burger</ins>!</p>4. <cite>
The <cite> tag is an HTML element that is used to define the title of a creative work such as a book, a poem, a song, a movie, a painting, a sculpture, etc.
It is not used to define a person’s name as the title of a work. The text in the
<cite>element usually renders in italic.
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>5. <link>
The <link> tag is an HTML element that defines the relationship between the current document and an external resource.
It is most commonly used to link to external style sheets or to add a favicon to your website.
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>6. <wbr>
The <wbr> tag is an HTML element that represents a word break opportunity. It specifies where in a text it would be okay to add a line-break. When a word is too long, the browser might break it at the wrong place.
You can use the
<wbr>element to add word break opportunities
<p>To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.</p>7. <meter>
The <meter> tag is an HTML5 element that defines a scalar measurement within a known range or a fractional value.
It is also known as a gauge. The tag can be used to display a scalar value within a given range, such as disk usage, relevance of a query result, etc.
The
<meter>tag should not be used to indicate progress (as in a progress bar). For progress bars, use the<progress>tag instead.
It is important to note that the <meter> tag supports the Global Attributes in HTML and the Event Attributes in HTML
For best accessibility practices, always add the <label> tag.
<label for="disk_d">Disk usage D:</label>
<meter id="disk_d" value="2" min="0" max="10">2 out of 10</meter><br>
<label for="disk_e">Disk usage E:</label>
<meter id="disk_e" value="0.6">60%</meter>8. <kbd>
The <kbd> tag is an HTML element used to define keyboard input. The content inside is displayed in the browser’s default monospace font.
By convention, the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated by the HTML standard.
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>
<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>9. <progress>
The <progress> tag is an HTML element that represents the completion progress of a task. It is typically displayed as a progress bar.
The tag has two attributes:
maxandvalue. Themaxattribute specifies how much work the task requires in total, while thevalueattribute specifies how much of the task has been completed.
Here is an example of how to use the <progress> tag:
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100">32%</progress>I hope you found value in this content,. If you did, kindly follow me on LinkedIn and twitter, and share this post.
