DEV Community

loading...
Cover image for Did You Know These 14 Useful HTML Tags?

Did You Know These 14 Useful HTML Tags?

kais_blog profile image Kai Originally published at kais.blog ・5 min read

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

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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> 
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (4)

pic
Editor guide
Collapse
luispinheiro profile image
Luis Pinheiro

Hey ;)
That progress tag, I didn't knew, very useful.

Thanks

Collapse
sohamkakkar profile image
Soham-Kakkar • Edited

Well these are important but least used tags in HTML. Thanks for bringing these to the front!

Collapse
kais_blog profile image
Kai Author

Thanks :) Yeah, there are many HTML tags that are underused.

Collapse
aspiiire profile image
Aspiiire

Thanks a lot, Some never seen in 5+ years that I use HTML