HTML Layout
In this page:
Semantic Headers and Footers
The header element represents introductory content, typically holding logos, search inputs, or navigation menus. The footer element marks closing content, such as copyright info, contacts, or system links.
Note: Use header and footer tags to clearly define the beginning and end of your pages.
Warning: Do not wrap your entire page inside a header tag; use it strictly for introductory elements.
Example: Semantic Headers and Footers
<header>Site Logo</header>
<footer>© 2024 My Site</footer>Semantic Navigation (nav)
The nav element is a specialized container used to group primary website navigation links. Using this tag signals to search engine crawlers and screen readers that this block handles page routing.
Note: Place only your primary menu links inside the nav container to keep navigation clear.
Warning: Do not wrap single, isolated footnotes or help links in a nav element, as it can confuse assistive devices.
Example: Semantic Navigation (nav)
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>Structuring Main Content with article and section
The main tag represents the unique, core topic of your page. Within it, you can group content semantically using the article tag (for standalone, self-contained elements like blog posts) and the section tag (for grouping related features).
Note: Always include a descriptive heading inside every section container to maintain an organized hierarchy.
Warning: Never use the main tag more than once per page to avoid confusing search engine bots.
Example: Structuring Main Content with article and section
<main>
<article>Blog post content</article>
<section>Related features</section>
</main>Sidebars and Callouts (aside)
The aside element represents content that is tangentially related to the main page content, such as a sidebar listing popular tools, quick tips, or callout advertisements.
Note: Use the aside tag to keep secondary links and tips from cluttering your main reading flow.
Warning: Do not put essential page actions inside an aside tag, as screen readers may skip it during fast navigation.
Example: Sidebars and Callouts (aside)
<aside>Popular tools this week</aside>Generic Dividers vs. Semantic Tags
Before semantic HTML tags like header, nav, and article were introduced, developers had to use generic div containers with custom class names (like div class="header") for every section. While standard divs are still highly useful for styling layout cards, using semantic tags is much better for accessibility and search engine optimization.
Note: Use semantic elements to structure your layout, and save standard div elements for visual styling and spacing.
Warning: Overusing plain div tags instead of semantic containers can negatively impact your site's SEO ranking.
Example: Generic Dividers vs. Semantic Tags
<div class="header">Old approach</div>
<header>Semantic approach</header>CSS Box Model for Layout
Every HTML element is a rectangular box made of four layers: the content itself, padding around the content, a border around the padding, and margin outside the border separating it from other elements. Understanding this model is the foundation for building any layout correctly.
Note: Set box-sizing: border-box globally so that padding and border are included inside the width you set, instead of adding to it unexpectedly.
Warning: Forgetting that margin is outside the border is a very common cause of layouts looking wider or more spaced out than expected.
Example: CSS Box Model for Layout
<div style="padding: 10px; border: 1px solid black; margin: 20px;">
Content
</div>Flexbox Basics
Flexbox is a CSS layout method designed for arranging items in a single row or column, distributing space between them automatically. Setting display: flex on a container turns its direct children into flexible items that can grow, shrink, or align along that single direction.
Note: Use justify-content to control spacing along the main direction and align-items to control alignment across the other direction.
Warning: Flexbox is designed for one-dimensional layouts — rows or columns — not full two-dimensional grids with both rows and columns aligned together.
Example: Flexbox Basics
<div style="display: flex; justify-content: space-between;">
<div>Item 1</div>
<div>Item 2</div>
</div>CSS Grid Basics
CSS Grid is a layout method built for two-dimensional layouts, letting you define both rows and columns at the same time. Setting display: grid on a container along with grid-template-columns lets you place items into a precise grid structure that flexbox cannot easily replicate.
Note: Use grid-template-columns: repeat(3, 1fr) to create three equal columns without manually calculating percentages.
Warning: Grid and flexbox solve different problems — reaching for grid when you only need a simple single row often adds unnecessary complexity.
Example: CSS Grid Basics
<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
<div>1</div>
<div>2</div>
<div>3</div>
</div>Choosing the Right Layout Method
For arranging items in a single row or column, like a navigation bar or a list of buttons, flexbox is usually the simplest choice. For laying out an entire page structure with rows and columns together, like a dashboard with a sidebar, header, and main content area, CSS Grid tends to be clearer and more powerful.
Note: It is completely normal and often best to use both together — grid for the overall page structure, and flexbox for aligning items inside each grid area.
Warning: Trying to force a complex two-dimensional dashboard layout using only flexbox often leads to fragile, hacky CSS that breaks at different screen sizes.
Example: Choosing the Right Layout Method
<div style="display: grid; grid-template-columns: 200px 1fr;">
<nav>Sidebar</nav>
<div style="display: flex;">
<button>Save</button>
<button>Cancel</button>
</div>
</div>- Using the main tag more than once on a single webpage.
- Misusing the aside element to group core, essential navigation routes.
- Building complex layouts entirely with plain, non-semantic div tags.
- Semantic elements define the structure and purpose of webpage zones for search engines and assistive devices.
- Organize layouts using semantic tags: header, footer, nav, main, article, and section.
- Use generic div tags for visual styling and spacing, and semantic elements for content hierarchy.
Semantic layout tags are natively supported by all modern web browsers.
Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: