--- title: Semantic Markup | daily.dev description: A guide to web accessibility through semantic HTML markup. Covers replacing div-soup with meaningful HTML elements, using landmark elements (header, main, nav,... canonical: https://daily.dev/posts/semantic-markup-ch8eximtx twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Semantic Markup | daily.dev og:description: A guide to web accessibility through semantic HTML markup. Covers replacing div-soup with meaningful HTML elements, using landmark elements (header, main, nav,... og:url: https://daily.dev/posts/semantic-markup-ch8eximtx og:image: https://api.daily.dev/og/posts/ch8EXimtx.png og:image:alt: Semantic Markup og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Semantic Markup **[Playful Programming](https://daily.dev/sources/playfulprogramming)** · [@crutchcorn](https://daily.dev/crutchcorn) · 14 min read · 0 upvotes · 0 comments ## Summary A guide to web accessibility through semantic HTML markup. Covers replacing div-soup with meaningful HTML elements, using landmark elements (header, main, nav, section, etc.) for page structure, and how screen readers like VoiceOver, NVDA, and JAWS interact with these elements. Also explains ARIA attributes (aria-expanded, aria-controls, aria-selected) and the role attribute for custom UI patterns. Includes a practical walkthrough of building an accessible, keyboard-navigable tab component in React with proper ARIA roles and W3C-compliant keyboard bindings. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [Explaining the Accessible Benefits of Using Semantic HTML Elements](https://daily.dev/posts/explaining-the-accessible-benefits-of-using-semantic-html-elements-qzckf8xz9) · CSS-Tricks · 10 upvotes · 2 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#react](https://daily.dev/tags/react), [#html](https://daily.dev/tags/html), [#accessibility](https://daily.dev/tags/accessibility) [View this post on daily.dev](https://daily.dev/posts/semantic-markup-ch8eximtx) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Semantic Markup","url":"https://daily.dev/posts/semantic-markup-ch8eximtx","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/semantic-markup-ch8eximtx"},"datePublished":"2026-03-16T21:47:24.486Z","dateModified":"2026-03-17T18:01:30.856Z","description":"A guide to web accessibility through semantic HTML markup. Covers replacing div-soup with meaningful HTML elements, using landmark elements (header, main, nav,...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/96f62bbddd94a811a128bb8114ee248f?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/96f62bbddd94a811a128bb8114ee248f?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Playful Programming","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Person","name":"Corbin Crutchley","url":"https://daily.dev/crutchcorn","image":"https://avatars.githubusercontent.com/u/9100169?v=4","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":400}},"commentCount":0,"discussionUrl":"https://daily.dev/posts/semantic-markup-ch8eximtx","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,react,html,accessibility","timeRequired":"PT14M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Playful Programming","item":"https://daily.dev/sources/playfulprogramming"},{"@type":"ListItem","position":3,"name":"Semantic Markup"}]} ```