Semantic HTML5 — Free HTML Tutorial

Learn Semantic HTML5 in HTML with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.

✓ 100% Free ✓ No Login Needed ✓ NCERT / CBSE Aligned ✓ Download as PDF

TL;DR: Learn Semantic HTML5 in HTML with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.

Written & reviewed by the Syllab.in Academic Team (CBSE/NCERT subject experts) · Updated Sep 17, 2026

🤖 Stuck on any question? Ask Syllab's free AI Tutor for a step-by-step explanation — instant, unlimited, no login.

Semantic HTML5 in HTML

Semantic HTML uses meaningful tag names that describe their purpose: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>. This makes code readable for humans and search engines alike.

Before HTML5, developers used <div id="header"> everywhere. Now we have specific tags. Search engines like Google give higher ranking to pages using semantic HTML correctly.

Screen readers (used by visually impaired users) rely on semantic tags to navigate content. Good semantics = good accessibility = more users.

Semantic HTML5 — Syntax

<header>   <!-- site header/logo/nav -->
<nav>      <!-- navigation links -->
<main>     <!-- primary content -->
<section>  <!-- themed content group -->
<article>  <!-- independent content -->
<aside>    <!-- sidebar content -->
<footer>   <!-- bottom of page -->

Learn Semantic HTML5 step by step with Syllab's free interactive HTML tutorial — runnable code examples, practice exercises and instant AI feedback, all free with no signup. Explore the full HTML course →