DEV Community

Cover image for Those HTML Elements You Never Use πŸŒšπŸ•΅πŸΏ
Eluda
Eluda

Posted on • Updated on

Those HTML Elements You Never Use πŸŒšπŸ•΅πŸΏ

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>, <div>, and <body> elements…

But there are actually a bunch more hidden in the dark realms of the W3C reference. 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!

πŸ‘‰ <abbr> β€” Abbreviation

abbr

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.


πŸ‘‰ <ins> and <del> β€” Insert and Delete

ins

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


πŸ‘‰ <dfn>, <var>, <kbd>, <samp>, and <output> β€” Technical Elements

dfn

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


πŸ‘‰ <bdo> β€” Text Directionality

bdo

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!


πŸ‘‰ <mark> β€” Highlighting Text

mark

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


πŸ‘‰ <area> β€” Clickable Image Areas

area

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


πŸ‘‰ <dl>, <dd>, and <dt> β€” Description Lists

dl

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


πŸ‘‰ <sup>and <sub>β€” Superscripts and Subscripts

The Pythagorean theorem is often expressed as the following equation: a2 + b2 = c2

With these two elements, you can add superscripts (like xΒ²) and subscripts (like xβ‚€) to your document.


πŸ‘‰ <figure> and <figcaption> β€” Labeled Images

figure

You can use <figure> to contain any element that you want, like an image for example. And then, you add <figcaption> as its last child, where you can add a block of text that describes what’s above it.


πŸ‘‰ <progress> and <meter>β€” Marking Progress

progress

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


πŸ‘‰ <details> β€” Expandable Menus

details

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


πŸ‘‰ <dialog> β€” Pop-up Dialogs

dialog

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.


πŸ‘‰ <datalist>β€” Text Input Suggestions

Choose a flavor

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


πŸ‘‰ <fieldset>β€” Grouping Form Elements

Choose your favorite monster: Kraken - Sasquatch - Mothman

Keep your forms tidy and more user-friendly by using the <fieldset>element.


πŸ‘‰ <object>β€” Embedding External Objects

object

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…


πŸ‘‰ <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.

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. ❀️

Top comments (46)

Collapse
 
ben profile image
Ben Halpern

FYI, you can use abbr within DEV/Forem.

Actually, several of these are valid β€” Like ⌘.

We wouldn't expect everyone to reach for these all the time, but they're there if you really want to make your post highly usable!

Collapse
 
grahamthedevrel profile image
GrahamTheDevRel • Edited

Β 

Β 

Β 

And don't forget that real pros
can centre things without CSS 😜

Β 

Β 

Β 


Β 

Collapse
 
nightmares_prog1mc profile image
Nightmares_prog1mc

using tab and space 😈right?

Thread Thread
 
grahamthedevrel profile image
GrahamTheDevRel

I am not skilled enough to do it that way, plus I think they are ignored in markdown at the beginning of lines or get turned into code snippets. The answer is even more evil than spaces and tabs I am afraid! 🀣

Thread Thread
 
eludadev profile image
Eluda • Edited

Let me guess.. Are you using the <center> tag?

Thread Thread
 
grahamthedevrel profile image
GrahamTheDevRel • Edited

Yup, good old deprecated HTML to the rescue 🀣 told you ity was more evil than just tabs and spaces!

Thread Thread
 
eludadev profile image
Eluda

Haha that's amazing! πŸ’―

Collapse
 
ammarsherif profile image
Ammar Sherif Mohammed • Edited
                         ___________________________________


                                           LOLπŸ˜‚

                       ________________________________________
Enter fullscreen mode Exit fullscreen mode
Collapse
 
lukeshiru profile image
Luke Shiru

Worth mentioning the Warning with <u>:

Warning: This element used to be called the "Underline" element in older versions of HTML, and is still sometimes misused in this way. To underline text, you should instead apply a style that includes the CSS text-decoration property set to underline.

Also, in general, instead of b and i you might want to use strong and em. The cases in which you want to make the text bold or italic but without semantic meaning are almost nonexistent.

Cheers!

Collapse
 
eludadev profile image
Eluda

Thanks for the feedback! πŸ‘
I decided to remove the <u>, <s>, <b> and <i> elements from the article as I realized their use can be quite confusing, especially for beginner programmers.

Collapse
 
akshay9677 profile image
Akshay Kannan

<base> is also another nifty little tag that we can use to specify the base urls for all the anchor tags after it. For example we can add the base tag with a url at the top of our webpage and do something like this,

<html>
    <head>
        <base href="https://twitter.com" target="_blank">
    </head>
    <body>
        <p>Go to twitter <a href="home">home page</a>.</p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
youpiwaza profile image
max • Edited

Consider preferring strong & em instead of b(old) & i(talic) html elements.
You'll get a nicer SEO.

And i'm rather sure that the underline thing is deprecated :p

Pretty great article still, I've learned a couple new elements ;)

Collapse
 
eludadev profile image
Eluda

Thanks for the suggestions! πŸ‘ I removed the <b> and <i> elements.

Collapse
 
wormss profile image
WORMSS

I haven't used area since the Geocities days.

Collapse
 
arnavkr profile image
Arnav Kumar

I know all of them cuz at the time I was learning html I used to go to html reference and see what each one does.

I remember the time when I was trying to create a working keyboard with just image of a keyboard using the <area> tags.

Collapse
 
leob profile image
leob • Edited

Lol, I have to confess that I use <b> and <i> quite a lot, probably just laziness, so much easier than using <span> with a class :)

Collapse
 
eludadev profile image
Eluda

Thank you guys for the amazing feedback!

I'll be adding more elements soon β™₯️

Collapse
 
forabi profile image
Muhammad Fawwaz Orabi

What are you talking about? I only know div and span.

Collapse
 
eludadev profile image
Eluda

me too... 🀷

Collapse
 
nightmares_prog1mc profile image
Nightmares_prog1mc

i folloed u but i didnt get a free cookie πŸ€”πŸ˜’πŸ€¦β€β™‚οΈ

Collapse
 
obaino82 profile image
Obaino82

Nice work

Collapse
 
elijahtrillionz profile image
Elijah Trillionz

Oh my!
What a great list.
Tons of elements that I don't know exist has been revealed now.
Thanks

Collapse
 
cyberstorm2007 profile image
cyberstorm2007

Why you did not write about ?

I think this is powerful element for UI too.

Collapse
 
bisrategebriel profile image
Bisrategebriel Fisseha

Insightful!!

Collapse
 
r4nd3l profile image
Matt Miller • Edited

I would mention the <marquee> tag as well for this post, you may update the article with an extra sugar, if so.

Collapse
 
stevevail profile image
Steve-Vail

deprecated

Collapse
 
r4nd3l profile image
Matt Miller

Oh, sh!t. My bad..