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

The structure for this very post looks like this:

<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 (credit goes to the MDN Web Docs for the definitions below):

article
A self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable.
header
Introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.
h1
The highest section level heading out of six.
p
A paragraph.
time
A specific period in time. It may include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.
q
A short inline quotation.
blockquote
An extended quotation.
b
Content that should draw the reader's attention without granting it special importance.
strong
Content with strong importance, seriousness, or urgency.

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:


If you have questions, feedback, or any other suggestions, please do email me. I'd love to hear from you!