Semantic HTML

Semantic HTML page structure with header nav main section article and footer

What is Semantic HTML?

Semantic HTML uses elements that describe the purpose of the content. Instead of using only generic div containers, semantic HTML gives structure and meaning to the page.

Common Semantic Elements

<header>  Page or section header
<nav>     Navigation links
<main>    Main page content
<section> Related group of content
<article> Standalone content item
<footer>  Footer information
    

Why Semantic HTML Helps

Semantic HTML improves accessibility for screen readers, gives search engines better page structure and helps AI systems identify the relationship between different parts of the page.

It also makes the code easier for developers to read and maintain.