Standard Layout of a Web Page
A modern web page usually has a header, navigation, main content area, optional sidebar, and footer. Use semantic HTML elements to describe these regions, then use CSS Grid or Flexbox to control the layout.
For a typical content page, the structure can start like this:
<header>Site header</header>
<nav aria-label="Main navigation">...</nav>
<main>
<article>Main page content</article>
<aside>Related content</aside>
</main>
<footer>Footer</footer>Semantic HTML page structure Top ↑
Older layouts often used many generic <div> elements. A <div> is still useful when no semantic element fits, but the main page regions are better represented with HTML5 elements such as <header>, <nav>, <main>, <article>, <aside>, and <footer>.
<body>
<header>
<h1>My Website</h1>
</header>
<nav aria-label="Main navigation">
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
<main class="page-layout">
<article>
<h2>Page heading</h2>
<p>Main content goes here.</p>
</article>
<aside>
<h2>Related links</h2>
</aside>
</main>
<footer>
<p>© My Website</p>
</footer>
</body>Responsive layout with CSS Grid Top ↑
HTML defines the meaning and order of the page. CSS controls presentation. CSS Grid is well suited to a main-content-plus-sidebar layout, while a media query can collapse it to one column on smaller screens.
.page-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 18rem;
gap: 2rem;
max-width: 72rem;
margin: 0 auto;
padding: 1rem;
}
@media (max-width: 48rem) {
.page-layout {
grid-template-columns: 1fr;
}
}Place the stylesheet link in the document <head>:
<link rel="stylesheet" href="my_style.css">Common page layout patterns Top ↑
The following images are the original Plus2net layout examples. The regions are still useful for understanding page composition, even though new pages should use semantic HTML and modern CSS rather than fixed percentage columns built entirely with generic <div> elements.
A: Header and primary navigation. Keep important navigation predictable and easy to reach.
B: Main content. This should contain the page's primary purpose and normally receives most of the available width.
C: Footer. Use it for supporting navigation, legal information, copyright details, and other secondary information.
A: Header and site navigation.
B: Secondary navigation or supporting content. On small screens, this region should move into a logical reading order rather than forcing a narrow permanent column.
D: Optional secondary content such as related links, tools, or advertising. It should not interrupt the main reading flow.
Complete responsive page example Top ↑
This example replaces the original inline-block percentage layout with semantic HTML and responsive CSS Grid.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page</title>
<link rel="stylesheet" href="my_style.css">
</head>
<body>
<header class="site-header">
<h1>My Website</h1>
</header>
<nav class="site-nav" aria-label="Main navigation">
<a href="#">Home</a>
<a href="#">Tutorials</a>
</nav>
<main class="page-layout">
<article>
<h2>Main content</h2>
<p>Your page content goes here.</p>
</article>
<aside>
<h2>Related links</h2>
<p>Supporting information goes here.</p>
</aside>
</main>
<footer class="site-footer">
<p>© My Website</p>
</footer>
</body>
</html>* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
line-height: 1.6;
}
.site-header, .site-nav, .site-footer {
padding: 1rem;
}
.site-nav {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.page-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 18rem;
gap: 2rem;
max-width: 72rem;
margin: 0 auto;
padding: 1rem;
}
@media (max-width: 48rem) {
.page-layout {
grid-template-columns: 1fr;
}
}Layout and accessibility Top ↑
A responsive layout should remain understandable when CSS is removed or when the columns collapse on a small screen. Keep the HTML source order logical: important navigation first, primary content before secondary content where appropriate, and supporting material afterward.
- Use only one main
<main>landmark for the primary page content. - Give navigation regions accessible labels when more than one
<nav>exists. - Do not use visual column position as the only way to communicate meaning.
- Make sure keyboard focus follows a sensible DOM order.
- Avoid fixed widths that create horizontal scrolling on narrow screens.
Common layout mistakes Top ↑
- Using tables for page layout: use CSS Grid or Flexbox for layout; reserve tables for tabular data.
- Using only generic
<div>containers: prefer semantic elements when they accurately describe the region. - Fixed desktop-only columns: make layouts responsive so sidebars can stack on smaller screens.
- Placing styles in obsolete HTML attributes: keep presentation in CSS.
- Changing visual order without considering DOM order: keyboard and assistive-technology users should encounter content in a logical sequence.
Related HTML tutorials Top ↑
Continue with HTML page structure, the HTML head element, HTML tag and element types, the div element, or CSS basics.
Frequently asked questions Top ↑
Should I use divs or semantic HTML for page layout? Top ↑
Use semantic elements such as <header>, <nav>, <main>, <article>, <aside>, and <footer> when they match the content. Use <div> when no more meaningful element fits.
Should I use CSS Grid or Flexbox? Top ↑
CSS Grid is convenient for two-dimensional page layouts such as a main column plus sidebar. Flexbox is often simpler for one-dimensional rows or columns such as navigation bars. Many pages use both.
Can a page have more than one main element? Top ↑
A document should have one primary visible <main> element representing its dominant content. Repeated site-wide content such as navigation and footers belongs outside it.
Does every page need an aside or sidebar? Top ↑
No. Use <aside> only when there is complementary content. A simple page can contain only a header, navigation, main content, and footer.
How should a desktop layout change on mobile? Top ↑
Multi-column layouts commonly become a single column on smaller screens. Preserve a logical reading order, usable navigation, readable text, and controls that do not require horizontal scrolling.
HTML Button Linking Page Structure Generate HTML code
| Click for more tutorial on marquee tag for scrolling text |
|---|
