1. <header> Element:
The <header> element represents introductory content or a group of introductory content in a document or section of a document. It typically contains headings, logos, navigation menus, and other elements related to the document or section.
Example:
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
2.
<footer> Element:
The <footer> element represents a footer for its nearest sectioning content or the root element. It typically contains information about the author, copyright notices, contact information, and links to related content.
Example:
<p>© 2022 Website Name. All rights reserved.</p>
<nav>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
</ul>
</nav>
</footer>
3. <nav> Element:
The
<nav> element represents a section of a page that links to other pages or to parts within the page. It's commonly used to define navigation menus, such as primary navigation, secondary navigation, or breadcrumb navigation.Example:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
4. <article> Element:
The <article> element represents a self-contained piece of content that can be independently distributed or reused, such as a blog post, news article, forum post, or comment.
Example:
<h2>Blog Post Title</h2>
<p>Content of the blog post...</p>
<footer>
<p>Posted by John Doe | January 1, 2022</p>
</footer>
</article>
5. <section> Element:
The <section> element represents a generic section of a document or application. It's often used to group related content together, such as chapters, headers, footers, or any other thematic grouping of content.
Example:
<h2>Section Title</h2>
<p>Content of the section...</p>
</section>
6.
<aside> Element:
The <aside> element represents content that is tangentially related to the content around it, such as sidebars, pull quotes, advertisements, or related links.
Example:
<h3>Related Links</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</aside>
Significance of Semantic Elements:
- Accessibility: Semantic elements improve the accessibility of web content by providing structure and meaning to assistive technologies like screen readers.
- SEO (Search Engine Optimization): Search engines can better understand the content and context of web pages when semantic elements are used, potentially improving search engine rankings.
- Readability and Maintainability: Semantic markup makes code more readable and maintainable by clearly indicating the purpose of each element.
- Future-Proofing: Semantic elements help future-proof websites by ensuring compatibility with evolving web standards and technologies.
Practice Excercise Practice now