header
Introductory content or page/site header.
Platform under construction
HTML Layout
Learn HTML Layout with practical examples for structure, layout semantics, metadata, embedded content, scripts, accessibility, SEO and live practice.
HTML structure and layout
HTML layout starts with clear regions before CSS creates the visual grid.
A web page layout is not only columns and spacing. It is also the structure of the page: header, navigation, main content, sections, sidebars and footer.
HTML should describe those regions. CSS then decides whether they appear as one column, two columns, cards, grids or stacked mobile sections.
High-end layout starts with boringly clear structure. The visual polish comes later, but the HTML has to be strong first.
nav
Major navigation links.
main
The primary content of the document.
aside and footer
Supporting content and closing information.
Syntax and structure
Build regions in HTML, then arrange them with CSS.
Use landmarks and sections for structure. Use CSS grid or flexbox for visual placement.
Structured page layout
<header>Site header</header>
<nav aria-label="Main navigation">...</nav>
<main>
<section>
<h1>Page title</h1>
</section>
</main>
<footer>Site footer</footer>
Visual layout without structure
<div class="top">...</div> <div class="left">...</div> <div class="middle">...</div> <div class="bottom">...</div>
Rules that matter
Structure should stay readable before the design layer is applied.
Layout-focused HTML is strongest when meaning, grouping, metadata and behavior hooks all have a clear reason to exist.
Start with landmarks
A page usually needs header, nav, main and footer before advanced layout.
Use one main element
The main element should represent the primary content of the page.
Section by meaning
A section should normally have a heading and a real topic.
CSS owns placement
HTML should not become a table or div maze just to create columns.
Keep mobile in mind
Good structure stacks naturally when CSS changes layout.
Do not over-section
Too many meaningless sections can be as confusing as too few.
Production thinking
HTML structure affects design, accessibility, SEO and long-term maintenance.
Why does this matter?
This matters because layout is both structure and presentation. HTML provides the map; CSS makes it beautiful.
Accessibility
Landmarks help keyboard and screen reader users jump around a page quickly.
Production note
Layouts change often. Semantic regions survive redesigns better than class names such as left-column and right-column.
SEO note
Clear page regions and heading structure make it easier to understand the main topic and supporting sections.
Live code lab
Change the code and run the example.
Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.
Mini assignment
Try this now.
- Add an aside after main and style it.
- Move the nav inside the header and explain the tradeoff.
- Change the CSS grid gap without touching the HTML.
Practice assignment
Do this before moving to the next lesson.
- Sketch a page with header, nav, main and footer.
- Write the HTML regions before styling.
- Add CSS only after the structure is readable.
Try it yourself
Create a simple page layout
Self-check
Before you continue, prove that you own this lesson.
Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.
- Can you explain what problem this lesson solves in a real website?
- Can you identify the most important tag or attribute from this lesson?
- Can you name one accessibility mistake this lesson helps prevent?
- Can you write one good example and one weak example without copying the page?
- Can you explain when you would use this in production and when you would avoid it?