# What is Semantic HTML?

DevFeed: [What is Semantic HTML?](<https://devfeed.tech/articles/what-is-semantic-html-9425.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/what-is-semantic-html/>)

Author: David A Kennedy

Published: 2023-04-04T00:00:00Z

Content type: tutorial

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [HTML](<https://devfeed.tech/topics/html.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Web platform](<https://devfeed.tech/topics/web-platform.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [code](<https://devfeed.tech/tags/code.md>), [developer](<https://devfeed.tech/tags/developer.md>), [html](<https://devfeed.tech/tags/html.md>), [web](<https://devfeed.tech/tags/web.md>), [web-platform](<https://devfeed.tech/tags/web-platform.md>)

## AI overview

This article explains semantic HTML as choosing elements that accurately convey a page's structure and meaning. It describes how semantic elements provide implicit roles for browsers and assistive technologies, along with built-in keyboard behavior, state communication, default styling, improved search indexing, and better parsing by RSS readers and Reader mode.

## Source excerpt

A common refrain comes up often in the accessibility field. "Use semantic HTML," people say. But what does that mean and why does it matter? More importantly, what do you get with semantic HTML? What is Semantic HTML? The word "semantic" has a few meanings. In computer science, semantics provides the rules for interpreting expressions of code. In this case, semantics lays out the rules for how HTML (the code) gets interpreted. Those rules govern structure and meaning. Structure HTML stands for Hypertext Markup Language. Invented by Tim Berners-Lee as a way to link together important research documents, HTML has evolved to do much more than that. Early versions had heading elements (h1, h2, etc.), but not the structural elements like <header>, <main> and <footer>. Those came later. Each of these elements gives structure to the document, the web page. Creating semantic code means picking the right element for the job, giving your page structure. Meaning The elements also have a meaning underneath. Every element has an implicit role. For example, the <header> element has the implicit role of "banner." That means that a screen reader will read that role as a landmark. People who use screen readers can navigate by those landmarks, granting an easier way to skim the content of a page. If a developer used a <div> instead of a <header>, the implicit role would be absent, unless provided with extra code. That means the HTML won't be as useful to the machines that interpret it. What you get with Semantic HTML When you select the right element for the content you have, you get some things for free. Free as in the web platform gives it to you without any other effort. We talked about one already: Structure and meaning gets conveyed to browsers and assistive technologies. Some elements come with built in keyboard functionality, for example, the <form> element. Other elements may communicate state to the browser and assistive technology. Radio buttons and checkboxes do this. The