DEV Community

Cover image for Ode to Semantic HTML

Ode to Semantic HTML

Eevis on November 28, 2020

Have you ever created a button out of a div? Added that onClick-event there, and styled the div to look like a button? Yup, me too. And I'm not pro...
Collapse
 
nickfazzpdx profile image
Nicholas Fazzolari • Edited

Great post. Drives home the concept that HTML is not <div> with CSSOM and JS abstractions on top. It's a feature rich, age tested and standardized markup language for displaying web pages. It's easy to forget this and posts like this inspire me to be more semantic in my HTML.

Collapse
 
eevajonnapanula profile image
Eevis

Thanks and great to hear that! 😊

Collapse
 
konrud profile image
Konstantin Rouda

Nice post.
Regarding the sentence about the native dialog element ("For example, there is no semantic element for a modal dialog.").
There is an HTML Element for the dialog which is <dialog> so actually there is a native semantic element for a dialog.

Collapse
 
eevajonnapanula profile image
Eevis

Ah, good catch, thanks! I edited it to tabs/tabbed interface as it should have been, I seem to have forgotten to change the example. So thanks again for catching that!

Collapse
 
frsr profile image
Fraser Embrey

I remember when I was learning and saw all these people talking about how they just endlessly nested divs. It never made sense to me not to use the semantic elements html provides.
I am glad people are making use of them and its becoming normal from an accessibility standpoint too

Collapse
 
eevajonnapanula profile image
Eevis

I'm glad about that too! And about that you've gotten the proper start with semantic elements when learning 🎉

Collapse
 
lionelrowe profile image
lionel-rowe

Awesome article! 👏👏👏 Great to see someone point out the advantages of native elements over re-implementing everything from scratch. Usually a11y articles omit to mention this.

Collapse
 
eevajonnapanula profile image
Eevis

Thanks! 😊 Yeah, this is so true. I've been studying for the Web Accessibility Specialist-certification, and as part of that, took a deep dive into the native HTML elements. I was so surprised, how much functionality they offer out of the box and wish somebody told me that before!

Collapse
 
ben profile image
Ben Halpern

Great post

Collapse
 
eevajonnapanula profile image
Eevis

Thanks!

Collapse
 
eldermichaellu profile image
Michael Louisarus Uwaila

Superb