What is Semantics?

Semantics in front-end development concerns whether to use a div or a header, or if some text should be a paragraph or a heading, or whether a list is to be ordered or unordered, and so on. It’s about elements and not attributes.

It’s about machines (screen readers, browsers, assistive technologies, bots) gleaning meaning from the elements we use to mark up our documents.

Take the two following snippets:


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.

When most people talk about semantics, what they’re really referring to is sensibleness. Classes and IDs have no bearing on semantics whatsoever. A class of red is neither semantic nor not semantic, because classes are not found on the semantic spectrum. A class of red, however, is probably quite ill-advised.

When choosing names for your classes, forget about the idea of semantics and look more at their longevity. How long will this name continue to make sense? How long will it stay relevant? How much sense will it make in six months?

Taking the .red example further, it is clear to see why this is an unwise name for a class. Imagine you’re working on an e-commerce site and you need to style a price differently because it is a special offer, like so:

If that style just happens to involve the color red then a class and selector of red might be used, perhaps inadvisably. If, for whatever reason, you want to change all special offer prices to be blue then you’d end up with something like this:

It is confusing to see a class of red which actually makes something blue. This is not a sensible class, one that has little longevity and that won’t always make sense.

A far better option would be:

It doesn’t matter if the special offer is red, green, blue or purple — that selector will always make sense to a human. It is a sensible, though not semantic, class.

Sensibleness is about ease of maintenance, longevity and how much sense something makes to a human being, because humans are the only things to take any amount of meaning from class names.

Reference: http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

Leave a Reply

Your email address will not be published. Required fields are marked *