Introduction
HTML has several semantic elements that define different parts of a web page. These elements help to organize the content and make the structure of the web page clear both to developers and to browsers. They improve the readability and accessibility of the web page.
HTML5 Semantic Elements
<header>
The <header>
element defines a header for a document or a section. It usually contains introductory content or navigational links.
Example
<header>
<h1>Website Title</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>
<nav>
The <nav>
element defines a set of navigation links. It is intended for major navigational blocks.
Example
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section>
The <section>
element defines a section in a document. It represents a thematic grouping of content, typically with a heading.
Example
<section>
<h2>About Us</h2>
<p>This section contains information about us.</p>
</section>
<article>
The <article>
element defines an independent, self-contained piece of content. It could be a blog post, a news article, a forum post, or any other independent content item.
Example
<article>
<h2>Article Title</h2>
<p>This is the content of the article.</p>
</article>
<aside>
The <aside>
element defines content that is tangentially related to the content around it. It is often used for sidebars.
Example
<aside>
<h2>Related Links</h2>
<ul>
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
</ul>
</aside>
<footer>
The <footer>
element defines a footer for a document or a section. It typically contains information about the author, links to related documents, or copyright information.
Example
<footer>
<p>© 2023 My Website</p>
</footer>
<details>
The <details>
element defines additional details that the user can open and close on demand. It is often used to hide content until the user wants to see it.
Example
<details>
<summary>More Info</summary>
<p>Here are some additional details.</p>
</details>
<summary>
The <summary>
element defines a heading for the <details>
element. When the <details>
element is closed, only the <summary>
is visible.
Example
<details>
<summary>More Info</summary>
<p>Here are some additional details.</p>
</details>
Example: Complete Page Layout
Here is an example of a complete page layout using the common HTML layout elements.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Layout Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
background-color: #f4f4f4;
padding: 10px 20px;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
main {
padding: 20px;
}
section, article, aside {
margin-bottom: 20px;
}
aside {
background-color: #f9f9f9;
padding: 10px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<header>
<h1>My Website</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>
<section>
<h2>About Us</h2>
<p>This section contains information about us.</p>
</section>
<article>
<h2>Article Title</h2>
<p>This is the content of the article.</p>
</article>
<aside>
<h2>Related Links</h2>
<ul>
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 My Website</p>
</footer>
</body>
</html>
Explanation
<header>
: Contains the website title and navigation links.<nav>
: Provides a navigation menu with links to different sections of the page.<main>
: Contains the main content of the page.<section>
: Represents a section of content about the website.<article>
: Contains an article that can be independently distributed.<aside>
: Contains related links, typically displayed as a sidebar.<footer>
: Provides footer content, including copyright information.<details>
and<summary>
: Used to create expandable sections for additional details.
Conclusion
HTML layout elements are essential for structuring and organizing content on a web page. By using elements like <header>
, <nav>
, <section>
, <article>
, <aside>
, <footer>
, <details>
, and <summary>
, you can create semantically meaningful and well-structured web pages. Understanding how to use these layout elements effectively is crucial for creating accessible, maintainable, and visually appealing websites.