Introduction

The structure of a web page is fundamental in creating a great user experience. While working as a developer I’m sure you’ve come to understand how important well-structured code is. A poorly architected page is doomed from the start. It’s all too easy to get lost in countless nests of divs, spans, and if you’re really unlucky, tables.

Over the years the HTML spec has improved massively. Gone are the days when our options are limited to a generic one-size-fits-all element with no real meaning.

Thankfully now, we have Semantic HTML. This is a huge step forward not only for the developer but the user as well.

Lets explore why.

Who needs Accessibility?

If I were to ask you to guess what percentage of the population had a disability, what would your answer be?

In a former role, I was responsible for teaching workshops centered around user experience in mobile apps.

in one of my early classes, things got off the rails as when I encountered several people in the class were unable to see the web page. They were older and had become accustomed to using the screen magnifier or the zoom feature. However this time the page they were viewing wouldn’t zoom properly.

Another had a different method, this guy was clever, had a hearing aid that his phone connected to wirelessly. When he needed to, he used the screen reader to navigate the page.

In almost every workshop, someone was attending because they were unable to use a web page or application properly due to lack of accessibility features. They were all understandably frustrated and were seeking a solution.

To be honest, this surprised me at the time. I didn’t think anyone used those features. After some googling I came to learn that According to the World Health Organization: 15% of the global population lives with a disability. That’s more than 1 billion people. According to the United States Census Bureau : 12.7% of Americans lives with a disability. Roughly 41.1 million people.

Even with a large margin of error applied to those numbers, there is no denying that the demographic for accessibility features has to be quite large.

Personally, I want everything I work on to be as accessible and enjoyable as possible for every potential user. We take measures in our communities to make things accessible for everyone, and are always working to improve. The same should apply for the web.

Probably Your Users.

The figures above represent a staggering number of potential users that may experience similar difficulties when using the web.

When things don’t work properly, especially things that should be simple, or are intended to make life easier, it can be frustrating.

Imagine what a user must feel when they’re trying to complete a task or get some information and the website is working against them. Despite the popular notion that technology and convenience go hand-in-hand, that isn't always the case.

As we now know, for millions of people, not taking accessibility into account could make their user experience much worse, maybe even impossible.

Its unlikely a user ever returns to your website after it frustrates them or doesn’t take their preferences and needs into consideration.

Make Your Work Accessible w/ Semantic HTML

So how do we use what we know about the challenges surrounding accessibility, to begin structuring our web pages in a more accessible way?

By learning about Semantic HTML, and using Semantic HTML elements as much as possible.

What is Semantic HTML?

What does a div mean in HTML markup? Well, nothing really. Although we can use them for almost anything in our markup, a div doesn't inherently represent anything. We use them to group content together and for styling purposes. Since a div element has no context or explicit purpose, browsers don't quite know how to make logical sense of it. Not only that, but by not taking advantage of the proper elements, you’re also potentially missing out on key accessibility features that many elements provide.

Accessibility and HTML is a deep topic, there is a lot to be explored and learned about making pages more accessible and I encourage you keep taking steps towards writing more accessible code. For the remainder of this article though, I’m going to focus on replacing div elements with more useful semantic elements. These elements, known as “content sectioning” elements, allow you to organize your document into logical pieces.

Content Sectioning Elements

Rather than use divs to create our layouts, we can use these semantic elements instead. Here are the ones you can use right away to start replacing div elements in your pages and making them more accessible. Semantic elements are lighter than div based layouts, so your page will be slightly faster as well.

• <section>- We use section elements to represent a standalone section of a document, this is probably the closest semantic equivalent div.

  Sections should almost always have a heading to define the content within.

• <header> - is used as an element that contains the introductory content of a document. Often logos, search forms, and navbars can are placed within these elements. *This is not the same as the “ element.

• <article>- represents a self-contained block of content, which is intended to be independently distributed, published or reused (in syndication). Things like blog entries, forum posts, product cards, and user comments could appropriately use this element. “If you remove the rest of the site, can this content stand on its own?”

• <aside>- This element is for a portion of a document whose content is only related to the main content. These are often used for sidebars or call-out boxes.

• <nav>- Used to hold site navigation elements such as menus, tables of contents, index, or navbars.

• <main>- Used to represent the primary content of the documents body. The main content area could be considered the central functionality of an application, and is the primary topic of focus for any page.

• <footer>- Usually used for additional links, contact information and legal notices, the footer is often the last part of a document.

• <h1>,<h2>,<h3>,<h4>,<h5>,<h6>- The heading elements are important for establishing a hierarchy. Use these to build a “table of contents” into your document by organizing your content with the proper heading.

In Conclusion

Being a bit more mindful and using semantic elements is a start, and its easy to fall back on old habits. We know that we can use CSS or JavaScript to make almost any HTML element behave the way you want. You could easily make a button out of a div, span anchor tag, or li for example.

But when you have a hammer, every problem starts to look like a nail.

What we need to keep in mind is that as developers we have not just hammers, but an entire hardware store of tools at our disposal. Anyone can apply brute force with a hammer, so to speak. However, those particularly skilled in their craft always strive to use the right tool for the task at hand, and their work, and their users, are better off because of it.

---

If you're interested in learning everything there is to know about accessibility and semantic HTML, I cant recommend MDN enough. They practically wrote the book on it.

I'm still pretty new to the whole article / blog post thing. If you have any feedback or comments, please don't be shy and let me know what you think, what I did wrong, and how I can do better. Thanks for reading.