Jens Meiert

On Semantics in HTML

Jens O. Meiert, October 26, 2011 (↻ August 14, 2014).

This entry has been written by Jens the .

As web developers we like to talk about “semantic markup,” a somehow inaccurate short form for “markup that is meaningful and used how it’s supposed to be used.” We also like endless discussions around what markup is appropriate when, and to ramble on markup that is “meaningless.” In many cases markup decisions and discussions don’t stop at HTML elements but also include ID and class names.

Now when we’re talking about “semantic markup,” where is all that meaning coming from?

In essence, semantics in HTML is all about who and how many agree on the meaning of elements and ID and class names.

More thoughts.

As this list goes from “most meaning” to “least meaning,” you can see why blockquote can rather be accepted to mean a quote than “vcard” for an hCard container than “login” for a sign-in field than “aux” for a helper class than “red” for I don’t know. It also shows why you don’t need to have a class “list-item” on an li element as it is already defined as a list item on a higher, the spec level.

As I love disclaimers, this may not be all there is to say about the topic but it was good enough for a write-down-everything-that-comes-to-mind-on-semantics-now post.

Update (August 5, 2014)

In the meantime, in 2012, I wrote an article about semantics also for Google. I think it’s of interest, too.

Comments (Closed)

  1. On October 26, 2011, 22:06 CEST, John Foliot said:

    Hey Jens,

    You wrote:

    A class like “error” or an ID “author” has meaning because it defines a purpose that can be understood and also agreed on.

    I have to disagree here, as the first minute this runs up against internationalization issues it breaks. For example <div class=”poszukiwanie”> means what, exactly? (Hint: that’s Polish)

    This is the primary reason why HTML5 has introduced a number of new landmark elements, and why previously ARIA introduced both landmark and structural roles - to disambiguate author IDs and classes.

    Using ID and class names that have a meaning to the author is helpful, but only to the author (or perhaps authoring team), no other real value is derived by the browsers or Adaptive Technology. So it’s not so much that I disagree with your sentiment, but rather that it is not as important as you seemingly imply.

    Just my $0.02 from the accessibility trenches.

  2. On October 29, 2011, 22:33 CEST, Simon Schick said:

    Verry good article.
    I just read though it shortly but I agree in all points.

    @John: As a programmer I like to define english class-names and ids even if my national-language is not english.

  3. On October 30, 2011, 4:34 CET, karl said:

    @Simon and as a websmith (and native French) but working mainly in English, I like to define my class names in French.

    One size doesn’t fit all. I agree with John on that.

  4. On October 30, 2011, 12:46 CET, Andy Mabbett said:

    Good article. When you wrote:

    Their markup constructs don’t have any meaning either, per se, but with a lot of people agreeing on their purpose they do become meaningful

    it struck me that this is little different to spoken language, although its evolution is less controlled.

    However, when John says:

    no other real value is derived by the browsers or Adaptive Technology

    he overlooks that that’s exactly what browser (via add-ons) do with microformats; and ATs could do.

    If people start to use meaningful class names, then common patterns will emerge, just as with spoken language.

Read More

Have a look at the most popular posts, eventually including:

Found a mistake? Reward! Email me, jens@meiert.com.

You are here: meiert.comArchive for 2011 → On Semantics in HTML

Last update: August 14, 2014.