DEV Community

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

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

Eluda 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...
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
 
grahamthedev profile image
GrahamTheDev • 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
 
grahamthedev profile image
GrahamTheDev

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
 
grahamthedev profile image
GrahamTheDev • 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
 
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

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
 
eludadev profile image
Eluda

Thank you guys for the amazing feedback!

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

Collapse
 
obaino82 profile image
Obaino82

Nice work

Collapse
 
cyberstorm2007 profile image
cyberstorm2007

Why you did not write about ?

I think this is powerful element for UI too.

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
 
nightmares_prog1mc profile image
Nightmares_prog1mc

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

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

Collapse
 
bisrategebriel profile image
Bisrategebriel Fisseha

Insightful!!

Collapse
 
naveennamani profile image
naveennamani

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.

Collapse
 
natriumdev profile image
NatriumDev • 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.

Collapse
 
pauldubois777 profile image
Paul DuBois
<sarcasm>I am NEVER sarcastic!</sarcasm>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
dumboprogrammer profile image
Tawhid • Edited

I totally forgot about this tag <abbr>

Collapse
 
mathieuhuot profile image
Mathieu Huot • 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.

Collapse
 
diballesteros profile image
Diego (Relatable Code)

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

Collapse
 
killshot13 profile image
Michael R.
<aside>
    <small>Your play on words, albeit likely unintentional, 
was nonetheless clever.</small>
</aside>
Enter fullscreen mode Exit fullscreen mode

Because you said, "small aside". Get it? Haha... πŸ˜πŸ™„πŸ˜’

Collapse
 
vulcanwm profile image
Medea

Woah this is cool, especially progress and dialog

Collapse
 
ironcladdev profile image
Conner Ow

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

Collapse
 
randellbrianknight profile image
Randell Brian Knight

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

Collapse
 
stcollier profile image
Samuel Collier

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!

Collapse
 
ardies profile image
Ardies Lebon

Nice

Collapse
 
rzs401 profile image
Richard Smith

Good post, kudos!

Collapse
 
curiousdev profile image
CuriousDev

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

Collapse
 
victoreke profile image
Victor Eke

Wow, I've learned a lot of new elements I never heard about. The element looks cool. πŸ’š

Collapse
 
nottheotaku profile image
Soham

I knew almost none of these lol

Collapse
 
ammarsherif profile image
Ammar Sherif Mohammed

Amazing πŸ‘Œ

Collapse
 
adam_cyclones profile image
Adam Crockett πŸŒ€

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

Collapse
 
linccodes profile image
Linc Codes

Great article ❀❀❀