Menu
Semantic HTML
What is Semantic HTML?
Semantic HTML uses elements that describe the meaning of the content.
Instead of using only <div> elements, semantic tags explain what each part of the page represents.
Why Semantic HTML Matters
Semantic HTML makes webpages easier to understand for browsers, developers, search engines, and screen readers.
- Improves accessibility
- Helps search engines understand page structure
- Makes code easier to read
- Creates clearer page layouts
Common Semantic Elements
These elements describe common parts of a webpage.
<header>— top section of a page or section<nav>— navigation links<main>— main page content<section>— grouped related content<article>— independent content<aside>— side or extra content<footer>— bottom section of a page or section
Header
The <header> element usually contains introductory content like a title, logo, or navigation.
Nav
The <nav> element contains navigation links.
Main
The <main> element contains the primary content of the webpage.
A page should usually have only one <main> element.
Section
The <section> element groups related content together.
A section usually has a heading that describes the topic.
Article
The <article> element represents independent content that could stand alone.
Blog posts, news posts, and forum posts are common examples.
Aside
The <aside> element contains extra content related to the main content.
Footer
The <footer> element usually contains copyright, contact links, or page information.
Div vs Semantic Elements
A <div> has no meaning by itself. Semantic elements describe the purpose of the content.
Full Page Example
Common Mistakes
- Using
<div>for everything - Using
<section>without a clear heading - Placing multiple
<main>elements on one page - Using
<article>for content that cannot stand alone
Practice
Create a semantic webpage using <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>.
Need Help?
Ask the AI if you need help understanding or want to dive deeper in any topic