Introduction
HTML semantic elements provide meaning to web content, enhancing the structure and accessibility of a web page. These elements describe the role of the content they contain, making it easier for browsers, search engines, and developers to understand the page structure and content.
List of HTML Semantic Elements
<article>
Defines independent, self-contained content that can be distributed or reused, such as a blog post, news article, or forum post.
Example
<article>
<h2>Article Title</h2>
<p>This is the content of the article.</p>
</article>
<aside>
Defines content aside from the main page content. It is often used for sidebars, callouts, or related links.
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>
<details>
Defines additional details that the user can view or hide. It is often used to provide extra information that the user can choose to view.
Example
<details>
<summary>More Info</summary>
<p>Here are some additional details.</p>
</details>
<figcaption>
Defines a caption for a <figure> element, providing a description for the content within the figure.
Example
<figure>
<img src="image.jpg" alt="An example image">
<figcaption>This is a caption for the image.</figcaption>
</figure>
<figure>
Specifies self-contained content, such as illustrations, diagrams, photos, or code listings, along with their captions.
Example
<figure>
<img src="image.jpg" alt="An example image">
<figcaption>This is a caption for the image.</figcaption>
</figure>
<footer>
Defines a footer for a document or section. It typically contains information about the author, links to related documents, or copyright information.
Example
<footer>
<p>© 2023 My Website</p>
</footer>
<header>
Specifies a header for a document or 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>
<main>
Specifies the main content of a document. There should be only one <main> element per document, and it should not be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.
Example
<main>
<h1>Main Content</h1>
<p>This is the main content of the page.</p>
</main>
<mark>
Defines marked or highlighted text. It is used to highlight parts of the text for emphasis or relevance.
Example
<p>The <mark>highlighted text</mark> is important.</p>
<nav>
Defines a set of navigation links. It is intended for major navigational blocks within a document.
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>
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>
<summary>
Defines a visible heading for a <details> element. The summary element is the heading that the user clicks on to view the additional details.
Example
<details>
<summary>More Info</summary>
<p>Here are some additional details.</p>
</details>
<time>
Defines a date or time. It can represent dates in various formats, including 24-hour clock times, dates with or without a time zone, and durations.
Example
<p>The event will start at <time datetime="2023-06-20T19:00">7:00 PM on June 20, 2023</time>.</p>
Example: Complete Page Layout Using Semantic Elements
Here is an example of a complete web page layout using various HTML semantic elements.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic Elements Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
}
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;
}
figure {
margin: 0;
padding: 0;
}
figcaption {
text-align: center;
font-style: italic;
margin-top: 5px;
}
</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>
<details>
<summary>More Info</summary>
<p>Here are some additional details.</p>
</details>
<figure>
<img src="image.jpg" alt="An example image">
<figcaption>This is a caption for the image.</figcaption>
</figure>
<p>The event will start at <time datetime="2023-06-20T19:00">7:00 PM on June 20, 2023</time>.</p>
<p>Don't forget to <mark>highlight</mark> the important points.</p>
</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.<details>and<summary>: Used to create expandable sections for additional details.<figure>and<figcaption>: Used to display images and their captions.<time>: Represents a date and time.<mark>: Highlights important text.<footer>: Provides footer content, including copyright information.
Conclusion
HTML semantic elements enhance the structure, readability, and accessibility of web pages by providing meaningful tags that describe the content they contain. By using elements like <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, and <time>, you can create well-structured and semantically rich web pages that are easier to understand and navigate for both users and search engines. Understanding and using these semantic elements effectively is crucial for modern web development.