5 reasons to write Semantic HTML

#html #webdev #beginners

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

Another repost of my original article on the importance of writing semantic HTML

Understandable code
Screen readers
Search engines (SEO)
Usability (UX)
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 meaning to your markup, you make it more understandable. 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>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>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 part of the structure does.

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 affects 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 using semantics 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.

5. Default styling

The good thing about semantic HTML, that elements come 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:

Top comments (4)

Nikita Hlopov • Mar 5 '20

If articles are the main attention section on the page, I think you can wrap them inside . Regarding the comments, honestly, I'm not really sure, but I don't think it's a big issue if you wrap them inside the along with the article itself. :)