Why do semantics matters? - Fernanda Correa

It’s easy to miss the importance of semantics in web development. After all, a div and a section tag all render the same, right? But in the world of accessibility semantics are extremely important. If you’ve ever wondered how a screen reader turns a bunch of HTML into a spoken UI then you’ll definitely enjoy today’s post 🙂

Writing semantic-focused HTML is the developer’s responsibility.

Let’s start with structural tags.

HTML structural Tags

First of all, writing a Semantic HTML is a fundamental start. But, what does correctly structured mean? Well, it means that each element of the content must be able to identify itself within the document, no matter the media through which is going to be presented. For example, if you write a paragraph inside a <div></div> instead of a <p></p> tag, the reading machine will never understand that it must make a pause before and after the paragraph reading. Also, your page will be ignored by search engines, which is one of the prerequisites of okay page rank.

Here is a list of structural tags and their meanings

<!-- NO-semanitcs HTML !-->
<body>
    <div class="header">
      <div class="nav"></div>
    </div>
    <div id="section">
      Section content
    </div>
    <div id="footer"></div>
</body>

Vs.

<!-- semanitcs HTML !-->
<body>
    <header>
      <nav></nav>
    </div>
    <section>
      Section content
    </section>
    <footer></footer>
</body>

Section Heading Elements.

A common navigation technique for users of screen reading is jumping from heading to quickly determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.

So, always follow a sequence, from <h1> to <h6>. You can repeat them, by section, for example, but consider having only one H1 per page.

<!--Following a Hierarchy !-->

<h1>Título da Secção</h1>
<p>Parágrafo</p>

<h2>Sub-título da Secção</h2>
<p>Parágrafo</p>

Semantic Meanings

In the example below we have a comparison between the use of tags with semantic meaning vs. equivalent but meaningless tags:

<strong> = <!-- text read with loaded intonation !-->
<em> = <!--text read with emphasis !-->

They provide the same look as the <b> and <i> tags and have meaning for screen-readers.

Vs.

<b> = <!-- only a strong text !-->
<i> = <!-- only a black text !-->

They provide a visual aspect with no-semamtic meaning!

You must organize your content in a way to make sense when read without a stylesheet

See this example here on W3C School!

Notice how it’s easy to read the content even without a Css Style? This is how you need to organize you entire code.

Without guidance information, users and screen readers themselves may not be able to understand tables, lists, menus, and titles, for example.

For the user, who doesn’t have any kind of special need, it won’t change anything visually. For now, he will continue to see everything on his screen in perfect harmony, however, Web applications developed without semantics will lose space on the Internet. This is because the means of accessing the Web, in order to take automated actions, need to consume what is encoded.