I'm a software engineer working as a full-stack developer using JavaScript, Node.js, and React. I write about my experiences in tech, tutorials, and share helpful hints.
Another advantage of semantic HTML is that CSS selectors make a lot more sense. For instance, article section h2 is both legible and abstract-enough to specifically style every heading of every section within an article—leaving all other headings alone, and without requiring a single ID or class!
I'm a software engineer working as a full-stack developer using JavaScript, Node.js, and React. I write about my experiences in tech, tutorials, and share helpful hints.
How often do you actually target elements in CSS using tag name though? With a content heavy website or a blog I can see that, but as soon as your application gets more complex you're going to want to use class names anyway to keep your CSS flat and stay out of specificity hell.
I'm a software engineer working as a full-stack developer using JavaScript, Node.js, and React. I write about my experiences in tech, tutorials, and share helpful hints.
In addition to semantic HTML being more accessible, I also think it is easier to read and update.
vs.
As classes and IDs are added, the div example becomes a mess very quickly.
Another advantage of semantic HTML is that CSS selectors make a lot more sense. For instance,
article section h2
is both legible and abstract-enough to specifically style every heading of every section within an article—leaving all other headings alone, and without requiring a single ID or class!That is a great point as well. Having those semantic names instead of having a vague class name definitely helps the CSS readability as well.
How often do you actually target elements in CSS using tag name though? With a content heavy website or a blog I can see that, but as soon as your application gets more complex you're going to want to use class names anyway to keep your CSS flat and stay out of specificity hell.
CSS classes should be descriptive, so that even when a div is appropriately used, it's self documenting.
Agreed!