Module 1 · The browser: HTML and CSS Lesson 1 of 15
Semantic HTML
Tags describe meaning, not appearance: header, nav, main, article, footer. Screen readers, search engines and the next developer all depend on that meaning being real.
The concept
Semantic HTML means using the tag that says what the content IS: header, nav, main, section, article, footer, button. A wall of divs looks identical on screen and tells every machine that reads the page — a screen reader, a search crawler, your own future self — nothing at all.
Structure a page as one h1, then h2 for each section, with the content under each heading. Buttons that do something are <button>; links that go somewhere are <a href>. Use div only when there is no better tag, and then only as a wrapper.
<header>
<h1>Asha Patil</h1>
<nav><a href="#projects">Projects</a> · <a href="#contact">Contact</a></nav>
</header>
<main>
<section>
<h2>Projects</h2>
<article>
<h3>Expense tracker</h3>
<p>Records expenses and prints a monthly total per category.</p>
<button>View the code</button>
</article>
</section>
</main>Common mistakes
The mistake is choosing a tag for how it LOOKS — h3 because the text should be smaller, or a div with a click handler where a button belongs. Styling is CSS's job. Tag by meaning, style by class, and keyboard and screen-reader users get working software for free.
Worked example
A job card is an <article> with an <h3> title, not five <div>s — the first is readable by a screen reader, the second is a wall of nothing.
Your practice task
Take any page you use daily and rewrite the skeleton of it in semantic tags only, without any styling.
Do this before moving on. Reading a solution teaches the shape of it; typing it teaches you.
Key takeaway
Semantic HTML means using the tag that says what the content IS: header, nav, main, section, article, footer, button.
Keep your place in this course
A free account saves which lessons you have finished and unlocks the certificate. The lesson itself stays free to read.
Create free account or sign inCourse complete
You finished every lesson.
Your certificate is ready, and the projects you built are the proof to attach to an application.
Almost there
15 lessons left of 15
Finish every lesson to unlock the certificate. Each one ends in a practice task — do them and the final project brief writes itself.