CodeParkSemantic HTML means choosing elements for what the content is, not for how it looks. For example, a navigation menu goes in nav, not in a styled div.
Common semantic elements:
header,nav,mainandfooterarticle,sectionandasidebuttonandfigure- the heading elements
h1toh6
It matters for accessibility first. Many elements map to ARIA roles automatically. ARIA (Accessible Rich Internet Applications) is a set of attributes that tells assistive technology, such as screen readers, what an element is. So nav is exposed as a navigation landmark, which is a main region of the page. A button is exposed as a button that can take focus and works with the keyboard. Screen reader users jump between landmarks and headings to move around a page.
It also helps in other ways:
- Search engines and tools such as reader modes use the structure to understand the page.
- Other developers can read semantic markup more easily.
- You get built-in behaviour for free. With a
div, you must rebuild it with JavaScript and ARIA.
- Choose elements by what the content means, not by how it looks.
- Semantic elements get ARIA roles and landmarks automatically, and assistive technology uses them.
- Native elements like
buttongive you keyboard and focus behaviour for free. - Semantic HTML also helps search engines (SEO), reader modes and code maintenance.