---
title: "Semantic HTML: The Foundation of Accessible Development"
description: Discover why semantic HTML is the single most impactful thing you can do for accessibility and SEO.
image: https://thedeveloper.javierfuentes.cl/hubfs/Imported_Blog_Media/photo-1542831371-29b0f74f9713-2.jpg
---

[Skip to content](https://thedeveloper.javierfuentes.cl/blog/semantic-html-the-foundation-of-accessible-development#main-content)

[![Javier Fuentes - The Developer](https://thedeveloper.javierfuentes.cl/hubfs/jf-dev/img/logos/jf-logo.svg "Javier Fuentes - The Developer")](https://thedeveloper.javierfuentes.cl/)

- [Home](https://thedeveloper.javierfuentes.cl/qa-test)
- Products
  
  Show submenu for Products 
  
    - [Product 1](https://thedeveloper.javierfuentes.cl/qa-test)
      
      Show submenu for Product 1 
      
          - [Sub Product 1](https://thedeveloper.javierfuentes.cl/qa-test)
    - Product 2
      
      Show submenu for Product 2 
      
          - [Sub Product 2](https://thedeveloper.javierfuentes.cl/qa-test)
    - [Sub Product 3](https://thedeveloper.javierfuentes.cl/qa-test)
- [Pricing](https://thedeveloper.javierfuentes.cl/qa-test)
- Blog
- [Company](https://thedeveloper.javierfuentes.cl/qa-test)
  
  Show submenu for Company 
  
    - [History](https://thedeveloper.javierfuentes.cl/qa-test)
    - [Open Positions](https://thedeveloper.javierfuentes.cl/qa-test)

- [Home](https://thedeveloper.javierfuentes.cl/qa-test)
- Products
  
  Show submenu for Products 
  
    - [Product 1](https://thedeveloper.javierfuentes.cl/qa-test)
      
      Show submenu for Product 1 
      
          - [Sub Product 1](https://thedeveloper.javierfuentes.cl/qa-test)
    - Product 2
      
      Show submenu for Product 2 
      
          - [Sub Product 2](https://thedeveloper.javierfuentes.cl/qa-test)
    - [Sub Product 3](https://thedeveloper.javierfuentes.cl/qa-test)
- [Pricing](https://thedeveloper.javierfuentes.cl/qa-test)
- Blog
- [Company](https://thedeveloper.javierfuentes.cl/qa-test)
  
  Show submenu for Company 
  
    - [History](https://thedeveloper.javierfuentes.cl/qa-test)
    - [Open Positions](https://thedeveloper.javierfuentes.cl/qa-test)

Search

- There are no suggestions because the search field is empty.

# Semantic HTML: The Foundation of Accessible Development

[Tom Hughes](https://thedeveloper.javierfuentes.cl/blog/author/tom-hughes)  Jul 6, 2023, 12:00:00 AM

Before reaching for ARIA, lean on semantic HTML. Elements like nav, main, article, section, and aside give browsers and screen readers meaningful context about your content structure. This guide walks through common non-semantic patterns and their accessible replacements.

[Best-Practices](https://thedeveloper.javierfuentes.cl/blog/tag/best-practices), [Accessibility](https://thedeveloper.javierfuentes.cl/blog/tag/accessibility), [HTML](https://thedeveloper.javierfuentes.cl/blog/tag/html)

## Read On

[![](https://thedeveloper.javierfuentes.cl/hs-fs/hubfs/Imported_Blog_Media/photo-1551288049-bebda4e38f71-1.jpg?width=352&name=photo-1551288049-bebda4e38f71-1.jpg)](https://thedeveloper.javierfuentes.cl/blog/how-to-build-a-design-system-with-accessibility-at-its-core)

### [How to Build a Design System with Accessibility at Its Core](https://thedeveloper.javierfuentes.cl/blog/how-to-build-a-design-system-with-accessibility-at-its-core)

 Retrofitting accessibility into an existing design system is painful. Building it in from the start...

[![](https://thedeveloper.javierfuentes.cl/hs-fs/hubfs/Imported_Blog_Media/photo-1555066931-4365d14bab8c-1.jpg?width=352&name=photo-1555066931-4365d14bab8c-1.jpg)](https://thedeveloper.javierfuentes.cl/blog/building-accessible-modal-dialogs-from-scratch)

### [Building Accessible Modal Dialogs from Scratch](https://thedeveloper.javierfuentes.cl/blog/building-accessible-modal-dialogs-from-scratch)

 Modals are one of the most commonly broken accessible components. A correct implementation requires...

[![](https://thedeveloper.javierfuentes.cl/hs-fs/hubfs/Imported_Blog_Media/photo-1504868584819-f8e8b4b6d7e3-1.jpg?width=352&name=photo-1504868584819-f8e8b4b6d7e3-1.jpg)](https://thedeveloper.javierfuentes.cl/blog/understanding-core-web-vitals-for-developers)

### [Understanding Core Web Vitals for Developers](https://thedeveloper.javierfuentes.cl/blog/understanding-core-web-vitals-for-developers)

 Core Web Vitals are Google's user-experience metrics that directly affect search rankings. LCP...

[Follow us on Facebook](https://www.facebook.com/) [Follow us on LinkedIn](https://www.linkedin.com/) [Follow us on Twitter](https://www.twitter.com/) [Follow us on Instagram](https://www.instagram.com/)

© 2026 All rights reserved.

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Tom Hughes",
    "url" : "https://thedeveloper.javierfuentes.cl/blog/author/tom-hughes"
  },
  "dateModified" : "2026-06-27T23:14:13.908Z",
  "datePublished" : "2023-07-06T04:00:00.000Z",
  "headline" : "Semantic HTML: The Foundation of Accessible Development",
  "image" : [ "https://thedeveloper.javierfuentes.cl/hubfs/Imported_Blog_Media/photo-1542831371-29b0f74f9713-2.jpg" ],
  "mainEntityOfPage" : {
    "@id" : "https://thedeveloper.javierfuentes.cl/blog/semantic-html-the-foundation-of-accessible-development",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://thedeveloper.javierfuentes.cl/hubfs/jf-dev/img/logos/jf-logo.svg"
    }
  }
}
```