Better HTML with semantic elements
How to make your code more readable, your site more accessible and your SEO score better with semantic HTML
Every web developer can write HTML. But what does it mean to write good HTML. It's more than knowing how to use a
span. In this blog I'm going to discus the use of semantic HTML to improve the readability for you as a developer, improve the accessibility for people with assisted technologies and how you will better rank you in Google. I'm still learning and especially accessibility is a challenge but I hope that I can share what I learned so far.
Every time a developer I admire shares a post one of the first comments is: 'What font are your using' or 'What theme is that?'. Developer care about their code editor like their homes. We want to be able to have a nice and readable font if we're working in our documents all day. We can do the same with HTML. You want to easily understand what HTML you or your colleague has written.
<div> <div> <!-- Header content --> </div> <div> <div> <!-- Blog 1 --> </div> <div> <!-- Blog 2 --> </div> <div> <!-- Blog 3 --> </div> </div> <div> <!-- Footer content --> </div> </div>
<div> <header> <!-- Header content --> </header> <main> <article> <!-- Blog 1 --> </article> <article> <!-- Blog 2 --> </article> <article> <!-- Blog 3 --> </article> </main> <footer> <!-- Footer content --> </footer> </div>
The first example is only readable because the comments tell you what the meaning of the elements are. Remove the comments and the HTML conveys no meaning. In the second example however you can even understand what's going on when you remove the comments.
Another un-semantic HTML example:
<div> <span> <!-- Header --> </span> <span> <!-- Subheader --> </span> <span> <!-- Text --> </span> </div>
<div> <h1> <!-- Header --> </h1> <h2> <!-- Subheader --> </h2> <p> <!-- Text --> </p> </div>
In this example we can see hierarchy. We can see that inside the
h1 we write our most important information followed by our
h2. In the un-semantic example there's no hierarchy.
A Great resource to learn more about semantic elements is Overview of HTML Semantics.
Accessibility is hard and I still have a lot to learn. We all should at least provide proper html elements so screen readers can figure out what parts of your site are important. A cherry on top would be to provide a proper title so screen readers can describe the intent of the semantic element.
<nav title="main navigation"> <a href=""> <!-- nav text --> </a> <a href=""> <!-- nav text --> </a> <a href=""> <!-- nav text --> </a> </nav>
You also want to ensure that selectable elements are focusable and have proper focus states. A great way to test your site is by install Axe which is an accessibility testing engine. If you want to learn more MDN provides a great read.
Finally there's SEO to consider. You need to proper link for Google to understand. Google follows
<a href=""></a> to index your site. If for some reason you're linking with click events you'll possibly skip indexing that page.
Just like screen readers, Google tries to understand your site. Using proper headers lets Google better understand what information is important. A great tool to understand your heading structure and other seo information is Detailed SEO Extension.
Good HTML is good for all involved. You are happier because you can easily understand HTML you wrote years ago. Secondly screen readers can understand the structure of your content. Finally Google knows what are the important bits of your content and possible give you a higher ranking. I couldn't cover everything but it helped you. Let me know if I missed anything and feel free to join my newsletter. Happy reading.