Kieran Barker

The importance of semantics in HTML

The Cambridge English Dictionary defines semantics as the study of meanings in a language. It uses the word in the following example:

Syntax describes the rules by which words can be combined into sentences, while semantics describes what they mean.

You can write HTML with completely valid syntax, but that doesn't mean it's semantic. It can be valid yet structurally unsound.

Semantic HTML

At the time of writing, the structure for this very post is as follows:

<article>
  <header>
    <h1>The importance of semantics in HTML</h1>
    <p>
      <time datetime="2020-07-21">21 July 2020</time>
    </p>
  </header>
  <p>The Cambridge English Dictionary defines <a href="https://dictionary.cambridge.org/dictionary/english/semantics">semantics</a> as <q>the study of meanings in a language</q>.</p>
  <p>It uses the word in the following example:</p>
  <blockquote>
    <p>Syntax describes the rules by which words can be combined into sentences, while <b>semantics</b> describes what they mean.</p>
  </blockquote>
  <p>
    <strong>You can write HTML with completely valid syntax, but that doesn’t mean it’s semantic. It can be valid yet structurally unsound.</strong>
  </p>
  <!-- and the rest of the content... -->
</article>

It contains a number of semantic elements:

All of these elements describe what type of content they contain.

Non-semantic HTML

I could just as easily have written the HTML as follows:

<div>
  <div>The importance of semantics in HTML</div>
  <div>21 July 2020</div>
  <div>The Cambridge English Dictionary defines <a href="https://dictionary.cambridge.org/dictionary/english/semantics">semantics</a> as "the study of meanings in a language".</div>
  <div>It uses the word in the following example:</div>
  <div>Syntax describes the rules by which words can be combined into sentences, while semantics describes what they mean.</div>
  <div>You can write HTML with completely valid syntax, but that doesn’t mean it’s semantic. It can be valid yet structurally unsound.</div>
  <!-- and the rest of the content... -->
</div>

But this would have been a complete shirking of my professional responsibility.

The endless div spaghetti does nothing to describe the content it contains. This is bad for developers, search engines, and most importantly, users of assistive technology.

The div element isn't inherently bad. The MDN Web Docs explain that it is a generic container:

As a "pure" container, the <div> element does not inherently represent anything. Instead, it's used to group content so it can be easily styled using the class or id attributes, marking a section of a document as being written in a different language (using the lang attribute), and so on.

It should only be used when no other semantic element is appropriate.

Wrapping up

It's your professional responsibility to make your websites accessible to everyone. More importantly, it's your moral obligation.

If you don't care about people, well... Maybe fuck off into a different profession that doesn't require you to make things for people?

Besides, using more semantic elements makes your life easier as a developer. They have better default styling baked in out of the box, along with all the necessary keyboard functionality. They're accessible by default.

The next time you're writing HTML, think about what elements best describe the content you're marking up. Think about the people using your website and the experience they deserve.

For help with this stuff, I recommend the following resources: