Did You Know These 14 Useful HTML Tags?

This post was originally published at kais.blog.

Let's move your learning forward together! Follow me on Twitter for your daily dose of developer tips. Thanks for reading my content!

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
• <noscript>: Visible If JavaScript Is Disabled
• <progress>: Progress Indicator
• <sub> & <sup>: Subscript & Superscript
• <var>: Variable
• <wbr>: Word Break Opportunity

<abbr>: Abbreviation

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

Use the <address> tag to denote contact information for a person or an organization.

<address>
  John Doe<br>
  <a href="mailto:john@example.com">john@example.com</a>
</address>

Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address

<blockquote>: Block Quotation

The <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>: Citation

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

The <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> element.

<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

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

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

<noscript>: Visible If JavaScript Is Disabled

The <noscript> tag only renders its contents if the user has JavaScript disabled. For example, you could add a small note they should enable JavaScript. If they have it enabled, this note is hidden.

<noscript>
  For full functionality of this site it is necessary to enable JavaScript. Please enable JavaScript in your browser.
</noscript>

Further reading: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript

<progress>: Progress Indicator

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

The <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>: Variable

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

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

Dampf<wbr>schiff<wbr>fahrt

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

Conclusion

HTML has a lot of useful tags. Instead of using <div> and <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.

Let's move your learning forward together! Follow me on Twitter for your daily dose of developer tips. Thanks for reading my content!

This post was originally published at kais.blog.