loading...
Cover image for Why semantic HTML matters and how to become better at it?

Why semantic HTML matters and how to become better at it?

macargnelutti profile image Matteo Cargnelutti Updated on ・4 min read

HTML is often considered as a language you don't need to properly learn to use, and there is some truth to that: it is, by design, a very simple and resilient to errors markup language that lets you build documents that can be read anywhere just by wrapping text with a few tags.

But there is something more to HTML that simply putting <div> and <span> tags together cannot harvest: its extraordinary ability to inform on the nature of its content and convey meaning.


Why semantic HTML matters?

Writing HTML that describes precisely its content is helpful in many ways that are not directly obvious.

This is the case with accessibility and SEO:
Visually speaking, with a bit of CSS, I can make <div class="title">My title</div> and <h1>My Title</h1> look and behave exactly the same, but the implications of using one or the other are very different. With the former, there is no easy way for an algorithm to understand it is a title, with the latter, it is clearly identified as such. Using proper tags allow screen readers, search engine crawlers, text-based browsers, and distraction-free reading modes to understand what an element is, assess its role compared to surrounding elements, and use it accordingly.

The same idea applies to source order: placing content in your source code in a semantically-logical order instead of what make sense only once styled will make your content directly intelligible even without CSS.

But using more semantically correct HTML also helps with code clarity and maintainability: most web projects will use different conventions for naming CSS classes, and having to assimilate a full lexicon of custom classes when on-boarding on a project is often somewhat cumbersome. Using a combination of precise HTML tags and simpler CSS selectors can help make for a simpler codebase by reducing the amount of unnecessary classes.


How to become better at it

There is a few steps one can take to try and improve their HTML: while caring about it is the most important one, here is a few other suggestions, in no particular order.

Separate the process of writing HTML and the process of styling it.

When working on a website template, it is tempting to start styling HTML elements as you go. The problem with this approach, is that it is hard to focus on both processes fully at the same time, and more often than not, styling takes over.

Integrating a web page by first writing raw HTML before styling anything can help give you the headspace needed to ask yourself the following questions:

  • Does the source order of my page make sense? Can I understand this page and find the information I am looking for?
  • Am I using the right tag for this piece of content? Will a screen reader understand what it is? What about Google?

Look up HTML tags on MDN.

Mozilla Developer Network Docs is an absolute treasure trove for everything web technologies.

MDN Docs page example

Having a look at their HTML Elements Reference will help you make sure that the tags you use are adequate, supported, but also help you discover new ones.

Use the W3C HTML validator.

Having a badge on your website stating that your website's HTML was "W3C compliant" was the absolute web-nerd flex of the 2000s. While this trend somewhat vanished, running your webpage through the W3C Markup Validation Service will provide helpful insights, the first one of them being whether your HTML code is valid or not.

While a broken HTML page will most likely render somewhat correctly in any modern browser, chances are other systems and services might not be as resilient and have a hard time parsing it.

The W3C HTML validator in action

Use your browser's accessibility inspector.

Firefox's Accessibility inspector will help you understand how accessibility tools process your webpage and how they identify and connect elements together.
Keeping an eye on it as you build your HTML will help you in your decision process, and avoid having to correct course too much later.

Firefox's accessibility inspector in action


Conclusion

HTML pages written in the very early days of the web are still perfectly readable in a modern browser: styling conventions change, new tags appear, but a carefully crafted HTML document will keep (most of) its meaning and intrinsic quality through the years.

Building better documents requires time and practice, trial and error (I have been writing HTML for almost 20 years now, and I keep making mistakes), but the rewards are worth the investment: The web is for everybody to use, and making sure that a document is properly "understood" by as many browsers, services and assistive tools as possible is exactly what the web is about.

Posted on by:

macargnelutti profile

Matteo Cargnelutti

@macargnelutti

CTO & Software Developer at Grafton Studio, Boston MA. Interested in everything Web standards, Python, Javascript. He/Him, 🇺🇸🇫🇷. Opinions are my own.

Discussion

pic
Editor guide
 

I find that when I am writing a page template -that I want complete control of how everything looks, wraps, spacing, etc. When I use lots of semantic elements I end up with elements that have padding or margins that I don't want, among other things. How do you deal with that? Besides learning what to expect out of every element and accounting for it

 

That is a very good question!

The styles that are applied out of the box to HTML are called "browser styles".

One way of dealing with the issue you describe is to use what we call a CSS reset: a set or CSS statements that will unify how base elements will look and behave across browsers.

There is pros and cons in using CSS resets, and it is important to consider the full implications of using one, but doing something like the following at the very beginning of your stylesheet would remove all default padding and margin on all HTML elements, and use box-sizing as a default for everything:

* {
   padding: 0px;
   margin: 0px;
   box-sizing: border-box;
}

You might not want something that drastic, and only try to target browser styles that are "in the way" of what you are trying to achieve.

Miriam Suzanne made a fantastic video about browser styles for the Mozilla Developer Channel that I definitely recommend.

You can also have a look at Eric Meyer's CSS reset from 2011 for inspiration.

 

Encapsulate all HTML using the HTML GRID. It gives 100% layout control via columns, rows and gap.

If you need more control use another one.

 

A CSS grid? To bypass issues with margins from semantic elements?

Maybe I'm off. What issues with margins are you referring?

 

I believe you mean CSS grid, and though it solves a lot of layout issues, it does not effect user agent (aka browser default, or value initial) styles.

 

Great article. I wrote a very similar article almost 13 years ago but I find I have to continually repeat myself. Thanks for adding your voice to the conversation!

chicagoitsystems.com/markup-for-in...

 

Thank you very much !
If anything, it has become even more important than 10+ years ago, with many more devices and tools being "web-able" at very different levels.

 

I'm a big proponent of Progressive Enhancement. Writing semantic HTML is always the first step. Sharing this with everyone in our office!