DEV Community

Those HTML Elements You Never Use 🌚🕵🏿

VIDOVA.ai on April 11, 2022

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

Read full post

Ben Halpern • Apr 12 '22

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!

GrahamTheDev • Apr 12 '22 • Edited

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

Nightmares_prog1mc • Apr 12 '22

using tab and space 😈right?

GrahamTheDev • Apr 12 '22

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! 🤣

VIDOVA.ai • Apr 12 '22 • Edited

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

GrahamTheDev • Apr 12 '22 • Edited

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

VIDOVA.ai • Apr 12 '22

Haha that's amazing! 💯

Ammar Sherif Mohammed • Apr 12 '22 • Edited

                         ___________________________________


                                           LOL😂

                       ________________________________________

Akshay Kannan • Apr 17 '22

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

WORMSS • Apr 13 '22

I haven't used area since the Geocities days.

leob • Apr 12 '22 • Edited

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

Arnav Kumar • Apr 13 '22

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.

max • Apr 13 '22 • 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 ;)

VIDOVA.ai • Apr 14 '22

Thanks for the suggestions! 👍 I removed the  and  elements.

VIDOVA.ai • Apr 14 '22

Thanks for the feedback! 👍
I decided to remove the , <s>,  and  elements from the article as I realized their use can be quite confusing, especially for beginner programmers.

VIDOVA.ai • Apr 12 '22

Thank you guys for the amazing feedback!

I'll be adding more elements soon ♥️

Obaino82 • Apr 17 '22

Nice work

cyberstorm2007 • Jul 23 '22

Why you did not write about ?

I think this is powerful element for UI too.

Elijah Trillionz • Jul 20 '22

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

Nightmares_prog1mc • Apr 12 '22

i folloed u but i didnt get a free cookie 🤔😒🤦‍♂️

Muhammad Fawwaz Orabi • Apr 13 '22

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

VIDOVA.ai • Apr 14 '22

me too... 🤷

Bisrategebriel Fisseha • May 23 '22

Insightful!!

Matt Miller • Apr 14 '22 • Edited

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

Steve-Vail • Apr 15 '22

deprecated

Matt Miller • Apr 15 '22

Oh, sh!t. My bad..

naveennamani • Apr 14 '22

I've the whole mdn website available offline in my laptop, and these things are just a few clicks away. The fact is I know all of them and yet never came across a situation to actually use them.

NatriumDev • Apr 13 '22 • Edited

StackExchange uses kbd on it's sites.

eg.: this question on SuperUser shows keys in the question: superuser.com/questions/1157085/ho...

Some custom styling is needed because browsers don't do this at the moment.

Paul DuBois • Apr 14 '22

<sarcasm>I am NEVER sarcastic!</sarcasm>

Tawhid • Apr 12 '22 • Edited

I totally forgot about this tag <abbr>

Mathieu Huot • Apr 12 '22 • Edited

Nice article! We always need to be reminded of the power of HTML. Also worth mentioning the <meter> element which acts like the progress, but with more control.

Diego (Relatable Code) • Apr 12 '22

Glad to see that the dialog element was included. Although just as a small aside, the dialog element itself isn't completely accessible. So try not to use it if the website is going out to the greater public.

References:

developer.mozilla.org/en-US/docs/W...
scottohara.me/blog/2019/03/05/open...

Michael R. • May 3 '22

<aside>
    <small>Your play on words, albeit likely unintentional, 
was nonetheless clever.</small>
</aside>

Because you said, "small aside". Get it? Haha... 😏🙄😒

Conner Ow • Apr 11 '22

I didn't know a lot of these existed. Amazing article!!

Medea • Apr 11 '22

Woah this is cool, especially progress and dialog

Randell Brian Knight • Apr 12 '22

This is an awesome article. I'm glad you covered these elements to help us better understand them. Thanks for the info! 😎

Samuel Collier • Apr 12 '22

This is really cool! Thanks for bringing these to my attention! I'll definitely want to try some of these out in my later projects!

Ardies Lebon • May 8 '22

Nice

Richard Smith • May 20 '22

Good post, kudos!

CuriousDev • Apr 12 '22

Thank you for this list, in comparison to other lists it is very well done!

Victor Eke • Apr 14 '22

Wow, I've learned a lot of new elements I never heard about. The element looks cool. 💚

Soham • Apr 14 '22

I knew almost none of these lol

Ammar Sherif Mohammed • Apr 12 '22

Amazing 👌

Adam Crockett 🌀 • Apr 12 '22

A long time ago I made an interactive building map using hard work! Would do it in JavaScript if I had too

Linc Codes • Apr 12 '22

Great article ❤❤❤