Those HTML Elements You Never Use 🌚🕵🏿
Tags: beginners, webdev, html, tutorial
Published: 2022-04-11 20:24:00

There are over **a hundred** elements in HTML, all of which can be applied to pieces of text to give them special meaning in a document. Most of us only know a few, like the [`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p), [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div), and [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body) elements…

But there are actually a bunch more hidden in the dark realms of the [W3C reference](https://dev.w3.org/html5/html-author/). That’s why, in this article, I took the liberty of diving deep into the HTML documentation, to come out with a handy bag of elements that will improve your website in not one, but **two** very important ways: accessibility and SEO.

Press `Ctrl`+`D` to bookmark this article and easily come back to it when you need it. And with that said, let’s begin!

## :point_right: [`<abbr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr) — Abbreviation

![abbr](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wa955z63369nucw8xrgx.gif)

 

This elements represents both **abbreviations** (like Corporation ➟ Corp.) and **acronyms** (like Cascading Style Sheets ➟ CSS). Additionally, you can use its `title` attribute to write the full form of the word so that screen readers can read it and users can hover over it to read it.

___

## :point_right: [`<ins>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins) and [`<del>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del) — Insert and Delete

![ins](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mcgyhckvdocsm1hawh2c.png)


The [`<ins>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins) and [`<del>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del) elements represent a range of text that has been added or deleted to a document. You may have already seen these elements in the [Github Pull Requests](https://github.com/vercel/next.js/pull/36067/files).

___

## :point_right: [`<dfn>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn), [`<var>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var), [`<kbd>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd), [`<samp>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp), and [`<output>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output) — Technical Elements

![dfn](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m5re9db9y6aupb95scm8.png)


These are elements that represent special technically-oriented parts in a document, like definitions, variables, keystrokes, etc…

___

## :point_right: [`<bdo>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdo) — Text Directionality

![bdo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2y7pjd4a33odpbw0onnl.png)

This element changes the directionality of text to make it render backwards. You can control its behavior using the `dir` attribute.

Although not its intended use, but it can reverse text using nothing but HTML!

___

## :point_right: [`<mark>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark) — Highlighting Text

![mark](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcgbki4wsap0qsen4tyk.png)


The purpose of this element is to highlight text like you would with a marker.

___

## :point_right: [`<area>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area) — Clickable Image Areas

![area](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70134tynvhr0kzzxl1hl.gif)

 

You can use this element to make certain areas of your image behave like links!

___

## :point_right: [`<dl>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl), [`<dd>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd), and [`<dt>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt) — Description Lists

![dl](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7sp6u46opu6a1lbsffa5.png)

You can use these elements to create a semantically-accurate description list where you define multiple terms in one block of text.

___

## :point_right: [`<sup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup)and [`<sub>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub)— Superscripts and Subscripts

![The Pythagorean theorem is often expressed as the following equation: a2 + b2 = c2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qy03k2s7bxla52rp6e3.png) 

With these two elements, you can add **superscripts** (like x²) and **subscripts** (like x₀) to your document.

___

## :point_right: [`<figure>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure) and [`<figcaption>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption) — Labeled Images

![figure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gpjjur0gp27hy5qbltt.png)

You can use [`<figure>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure) to contain any element that you want, like an image for example. And then, you add [`<figcaption>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption) as its last child, where you can add a block of text that describes what’s above it.



___

## :point_right: [`<progress>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) and [`<meter>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter)— Marking Progress

![progress](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/393avkx9ul4wpse5wrd6.png)

This one allows you to create semantically-right progress-bar elements where you show how far an action is from being finished.  



___

## :point_right: [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) — Expandable Menus

![details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7brbrc0rpzb876hanhoi.gif)


You can use this element to create a native menu that has a title and can expand using a button. No JavaScript needed.



___

## :point_right: [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) — Pop-up Dialogs

![dialog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tt72qoiv39zlcpkh5jsx.gif)


It’s possible to create semantically-accurate dialogs using this element. It doesn’t do much by itself, so you have to use CSS and JavaScript to add more functionality.

___

## :point_right: [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist)— Text Input Suggestions

![Choose a flavor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vhz7uslle4f8ob4cas9.gif)

 

This element lets you manually add text-input suggestions. You can add anything you want!

___

## :point_right: [`<fieldset>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)— Grouping Form Elements

![Choose your favorite monster: Kraken - Sasquatch - Mothman](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0if254cpvwuop576ptff.gif)

Keep your forms tidy and more user-friendly by using the [`<fieldset>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)element.

___

## :point_right: [`<object>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object)— Embedding External Objects

![object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aavm59i9olvricrdpdjc.gif) 

With this amazing element, you can embed almost any file you want to your website! The most commonly supported files are PDFs, Youtube videos, etc…

___

## :point_right: [`<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript)— If JavaScript Is Disabled

![CodePen doesn't work very well without JavaScript. We're all for progressive enhancement, but CodePen is a bit unique in that it's all about writing and showing front end code, including JavaScript. It's required to use most of the features of CodePen. Need to know how to enable it? Go here.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tg2ukhlh1m0yaofuciq0.png)
 


This element can be used to show some content when JavaScript is disabled by the browser. It’s very commonly used by websites that heavily depend on JavaScript, like Single Page Applications (SPAs).

___

If you found this guide useful, please don’t forget to **bookmark it** for future reference.

I make posts like this everyday, so please **follow me** to stay informed. :heart:

{% user eludadev %}

{% twitter https://twitter.com/eludadev/status/1526989502199234567?s=20&t=WffWc4GscHmkIXu1n0BcXw %}