HTML Layout
Web page layout determines what a page "looks like" — where the header goes, how the navigation bar is arranged, and how the content area and sidebar are positioned. Good layout makes pages clear, readable, and adaptable to various screens.
What Is HTML Layout
HTML layout divides a web page into several functional areas: header, navigation bar (nav), main content area (main), sidebar (aside), and footer. In the early days, <div> combined with CSS was commonly used to achieve layout:
Example
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; font-family: sans-serif; }
.header { background: #4a90d9; color: #fff; padding: 20px; text-align: center; }
.nav { background: #333; color: #fff; padding: 10px; text-align: center; }
.nav a { color: #fff; margin: 0 10px; text-decoration: none; }
.container { display: flex; }
.main { flex: 3; padding: 20px; background: #f4f4f4; }
.sidebar { flex: 1; padding: 20px; background: #e4e4e4; }
.footer { background: #333; color: #fff; padding: 15px; text-align: center; }
</style>
</head>
<body>
<div class="header"><h1>My Website</h1></div>
<div class="nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
<div class="container">
<div class="main"><h2>Main Content</h2><p>This is the main content area of the page.</p></div>
<div class="sidebar"><h3>Sidebar</h3><p>Place ads or related links here.</p></div>
</div>
<div class="footer">© 2025 My Website</div>
</body>
</html>
The example above uses <div> with class and style to implement a classic "header-content-footer" layout, where the middle section is further divided into a main content area and a sidebar. The downside of this approach is that the HTML tags themselves can't express what each area represents — all sections use <div>, making the semantics unclear.
Semantic Layout
HTML5 introduced semantic tags, replacing <div> with meaningful tags:
<header>— Header area<nav>— Navigation bar<main>— Main content<section>— Content section<aside>— Sidebar<footer>— Footer area
Example
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; font-family: sans-serif; }
header { background: #4a90d9; color: #fff; padding: 20px; text-align: center; }
nav { background: #333; color: #fff; padding: 10px; text-align: center; }
nav a { color: #fff; margin: 0 10px; text-decoration: none; }
.container { display: flex; }
main { flex: 3; padding: 20px; background: #f4f4f4; }
aside { flex: 1; padding: 20px; background: #e4e4e4; }
footer { background: #333; color: #fff; padding: 15px; text-align: center; }
</style>
</head>
<body>
<header><h1>My Website</h1></header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
<div class="container">
<main>
<section>
<h2>Latest Articles</h2>
<p>This is the article content.</p>
</section>
</main>
<aside>
<h3>Related Links</h3>
<p>Sidebar content.</p>
</aside>
</div>
<footer>© 2025 My Website</footer>
</body>
</html>
💡 Semantic Layout vs Div Layout: Semantic tags are more friendly to search engines (SEO) and assistive technologies (screen readers). Search engines prioritize analyzing content inside
<main>, and screen readers can directly jump to <nav>. The code is also clearer — you know what each area does just by looking at the tag names, without needing to guess from class names.
Introduction to Flexbox
display: flex is a flexible layout model provided by CSS3 that allows child elements to automatically align horizontally or vertically. You just need to set display: flex on the container, and the child elements will "line up" automatically. Here's a horizontal navigation bar built with Flexbox:
Example
HTML
<!DOCTYPE html>
<html>
<head>
<style>
nav ul {
display: flex;
list-style: none;
padding: 0;
background: #333;
}
nav ul li a {
display: block;
padding: 14px 24px;
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
background: #575757;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
💡 Flexbox and Grid are the core of modern CSS layout. Flexbox excels at one-dimensional arrangement (horizontal or vertical), while Grid excels at two-dimensional layouts (controlling rows and columns simultaneously). It's recommended to systematically study CSS tutorials after learning HTML to master these two powerful tools.
Common Flexbox properties include justify-content (horizontal alignment), align-items (vertical alignment), and gap (spacing). The navigation bar above uses just one line — display:** flex — to turn list items from vertical to horizontal arrangement, which is very concise.
❓ FAQ
Q What's the difference between
<div> and semantic tags (<header>, <nav>, etc.)?A
<div> is a generic container with no semantic meaning — it just wraps content. Semantic tags explicitly express content purpose — <header> is a page header, <nav> is navigation, <main> is core content, <aside> is a sidebar, <footer> is a page footer. Benefits: 1) Code is more readable; 2) Search engines better understand page structure; 3) Screen reader users can quickly jump to specific areas.Q When should I use Flexbox vs Grid?
A Flexbox is one-dimensional — ideal for arranging elements along a single axis (horizontal or vertical), like navigation bars, card lists, button groups. Grid is two-dimensional — ideal for controlling rows and columns simultaneously, like page layouts, dashboards, image galleries. Simple rule: if you only need to control one row or one column, use Flexbox; if you need to control multiple rows and columns, use Grid. They can be combined.
Q How do I create a three-column layout (left-center-right)?
A The simplest approach is Flexbox: set the outer container to
display: flex, give left and right columns fixed widths (like width: 200px), and set the center column to flex: 1 to fill remaining space. Code: <div style="display: flex"><div style="width: 200px">Left</div><div style="flex: 1">Center</div><div style="width: 200px">Right</div></div>. For responsive design, use flex-wrap: wrap to make columns stack automatically.Q Why should I use semantic tags instead of
<div>?A Semantic tags' core value is "self-documenting code." Benefits: 1) Developers seeing
<nav> know it's navigation, seeing <aside> know it's a sidebar — no need to guess from class names; 2) Search engines give semantic tags higher weight, boosting SEO; 3) Screen reader users can navigate via semantic tags (like "skip to main content"); 4) Easier to understand page structure during future maintenance.📖 Summary
- HTML Layout divides pages into header, navigation, content, sidebar, and footer areas
- You can use
<div>+ CSS to achieve any layout - Semantic tags (
<header>,<nav>,<main>,<aside>,<footer>) replace<div>, enhancing readability and SEO display: flexarranges child elements horizontally, ideal for navigation bars, card lists, and similar scenarios
📝 Exercises
- Personal Homepage Layout: Use semantic tags to build a personal homepage including header (site title), nav (navigation links), main (self-introduction + portfolio section), aside (contact info), and footer (copyright notice). Use
display: flexto make the navigation bar horizontal. - Three-Column Layout: Use
<div>to implement a left-center-right three-column layout where the center column is adaptive and the left and right columns are fixed at 200px. (Hint: use Flexbox'sflexproperty to control proportions)