HTML Semantic Elements
Semantic HTML elements clearly describe their meaning in a human- and machine-readable way. These elements provide better structure and accessibility for web pages, making it easier for search engines and assistive technologies to understand the content.
1. The <header> Element
The <header> element represents introductory content or a set of navigational links for a section or page.
Example:
<header>
<h1>Welcome to 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>2. The <nav> Element
The <nav> element defines a set of navigation links.
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>3. The <main> Element
The <main> element represents the dominant content of the document.
Example:
<main>
<h2>Main Content</h2>
<p>This is the main section of the web page.</p>
</main>4. The <section> Element
The <section> element defines a section in a document, typically with a heading.
Example:
<section>
<h2>Section Title</h2>
<p>Section content goes here.</p>
</section>5. The <article> Element
The <article> element represents a self-contained piece of content that can be independently distributed.
Example:
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>6. The <aside> Element
The <aside> element represents content that is tangentially related to the main content.
Example:
<aside>
<p>Related content or advertisements can go here.</p>
</aside>7. The <footer> Element
The <footer> element represents footer content for its nearest sectioning content or sectioning root element.
Example:
<footer>
<p>Website Footer</p>
</footer>8. The <figure> and <figcaption> Elements
The <figure> element represents self-contained content, such as images, diagrams, or code snippets, and the <figcaption> element represents a caption for the <figure> element.
Example:
<figure>
<img src="image.jpg" alt="A description of the image">
<figcaption>This is an image caption.</figcaption>
</figure>Conclusion
HTML semantic elements provide meaningful structure to your web pages. They enhance readability, accessibility, and search engine optimization by clearly defining different parts of the content. Using these elements correctly will result in well-structured and easier-to-maintain web pages.