DEV Community

Cover image for HTML can do this? Part 1

HTML can do this? Part 1

Julia 👩🏻‍💻 GDE on December 16, 2023

Welcome to my HTML can do this series, part 1. In keeping with my GitHub-Can-Do-This series, today I want to write a post about cool things that H...
Collapse
 
codeguage profile image
Codeguage

👏 Very very nice post Julia.

Semantic HTML elements, in the common 'semantic' sense, no doubt, are unsung heroes of HTML. Especially when we're talking about accessibility, it's quite surprising to know how easy semantic HTML elements could make navigation for people using assistive screen reading technologies.

I'd like to add in an extra point over here regarding <del> that is worth noting:

<del> and <s> might be styled the same but they serve different purposes. <del> makes sense when we have interactive capabilities in the underlying document, whereby things could be inserted and deleted — and that's precisely what <ins> and <del> are meant for. If we just want to strike-through text, merely for display purposes, <s> is what we need (which is a replacement for the deprecated <strike> element).

A while ago, when I was about to teach semantic HTML on Codeguage, I myself came across a surprisingly large number of elements in HTML that I never knew of, and now try to use routinely. The world of semantic HTML is huge and I am sure you'll have a lot to come up with even more amazing posts than this one!

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE • Edited

Thanks for your comment and insights.

Thanks for pointing out the different purposes. A future article will be exactly about that - and even more, about the accessibility part of these tags, which I did not mention here at all (since, I consider it a bit more advanced):

These tags do have semantic meaning, and always should used accordingly, BUT, these most of these formatting semantics are not recognized by screen readers, at least now.

It still make sense to use them though for future compatibility! There are work arounds I want to talk about more in my next artcile on HTML tags.

Collapse
 
codeguage profile image
Codeguage

Looking forward to your next article. 🙂

Collapse
 
russellbateman profile image
Russell Bateman

Thanks for pointing out obliquely that the proper designation is element (and not tag).

Collapse
 
codeguage profile image
Codeguage

That's a good judgement.

Collapse
 
reenatoteixeira profile image
Renato Teixeira

The <details> and <datalist> definitely were surprising to me, didn't knew that! Thanks for sharing! 🙂

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE

Glad you learned something new :)

Collapse
 
thomasbnt profile image
Thomas Bnt ☕

Cool post ✨

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE

Thanks Thomas! Appriciate your comment.

Collapse
 
matias-tanguito profile image
Matias Facio

Thanks for this Article, Julia. For the first idea, I would like to add that if you add a same 'name' attribute to each details tags, you can change the behaviour to have only one summary open at the same time ( same as with radio buttons ).

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE

Thanks for mentioning this! A behavior, many devs want to achieve with open/close widgets.

Collapse
 
corinamurg profile image
Corina: Web for Everyone

Oh, super cool! So many tags I did not know about. Saving this for future reference. Many thanks!

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE

Thanks Corina. Yeah, HTML has so much to give out of the box already. We have to start using it on a regular basis.

Collapse
 
moopet profile image
Ben Sinclair

A linting rule that flags a warning every time a div or span is used might be a good start!

Collapse
 
ejcenteno profile image
ejcenteno

Awesome article! Can't wait for the next part! Keep up the great work!

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE

Thanks a lot.

Collapse
 
bcblearning profile image
Elayeche

Good post thank you.

Collapse
 
ra1nbow1 profile image
Matvey Romanov

is the most fantastic tip. Thanks for letting us know!

Collapse
 
sakar_dhana profile image
Sakar

It is nice to know about these HTML tags. The tag is really great.

Collapse
 
phonghaw2 profile image
Jr. Saplings

Great post :) ૮ ˶ᵔ ᵕ ᵔ˶ ა

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE

Thank you ٩(๑❛ᴗ❛๑)۶

Collapse
 
abdulmuminyqn profile image
Abdulmumin yaqeen

Super cool new features keep coming, so we can ship less JavaScript!

Great article!

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE

Thank you!

Collapse
 
mikec711g profile image
Michael Casile

Cool stuff. I especially liked the summary/detail. Looks good w/no CSS, better with the CSS you provided.

Collapse
 
nadya58s profile image
Nadia Sylvester

Thank you Julia 👏

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE

:)

Collapse
 
aryan_shourie profile image
Aryan Dev Shourie

Great post!
I'll share this, found it very useful.

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE

Thanks for your support Aryan.

Collapse
 
cbid2 profile image
Christine Belzie

Great post @yuridevat! :) I never knew about text modification. That’s an HTML element I can see myself using in the future! :)

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE

Haha me neither actually. Found out about them while researching for this article.

Collapse
 
luckyshuii profile image
Lucas Boillot

Great article! I'll definitely recommend it around me! Thanks for taking the time to write and post it :)

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE

Thank you Lucas.

Collapse
 
ittaframe profile image
ittafame • Edited

nice

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE

Thanks.

Collapse
 
vipinms77 profile image
Vipin M S

Informative

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE

Thanks for your comment Vipin.

Collapse
 
kusumahendra_38 profile image
Kusuma Hendra

we need part 2!!

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE

On it 😎

Collapse
 
ced404 profile image
Ced💣

There's also the contenteditable attribute that allows the user to edit content in any tag: developer.mozilla.org/fr/docs/Web/...

Collapse
 
araaranomi profile image
Ara Ara no Mi

I thought the 1, 2 and 4 were common sense. I got taught HTML5 back in 2014 when I was studying a web dev degree and these tags already existed back then.

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE

That's the thing! They exist for so long and still so many devs don't know about them!! Good for you, that you are using them and get the most out of HTML already for years, Ara!

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
araaranomi profile image
Ara Ara no Mi

Dude stfu, all your comments are low quality, go be a hater somewhere else.