Semantic elements represent logical sections or components of a web app or document. It tells browsers exactly what an element does and what content should be used within it.
In this example this HTML tag, article. It represents self-contained content:
<article>By using semantic HTML correctly, assistive technology, like a screen reader, can more easily read structures and give better accessibility support.
Semantic HTML elements
HTML5 introduced new semantic elements to represent elements of web pages and documents. Here’s a list of available Semantic elements, new and old:
Structural semantic HTML elements
- <nav>
- <main>
- <header>
- <article>
- <section>
- <footer>
- <aside>
Nav
The nav element is used to define a set of navigation links.
<nav>
<a href="/home">Home</a>
<a href="/about-us">About Us</a>
</nav>Main
The main element represents the main content of the document.
<main>
<h1>What's Trending</h1>
<article>
<p>TV, Media, Social<p/>
</article>
</main>Header
A header is a container for introductory content.
<header>
<h1>Welcome<h1a>
<img src="/img.png" alt="welcome-header" />
</header>Article
An article element represents independent, self-contained content.
<article>
<h3>The Premier Blogger</h3>
<p>This blog is about blogging.</p>
</article>Section
A section defines a section in a document.
<section>
<h2>Search Place</h2>
<p>Find what you're looking for.</p>
</section>Footer
The footer represents the footer or the bottom of a document or section.
<footer>
<p>First</p>
<p>Second</p>
</footer>Aside
An aside defines content that is indirectly related to the main content.
<aside>
<h3>Join Us!</h3>
<p>Learn more about us.</p>
</aside>Heading Elements
- <h1>
- <h2>
- <h3>
- <h4>
- <h5>
- <h6>
Additional Elements
- <figure>
- <figcaption>
- <time>
- <summary>
- <mark>
- <details>
