HTML Tutorial: HTML Semantics
Learn semantic HTML to structure web pages clearly using <header>, <footer>, <article>, <section>, <aside>, and <nav> with examples and colorful results
Semantic HTML uses tags that describe the meaning of content. It improves SEO, accessibility, and readability.
1️⃣ Header and Footer
INPUT:
<header style="background:#0077cc; color:white; padding:20px;">
My Website Header
</header>
Main content goes here...
<footer style="background:#009933; color:white; padding:20px;">
My Website Footer
</footer>
OUTPUT:
My Website Header Main content goes here...
✔️ <header> defines top section ✔️ <footer> defines bottom section ✔️ Both help structure page semantically
2️⃣ Sections and Articles
INPUT:
<section style="background:#ff6600; color:white; padding:20px; margin-bottom:10px;">
<h2>About Us</h2>
We are a web design company.
</section>
<article style="background:#cc0066; color:white; padding:20px;">
<h3>Blog Post</h3>
Learn HTML semantics today!
</article>
OUTPUT:
About Us
We are a web design company.
Blog Post
Learn HTML semantics today!
✔️ <section> groups related content ✔️ <article> is self-contained content (like a blog post)
3️⃣ Navigation and Aside
INPUT:
<nav style="background:#0077cc; color:white; padding:15px;">
Home
About
Contact
</nav>
<aside style="background:#ff6600; color:white; padding:20px; margin-top:10px;">
Related Links
</aside>
OUTPUT:
✔️ <nav> is for main navigation links ✔️ <aside> is for side content like ads or links
4️⃣ Best Practices for Semantic HTML
- Use semantic tags instead of generic divs where possible
- Improves SEO and screen reader accessibility
- Helps maintain structured, readable code
- Use headers (h1-h6) correctly inside sections and articles
- Combine semantic layout with CSS for design
🚀 What’s Next?
👉 HTML Style Guide
Next lesson will cover:
- Rules and best practices for writing clean HTML
- Consistent indentation, naming, and structure
- Combining semantics, layout, and styles
Semantic HTML improves the meaning of content, accessibility, and SEO while keeping the structure clear and easy to maintain.