Module 9: Semantic HTML and Page Layouts
What Is Semantic HTML?
Understand how meaningful elements help browsers, assistive technology, maintainers, and search engines.
Semantic HTML means choosing elements that describe the role of the content. A button is a button, a nav is a navigation region, and an article is a self-contained composition. The element communicates meaning before CSS adds any visual treatment.
Compare these examples:
<!-- Generic containers with no stated role -->
<div class="title">Account settings</div>
<div class="button">Save</div>
<!-- Elements that describe the content -->
<h1>Account settings</h1>
<button type="button">Save</button>
The second version gives the browser useful information and provides built-in behavior. A real button can receive keyboard focus and respond to Enter or Space without a developer rebuilding that behavior.
A section does not automatically look like a box, and an article does not have to look like a newspaper. CSS controls presentation. The semantic element describes the content’s role.
Start with the simplest correct element: a paragraph for prose, a list for grouped items, a heading for a section title, and a button for an action. Use div or span when no more specific element fits.