HTML Layout
A modern HTML page uses semantic layout elements to describe its regions — header, navigation, main content, sidebar, footer. They communicate structure to browsers, search engines, and assistive tech.
Semantic layout regions
What each tag means
| Tag | Use for |
|---|---|
<header> | Site logo, page title, the top region of a page or article. |
<nav> | The main navigation links. |
<main> | The unique content of the page. One per document. |
<article> | A self-contained piece — a blog post, comment, or card. |
<section> | A grouped piece of content with its own heading. |
<aside> | Tangential content — a sidebar, pull-quote, related links. |
<footer> | Copyright, contact, secondary links at the bottom. |
Tip: Wrap the visual layout with these tags first, then style with CSS Grid or Flexbox. Don't replace them with
<div>s.Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout</title>
</head>
<body>
<h1>HTML Layout</h1>
<p>This is a demo page for the "HTML Layout" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Use the semantic element for the page banner area.
<
>
<h1>My Blog</h1>
</
>
Same word as the HTTP request part.
Discussion
Loading…