5 reasons of why Semantic HTML is important

Published: · Updated: · Reading time: 5 min

I’ll go through a list of 5 reasons of why semantic HTML is important and why web developers should pay more attention to it.

  1. Understandable code
  2. Screen readers
  3. Search engines (SEO)
  4. Usability (UX)
  5. Default styling

What does MDN say about Semantic HTML:

In programming, Semantics refers to the meaning of a piece of code — for example … “what purpose or role does that HTML element have” (rather than “what does it look like?”.)

So the number one reason is:

1. Understandable code

By giving a meaning to your HTML code, you make it more understandable, for yourself and other developers. From a human perspective semantic code is more readable, understandable and easier to maintain. Imagine looking at the code like this:

<div id=”brown-fox”>
  <div>A story of quick brown fox</div>
  <div>The quick brown fox jumps over the lazy dog.</div>
  <div>Fox properties:</div>
  <div>- quick</div>
  <div>- brown</div>
  <div>- jumpy</div>
<div>

The same structure but with meaningful tags:

<section id=”brown-fox”>
  <h2>A story of quick brown fox</h2>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <h3>Fox properties:</h3>
  <ul>
    <li>quick</li>
    <li>brown</li>
    <li>jumpy</li>
  </ul>
<section>

You can immediately spot the difference. Straight off the bat, you can tell what each line of the code represents and what is its meaning.

2. Screen readers

Not only humans (programmers) have the need to understand the meaning of the page structure, so do the machines, one of them are screen readers.

A screen reader is a form of assistive technology which is essential to people who are blind, as well as useful to people who are visually impaired, illiterate, or have a learning disability.
—Wikipedia

A screen reader analyzes the contents of the web page and outputs the results via speech. This means whatever a screen reader sees, it will read.

So it’s quite important to structurize your web page with a meaning. However modern screen readers are quite “smart” and handle web pages very well.

Both MAC and Windows have built in screen readers. For MAC it is VoiceOver, for Windows it is Narrator.

3. Search engines (SEO)

Moving on from one machine type to another. The structure of your web page can affect SEO (Search Engine Optimization) results.

SEO stands for ‘Search Engine Optimization’. It’s the practice of optimizing your web pages to make them reach a high position in the search results of Google or other search engines. —YOAST

However semantic HTML is not the primary factor that affect the SEO of the page, but it helps page crawlers understand the structure of this page. A page with proper semantic HTML will have a chance to rank higher in the search results.

4. Usability (UX)

By implementing semantic HTML not only you are aiding the machines, but you can also help people and make their lives better. The use of proper semantic HTML can boost up your website usability and accessibility. I think you all will agree with me, that you like resources that are intuitive and easy to use.

Sometimes small adjustments or fine tuning can make a huge difference for users. For instance adding a label element next to input, or adding a proper attribute to the same input element.

Some of the widgets you can create with pure semantic HTML:

5. Default styling

The good thing about semantic HTML is that semantic elements comes with default styling. Even without additional CSS the page that is built with proper semantic HTML will look good, be accessible and is going to provide the meaning and outline the structure.

Even though the default styling can vary from browser to browser, the main look of the page will remain.

Default styling comes to the rescue when something goes wrong and your CSS fails.

Below I’ll share a list of resources I have found useful when I was learning about semantic HTML and Semantic Web in particular.

Blogs:

Docs:

Videos:

Like this article? Share it on:
Tags: