DEV Community

loading...

Discussion on: Stop using so many divs! An intro to semantic HTML

Collapse
ofek3103 profile image
ofek3103

Is using these tags also has an advantage on the CSS side? I mean, keeping CSS as less specific as possible (Class has a higher specificity than element).

I'd also like to know if there's any replacement to

in HTML 5? (In case the "container" is a white rectangle inside a black screen)
Collapse
kenbellows profile image
Ken Bellows Author

I definitely prefer selectors like main article header h1 over #main-content .post-body .post-header h1, just for readability's sake if nothing else, but I'm not super worried about specificity issues personally. It probably is preferable to keep your specificity low when possible.

I think the HTML element you typed got filtered out; can you ask your second question again with backticks around the element?

Collapse
ofek3103 profile image
ofek3103

<div class=container> The element is a white rectangle centered in the middle of the page.

Thread Thread
kenbellows profile image
Ken Bellows Author

So, the semantic elements introduced in HTML5 are all about conveying the structure of the data. Purely stylistic elements, like containers that only exist to help make the CSS work the way you want, don't have any semantics to represent, so a plain
old <div> really is the correct choice there, no replacement necessary.