Why Semantic HTML Matters More Than Ever
After reviewing many front-end codebases over the years, one pattern shows up again and again: the overuse of <div> elements. Developers use them for everything: buttons that aren’t real buttons, headings that are just styled text, and interactive elements that don’t work with a keyboard.
This isn’t just messy code. It’s an accessibility issue.
When we replace semantic HTML with generic containers, we remove the meaning and behaviour that browsers provide for free. What’s left is a mess of custom implementations that often fall short, especially for users relying on assistive technologies.
The result is “div soup”: a DOM full of elements that look right visually, but lack structure, clarity, and usability beneath the surface.
Think of it like this: you could cook everything in your kitchen using one big knife, you could try stirring soup with it, flipping pancakes with it, even measuring flour with it.
Technically it might work, but the experience would be terrible and unnecessarily difficult. In many codebases, the <div> becomes that one oversized knife used for every task, while semantic HTML is more like a well stocked kitchen filled with the right utensils for the job. The lesson is simple: use the right tool for the task instead of forcing one tool to do everything.
The real problem with using <div>
When semantic elements are replaced with <div> instead of relying on the built-in behaviours browsers already provide, we end up manually recreating them ourselves, often adding accessibility features later as an afterthought. This usually means writing more JavaScript than necessary and introducing extra complexity into the code. As a result, assistive technologies have to work harder to interpret the page, making the overall experience less efficient and often less accessible.
Headings are sometimes misused for styling, and developers may choose a heading level simply because it’s visually smaller rather than because it fits the correct hierarchy. But ignoring heading semantics makes the structure of a page harder for users of assistive technologies to understand.
Buttons are another common case. HTML gives us the <button> element for a reason: it already includes everything it needs to function properly straight out of the box.
A real <button> automatically provides keyboard support, focus states, a built-in role for assistive technologies, and form submission behaviour, all without requiring extra JavaScript.
That’s not just cleaner code; it’s also more resilient and more inclusive. And in most cases, we don’t need to rebuild functionality, the browser already provides it for free.
Accessibility = Usability
Semantic HTML isn’t just about ticking an accessibility or compliance box, it’s fundamentally about usability.
Assistive technologies like screen readers rely heavily on the structure of a page to help users navigate efficiently. Headings create a clear hierarchy of information, for example:
<header><main><nav><footer>
These landmarks define meaningful regions of the page. Without this structure, users are often forced to move through the DOM element by element, which can be slow and frustrating.
Poor semantics effectively turns a website into a maze, making it much harder to find information. When people struggle to navigate a site, they’re unlikely to stay, so improving accessibility ultimately reduces friction for everyone much like how thoughtful design in the physical world aims to make spaces usable for all. And that’s the real goal here.
"Div soup" vs semantic structure
A common comparison between “div soup” and semantic structure makes the difference clear. In a typical div based approach, everything is wrapped in generic containers:
In a semantic version, the same content uses elements that describe their purpose:
See the Pen Semantic HTML by Evoluted (@evoluted) on CodePen.
The second example immediately provides meaningful structure. It introduces a clear hierarchy, is easier to navigate, and most importantly, is understandable to assistive technologies without extra work. In other words, semantic HTML makes the page clearer not just for machines, but for humans as well.
More efficient crawling & indexing
We've explored how semantic HTML improves accessibility by providing contextual relevance and a clearer page structure. This is really important for search engines too, helping them to navigate your site more smoothly and quickly identify and understand key pages.
This is particularly true for LLMs. Google has become much better at understanding JavaScript in recent years, but this isn't the case for all search platforms. Over-reliance on JavaScript can lead to lost messaging and lost opportunities as a result. Supported by other semantic elements like schema, correctly marked-up HTML headings play a big part in increasing your visibility potential in AI-powered results like Google's AI overviews.
Faster response times
Cleaner code almost always means a faster website. In contrast, clunky code and excessive use of JavaScript leads to much slower page load and response times and a poor user experience. Google measures performance in these areas through its Core Web Vitals reports - which are a core ranking factor - and lists Usability as one of its five primary dimensions when evaluating search results.
Practical improvements
If you want to level up your markup immediately, start by choosing the right element before reaching for a <div>.
A simple way to do this is to pause and ask a few quick questions:
Is this a button?
Is it a link?
Is it a list of items?
Is it part of the site’s navigation?
Is it a section of content with its own heading?
HTML already provides elements designed for these purposes, so use <button> for actions, <a> for navigation between pages, <ul> or <ol> for collections of items, <nav> for navigation blocks, and <main> once per page to represent the primary content.
Starting with the correct semantic element makes your markup clearer, more accessible, and easier to maintain.
Fix your heading hierarchy
Fixing the heading hierarchy is another simple but powerful way to improve your markup. As mentioned earlier, users and especially screen readers often navigate a page through its headings, so the structure needs to make sense.
If heading levels jump around purely because “it looks right” the logical structure of the page becomes confusing. Style should be handled with CSS, while structure should be defined with HTML, and mixing the two often leads to problems.
A common mistake is using multiple <h1> elements on the same page, or jumping from <h1> straight to <h4> just to achieve a particular visual size. Headings aren’t meant to be used as styling shortcuts; they represent the hierarchy of the content.
Many people scan pages by jumping between headings as anchors, and assistive technologies rely on that same structure to help users navigate efficiently. When the hierarchy is inconsistent or messy, the experience becomes harder to follow. Keeping headings logical and sequential makes the page easier for everyone to understand.
Stop overusing ARIA
Most of us have done it at some point, I certainly have. But there comes a point where it simply creates extra work. Instead of relying on the built in behaviour that browsers already provide, we end up trying to recreate it ourselves, often with more complexity and not always as effectively.
The first rule of ARIA is straightforward: if native HTML already does the job, use native HTML.
Semantic elements usually provide the accessibility, behaviour, and structure you need without requiring additional roles or attributes.
And the data reflects this. The WebAIM Million report found that pages using ARIA averaged 59.1 accessibility errors, compared to 42 errors on pages without ARIA, around 17 additional issues per page (WebAIM Million, 2026). That doesn’t mean ARIA itself is the problem, but it does highlight how easy it is to misuse, and how often it ends up introducing issues rather than solving them.
The conclusion
Browsers already provide powerful accessibility features out of the box. When we ignore semantic HTML, we end up fighting against those built-in capabilities instead of benefiting from them. The result is often more complexity, more code, and a higher chance that users become frustrated and leave your site.
Good semantic markup isn’t just a “nice to have.” It’s the foundation of better, more usable experiences for everyone.
_________________________________________________
Who we are
Evoluted is an award-winning, full-service digital agency, superpowered by talented specialists in user-focused, accessible design, bespoke development and search marketing.
If you'd like to learn more about our people and services, we'd love to chat with you. Contact us today and see how we can support your project or business.
