The term “semantics” comes from the Greek word “sema,” meaning “sign.”
Words are signs (semantic units) that represent something.
In the following code, what the page is all about is described clearly by how the tags are structured. This way, the code is easier to be read by both humans and machines alike.
This code, using plain English tag names, is easy enough for someone who doesn’t know HTML to understand what it does. It is code that conveys meaning.
(click on the image to open in a new tab)
Even if we don’t understand the details, in the case of an unknown language, the architecture is clear because semantic elements provide structure and meaning.
What we see is the main part of a page/section divided by three sections.
It is easy to understand what is going on.
Compare with the following:
Here we have no clue about what the code does.
The code is nicely styled with the use of CSS ids and classes, but from the perspective of a user agent, or a developer working on the code, this is a mess.
It is like Matryoshka dolls. One div inside the other.
Semantic structure and Style
Building a semantic structure in HTML means using tags to structure our content based on the meaning of the tag and not its appearance.
We should not use an element based on the way the user agent default style-sheet makes that element look.
Here both h1, and h2, headings are styled the same.
The fact that the lack of semantic structure does not directly affect how the webpage looks should not be taken lightly.
We could use h2 for both headings and the webpage would look the same.
But semantically it would be a mess.
Semantics does matter for web developers, for people using a screen reader and also for web crawlers, affecting accessibility, SEO, and cost of website maintenance
Although my blog doesn’t support comments, feel free to reply via email or X.