Did You Know These 14 Useful HTML Tags?
HTML is a markup language. That means you are adding structure and semantics to your document by adding tags. These tags help the browser rendering and also assists machines understanding your content. Furthermore, they help in preventing accessibility issues. That's why you should take your time and add the right tags to your content.
While HTML is widely known and used, there are still a lot of uncommon yet useful HTML tags. In this post I'd like to show you some awesome HTML tags you might not know.
- <abbr>: Abbreviation
- <address>: Contact Address
- <blockquote>: Block Quotation
- <cite>: Citation
- <figure> & <figcaption>: Figure with Optional Caption
- <kbd>: Keyboard Input
- <map>: Image Map
- <progress>: Progress Indicator
- <sub> & <sup>: Subscript & Superscript
- <var>: Variable
- <wbr>: Word Break Opportunity
You can use the
<abbr> tag to define an abbreviation or an acronym. It helps a lot with web accessibility. In combination with the
title attribute you can add a little tooltip that is shown on hovering the element.
<abbr title="Hypertext Markup Language">HTML</abbr>
Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr
<address>: Contact Address
<address> tag to denote contact information for a person or an organization.
Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address
<blockquote>: Block Quotation
<blockquote> tag indicates that the section is quoted from another source. You can also use the
cite attribute to add the URL for the source of the quotation.
<blockquote cite="https://alice.book"> <p> It's no use going back to yesterday, because I was a different person then. </p> </blockquote>
Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
<cite> tag is mostly used in conjunction with the
<blockquote> tag. It should be used to denote the title of the creative work.
<blockquote> <p> It's no use going back to yesterday, because I was a different person then. </p> <footer> <cite>Alice's Adventures in Wonderland</cite> by Lewis Carroll </footer> </blockquote>
Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite
<figure> & <figcaption>: Figure with Optional Caption
<figure> tag lets you mark up self-contained content like a diagram or a photo. Use it in conjunction with the
<figcaption> tag to define a caption for the
<figure> <img src="diagram.png" alt="Net income of households by household type"> <figcaption>Fig.1 - Net income of households by household type</figcaption> </figure>
Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
<kbd>: Keyboard Input
<kbd> tag you can define keyboard input. It's usually rendered in a monospace font.
<p> Open the task manager by pressing <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd> </p>
Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd
<map>: Image Map
<map> tag you can create an image with clickable areas. You can specify how different areas of the image should link to different URLs.
For this, you'll have to add the
usemap attribute to your
<img> tag. Also, your map has to use multiple
<area> tags to denote the different areas.
<img src="office.jpg" alt="Floor plan" usemap="#floorplan"> <map name="floorplan"> <area shape="rect" coords="…" alt="Conference Room" href="conference-room.htm"> <area shape="rect" coords="…" alt="Kitchen" href="kitchen.htm"> … </map>
Unfortunately, explaining the usage of
<map> in detail is beyond the scope of this article.
Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map
Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript
<progress>: Progress Indicator
<progress> tag to show a progress bar for a task. Also, remember to add a
<label> tag for accessibility reasons.
<label for="file">Uploading progress</label> <progress id="file" value="28" max="100">28%</progress>
Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
<sub> & <sup>: Subscript & Superscript
<sub> tag defines subscript text. The contents are rendered with a lowered baseline using smaller text. This is useful e.g. for chemical formulas:
Despite its dangers, Dihydrogen monoxide (H<sub>2</sub>O) is often used.
Conveniently there is also a tag for superscript. The contents of the
<sup> tag are rendered with a raised baseline using smaller text. For example, you can use this for mathematical expressions:
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup
<var> tag to describe a variable in programming or in a mathematical expression.
Given the width <var>w</var> and the height <var>h</var> you can calculate the area of the rectangle.
Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var
<wbr>: Word Break Opportunity
<wbr> tag specifies a position within text where a line-break would be allowed. So, you can allow to break a (very) long word into multiple lines.
The example shows adding word break opportunities to a long german word.
Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
HTML has a lot of useful tags. Instead of using
<span> for everything, try adding more semantics to your documents. Your site will become more friendly towards machines and humans.
Did you know all of these tags? Please consider sharing this list with your friends and colleagues if it was interesting for you.