Html Semantic — Free Html Tutorial
Learn Html Semantic in Html with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.
TL;DR: Learn Html Semantic 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
Html Semantic 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.
Html Semantic — 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 Html Semantic 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 →