HTML Layout Basics
HTML layout defines the structure of a webpage — the framework along which the content is arranged, including the header, navigation, main content, and footer.
Typical Layout Structure
A basic HTML layout often includes <header>, <nav>, <main>, <aside>, and <footer> sections. These semantic elements provide a clear structure to the page.
html
<body>
<header>Header content</header>
<nav>Navigation</nav>
<main>Main content area</main>
<aside>Sidebar</aside>
<footer>Footer content</footer>
</body>Why Semantic HTML Matters
Semantic elements help search engines and accessibility tools better understand the structure of your page. They are recommended on all modern websites.
Layout with CSS Support
We often use CSS Grid or Flexbox to implement layout structures. These allow precise positioning and responsive arrangements across different screen sizes.
css
body {
display: grid;
grid-template-areas:
"header header"
"nav main"
"footer footer";
}Simple Layout Example
The following HTML example shows a basic layout structure, where the content is placed inside a container and organized into logical sections.
html
<div class="container">
<header>Header</header>
<main>Main Content</main>
<aside>Sidebar</aside>
<footer>Footer</footer>
</div>Layout Flexibility
HTML layout is not limited to a specific structure. You can apply grid layouts, single or multi-row content, or responsive designs.
Best Practices
Always aim for a simple, well-structured layout. Use semantic tags and rely on CSS for layout adjustments—not on <table> or excessive <div> nesting.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
