HTML Layout
Learn how to structure web pages using semantic HTML elements
🏗️ What is HTML Layout?
HTML layout refers to the way you structure and organize content on a web page using semantic HTML elements. These elements give meaning to different parts of your page.
<header>Site Header</header>
<nav>Navigation</nav>
<main>Main Content</main>
<footer>Site Footer</footer>Output:
Semantic Layout Elements
Header
Top section with logo and navigation
<header>Site Header</header>Nav
Navigation links and menus
<nav>Navigation Menu</nav>Main
Primary content of the page
<main>Main Content</main>Section
Distinct sections of content
<section>Content Section</section>🔹 Complete Layout Structure
Here's a complete HTML page layout using semantic elements:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Website</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section>
<h2>Welcome Section</h2>
<p>Welcome to my website!</p>
</section>
<aside>
<h3>Sidebar</h3>
<p>Additional information</p>
</aside>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>Output:
My Website
Welcome Section
Welcome to my website!
© 2024 My Website
🔹 Layout Elements Explained
Understanding each semantic HTML element:
<!-- Header: Top of page -->
<header>
<h1>Site Title</h1>
<nav>Navigation</nav>
</header>
<!-- Main: Primary content -->
<main>
<!-- Article: Complete content -->
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>
<!-- Section: Themed content -->
<section>
<h2>Section Title</h2>
<p>Section content...</p>
</section>
</main>
<!-- Aside: Sidebar content -->
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</aside>
<!-- Footer: Bottom of page -->
<footer>
<p>Copyright information</p>
</footer>Element Purposes:
- <header>: Site branding and main navigation
- <nav>: Navigation links and menus
- <main>: Primary page content (only one per page)
- <article>: Self-contained content (blog posts, news articles)
- <section>: Thematic groupings of content
- <aside>: Sidebar content, related information
- <footer>: Copyright, contact info, site links
🔹 Layout Best Practices
Tips for creating good HTML layouts:
<!-- Good: Semantic and accessible -->
<header role="banner">
<h1>Site Name</h1>
<nav role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main role="main">
<h1>Page Title</h1>
<p>Page content...</p>
</main>
<!-- Avoid: Non-semantic divs -->
<div class="header">
<div class="title">Site Name</div>
<div class="menu">Navigation</div>
</div>Benefits of Semantic HTML:
- SEO: Search engines understand your content better
- Accessibility: Screen readers can navigate easily
- Maintainability: Code is easier to understand and update
- Styling: CSS can target semantic elements directly