DEV Community

loading...
Visual Composer

5 reasons to write Semantic HTML

nikitahl profile image Nikita Hlopov ・5 min read

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

  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 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:

Discussion

pic
Editor guide
Collapse
yujiri8 profile image
Ryan Westlund

I learned from the linked pages about <main>. Now I have to wonder if I should be using that somehow... HTML5 is always more complicated I thought. Thanks though!

Collapse
nikitahl profile image
Nikita Hlopov Author

What were you using before,

? What makes you confused about ?
Collapse
yujiri8 profile image
Ryan Westlund

I have my articles wrapped in <article>, but the comments outside of it. Maybe I should put <main> around all of them! Although I read something else later the day I posted this suggesting that it's a good idea to put comments inside nested <article>s. Urgh...

Thread Thread
nikitahl profile image
Nikita Hlopov Author

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. :)

Thread Thread
yujiri8 profile image
Ryan Westlund

The reason I started putting comments outside the <article> was an SEO concern. I saw in Google search console that some of my URLs with a query string that caused it to load a subtree of the comments were not having their canonicals URLs respected. I figured it was because not loading the full comment tree made it count as such different content (this happened on pages with a lot of comments) that Google refused to consider them the same page. I thought putting the comments outside of an <article> would help (and it looks like it did).

BTW your comment displays as "I think you can wrap them inside .". I don't know if that was supposed to be "inside <main>"... I think you have to use &lt; to show HTML in dev.to.

Thread Thread
nikitahl profile image
Nikita Hlopov Author

Oh, yea it should be <main> :)
Thanks for noticing.

Thread Thread
zaimazhar97 profile image
zaimazhar97

That's a good insight though, straight off to Google Console now. Thanks. 👍🏽