HTML layouts are a technique used to divide a web page into multiple sections, making it easier to apply styles, organize content, and manage operations efficiently. This division improves readability, accessibility, and overall user experience.
HTML layout is achieved through semantic elements like <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> which help organize content, define the page's sections, and improve SEO.
<header> Content... </header> <nav> Content... </nav> <main> Content... </main> <footer> Content... </footer>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic Layout</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<main>
<p>Welcome to my website!</p>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
<header> contains the main heading of the page.<main> holds the primary content.<footer> includes the footer information.Here is a breakdown of common webpage layout components and the semantic HTML tags used to represent them:
| Layout Component | Description |
|---|---|
Header (<header>) |
The top section of a webpage, often containing the website title, logo, or top-level tools. |
Navigation bar (<nav>) |
A menu that provides links to the main sections of the website. |
Content Section (<main>) |
The central area where the primary, unique content of the page is displayed. |
Index / Sidebar (<aside>) |
An optional section often found on the side, used for additional content such as ads, links, or other related information. |
Footer (<footer>) |
The bottom section of the webpage, typically containing contact information, legal links, or copyright data. |
This example uses semantic tags to build a standard blog page structure with a navigation bar, a main article section, and a sidebar.
<!DOCTYPE html>
<html lang="en">
<body>
<header>
<h1>My Blog</h1>
</header>
<nav>
<a href="#">Home</a> | <a href="#">About</a> | <a href="#">Contact</a>
</nav>
<section>
<h2>Latest Posts</h2>
<article>
<h3>Post Title</h3>
<p>This is a brief introduction to the blog post.</p>
</article>
</section>
<aside>
<h2>About Me</h2>
<p>Short bio or profile information.</p>
</aside>
<footer>
<p>© 2024 My Blog</p>
</footer>
</body>
</html>
<nav> provides navigation links for the website.<section> groups related content, here titled "Latest Posts."<article> represents an individual blog post.<aside> contains supplementary information, such as an "About Me" section.By combining semantic layout tags with CSS, you can create a structured and visually appealing page.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: 'Segoe UI', Verdana, sans-serif;
line-height: 1.5;
font-weight: 400;
margin: 0;
}
header {
background-color: #3B82F6;
color: white;
text-align: center;
padding: 1em;
}
header h1 {
font-family: 'Segoe UI', Verdana, sans-serif;
font-size: 36px;
line-height: 1.2;
font-weight: normal;
margin: 0;
}
nav {
background-color: #282A35;
overflow: hidden;
padding: 1em;
}
nav a {
font-family: 'Segoe UI', Verdana, sans-serif;
font-size: 14px;
font-weight: 500;
color: white;
text-decoration: none;
margin-right: 15px;
}
main { padding: 20px; }
main h2 { font-size: 26px; line-height: 1.2; font-weight: normal; }
main p { font-family: 'Segoe UI', Verdana, sans-serif; font-size: 17px; }
footer {
background-color: #3B82F6;
color: white;
text-align: center;
padding: 1em;
}
</style>
</head>
<body>
<header>
<h1>Styled Page</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
<main>
<h2>Welcome!</h2>
<p>This is a simple page.</p>
</main>
<footer>
<p>© 2024 Styled Page</p>
</footer>
</body>
</html>
There are several techniques used alongside HTML semantics to create robust multi-column layouts on the modern web:
<header>, <nav>, <main>, and <footer> to clearly define the structure of your webpage for both browsers and screen readers.% or vh/vw) and CSS media queries to make your layout adaptable to different screen sizes.Which HTML element is typically used as a sidebar to hold supplementary information related to the primary content?