HTML5 introduced several new semantic elements to provide clearer structure and meaning to web documents. These elements help developers create well-organized and accessible websites. Here are some of the key semantic elements in HTML5:
1. **`<header>`:**
– Defines a header section at the top of a document or section.
– Typically contains introductory content, such as a logo, site navigation, or heading.
– Example:
“`html
<header>
<h1>Website Name</h1>
<nav>
<!– Navigation links –>
</nav>
</header>
“`
2. **`<nav>`:**
– Defines a navigation section containing links to other pages or sections within the website.
– Helps users navigate between different parts of the website.
– Example:
“`html
<nav>
<ul>
<li><a href=”/”>Home</a></li>
<li><a href=”/about”>About</a></li>
<li><a href=”/contact”>Contact</a></li>
</ul>
</nav>
“`
3. **`<main>`:**
– Defines the main content area of the document.
– Contains the primary content of the webpage, excluding header, footer, and navigation sections.
– Example:
“`html
<main>
<article>
<!– Main content articles –>
</article>
<aside>
<!– Sidebar content or supplementary information –>
</aside>
</main>
“`
4. **`<section>`:**
– Defines a thematic grouping of content within a document.
– Represents a standalone section that can be used to organize related content.
– Example:
“`html
<section>
<h2>Section Title</h2>
<p>Section content…</p>
</section>
“`
5. **`<article>`:**
– Represents a self-contained piece of content that can be independently distributed or reused.
– Can include blog posts, news articles, forum posts, comments, etc.
– Example:
“`html
<article>
<h2>Article Title</h2>
<p>Article content…</p>
</article>
“`
6. **`<aside>`:**
– Defines content that is tangentially related to the content around it, often presented as a sidebar or callout box.
– Typically contains supplementary information, related links, or advertisements.
– Example:
“`html
<aside>
<h3>Related Links</h3>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
</ul>
</aside>
“`
7. **`<footer>`:**
– Defines a footer section at the bottom of a document or section.
– Typically contains copyright information, contact details, or other relevant information.
– Example:
“`html
<footer>
<p>© 2024 Website Name. All rights reserved.</p>
</footer>
“`
Using these semantic elements appropriately helps improve the accessibility, search engine optimization (SEO), and maintainability of web documents, while also providing a clearer structure for developers and users alike.