HTML layout refers to how elements are arranged and positioned on a web page. Understanding layout techniques is crucial for creating well-structured, responsive, and visually appealing websites. Modern web development uses various layout methods including traditional HTML elements, CSS positioning, flexbox, and grid.
Semantic HTML Layout Elements
HTML5 provides semantic elements that define different parts of a web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic Layout Example</title>
</head>
<body>
<header>
<h1>Website Header</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Main Article</h2>
<p>Article content goes here...</p>
</article>
<aside>
<h3>Sidebar</h3>
<p>Sidebar content...</p>
</aside>
</main>
<footer>
<p>© 2024 Website. All rights reserved.</p>
</footer>
</body>
</html>Header-Content-Footer Layout
This is the most common layout which has three parts: header, content, and footer.
<body>
<header class="site-header">
<div class="logo">Logo</div>
<nav class="main-nav">Navigation</nav>
</header>
<main class="main-content">
<section>
<h2>Main Content</h2>
<p>Page content here...</p>
</section>
</main>
<footer class="site-footer">
<p>Footer content</p>
</footer>
</body>Two-Column Layout
This layout has two columns: main content and sidebar.
<body>
<header>Header</header>
<div class="container">
<main class="content">
<h2>Main Content</h2>
<p>Primary content area...</p>
</main>
<aside class="sidebar">
<h3>Sidebar</h3>
<p>Secondary content...</p>
</aside>
</div>
<footer>Footer</footer>
</body>Three-Column Layout
This layout has three columns: left sidebar, main content, and right sidebar.
<body>
<header>Header</header>
<div class="container">
<aside class="left-sidebar">
<h3>Left Sidebar</h3>
</aside>
<main class="main-content">
<h2>Main Content</h2>
<p>Primary content...</p>
</main>
<aside class="right-sidebar">
<h3>Right Sidebar</h3>
</aside>
</div>
<footer>Footer</footer>
</body>Don't worry on how to style the page, we will cover that in the CSS tutorials part.
Layout Best Practices
✓ Do:
- Use semantic HTML5 elements (header, main, aside, footer)
- Design mobile-first for responsive layouts
- Use CSS Flexbox and Grid for modern layouts
- Separate structure (HTML) from presentation (CSS)
- Test layouts on different screen sizes
- Use appropriate container elements for grouping
- Consider accessibility in layout design
✗ Don't:
- Use tables for page layout
- Nest too many layout elements
- Use absolute positioning for main layout
- Ignore mobile responsiveness
- Use deprecated layout techniques
- Hard-code dimensions that don't adapt
- Skip semantic elements in favor of divs