By Harry Roberts CHAPTER 1

SeManTiCS

Our first misconception involves semantics. Semantics — at least where
front-end development is concerned — is a greatly misunderstood and
overdefended area. Semantics in front-end developments concerns wheth-
er to use a div or a header, or if some text should be a paragraph or a head-
ing, or whether a list is to be ordered or unordered, and so on.
Semantics in front-end development is about elements and not attri-
butes. It’s about machines (screen readers, browsers, assistive technologies,
bots) gleaning meaning from the elements we use to mark up our docu-
ments. Semantics is not about how we name our classes or IDs; the only
things to gather meaning from classes and IDs are humans. Anything else
that reads or accesses a class or an ID merely matches it; it does not derive
any meaning from them at all. This, straight from the HTML(5) spec:

Particular meanings should not be derived from the value of the ID attribute.

Take the two following snippets:

and:

My page title

The first is an improper semantic implementation: the author should
be using an h1 element to mark up their page’s title, not a div. Even though
the class used is highly descriptive, this is not where the semantics lie. A
machine will gain nothing at all from that snippet of markup.
The second snippet is far more semantic: a machine reading this will
know that it’s a top-level heading. The fact that the author used a class of
red is entirely irrelevant to any machine. If there is a corresponding .red{}
rule set in the CSS then the browser will style this heading no matter what.