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
<span> tags together cannot harvest: its extraordinary ability to inform on the nature of its content and convey meaning.
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.
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.
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?
Mozilla Developer Network Docs is an absolute treasure trove for everything web technologies.
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.
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.
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.
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.