Python Semantic HTML (<header>, <nav>, <main>, <footer>)
Semantic HTML means using tags that describe the actual meaning of content rather than just how it looks. A <header> tells the browser "this is top navigation/branding", <main> marks the primary body, and <footer> wraps copyright and legal links.
"Imagine a grocery store where every item is packaged in an unlabeled brown cardboard box. That is non-semantic HTML with 10,000 divs! Semantic HTML is putting clear labels on each box: "Dairy", "Fresh Bakery", "Frozen Goods"."
Deep Dive: How It Works
<header>: Introductory content, site logos, and search bars.
<nav>: Navigation links (menus, table of contents, pagination).
<main>: The dominant central content of the <body>. There should only be ONE <main> tag per page.
<article>: Self-contained content that makes sense on its own (a blog post, forum reply, or product card).
<section>: A thematic grouping of content with a heading.
<footer>: Author info, copyright notices, terms of service, and contact details.
Syntax Blueprint
<header><nav>...</nav></header> <main> <section><h2>Topic</h2></section> </main> <footer>...</footer>
Clean semantic landmark layout that screen readers and Google love.
Core Rules to Remember
Common Beginner Traps & How to Fix Them
Using <header> inside <head>Why it happens: Confusing the invisible <head> metadata tag with the visible <header> banner element.
How to fix: <head> holds meta/title tags; <header> lives inside <body> with visible logos and navbars.
Live Interactive Example
Hit Run Code to see it liveYour Turn: Micro Challenge
No pressure! Edit the starter code below and test your solution with instant feedback.
Assemble a semantic landmark layout
- Create a <header> containing an <h1> with text "My Site"
- Below it, create a <footer> containing a <p> with text "Footer Notes"
Finished reading and practicing?
Mark this lesson as completed to update your course progress.