Semantic elements in HTML are tags that carry meaning about the structure and content of the document. They provide information about the role of the enclosed content rather than just specifying how the content should be presented. Semantic elements help browsers, search engines, and developers better understand the purpose and context of the content, improving accessibility and SEO.
Here’s an explanation of some key semantic elements:
<header>:- Represents a group of introductory or navigational aids. Commonly used to contain headings, logos, and navigation menus.
- Example:
<header><h1>Your Website Name</h1></header>
<nav>:- Represents a section of navigation links. Typically used to contain a menu or links to different parts of the website.
- Example:
<nav><ul><li><a href="#home">Home</a></li>...</ul></nav>
<section>:- Represents a generic section of content. It groups related content together and typically has a heading.
- Example:
<section id="home"><h2>Welcome to Your Website</h2>...</section>
<article>:- Represents a self-contained piece of content that could be distributed and reused independently, such as a news article or blog post.
- Example:
<article><h2>About Us</h2>...</article>
<aside>:- Represents content that is tangentially related to the content around it, often used for sidebars or content like related links, advertisements, or pull quotes.
- Example:
<aside><h2>Latest News</h2>...</aside>
<footer>:- Represents the footer of a section or a page. Typically contains metadata, copyright information, and links to related pages.
- Example:
<footer>© 2023 Your Website. All rights reserved.</footer>
<main>:- It represents the main content of the document and should be unique within the document. It’s commonly used to encapsulate the primary content of a webpage, excluding headers, footers, and sidebars.
Here’s an example of how the HTML5 semantic elements can be used to create a sample web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Webpage Title</title>
</head>
<body>
<header>
<h1>Your Website Name</h1>
</header>
<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>
<main>
<section id="home">
<article>
<h2>Welcome to Your Website</h2>
<p>This is the home section of your website.</p>
</article>
</section>
<section id="about">
<article>
<h2>About Us</h2>
<p>Learn more about our website and what we do.</p>
</article>
</section>
<!-- More sections can go here -->
</main>
<aside>
<h2>Latest News</h2>
<p>Stay updated with our latest news and announcements.</p>
</aside>
<footer>
<p>© 2023 Your Website. All rights reserved.</p>
</footer>
</body>
</html>
