HTML Semantic Elements
Semantic elements are elements with a meaning. They clearly describe their meaning to both the browser and the developer.
What are Semantic Elements?
Examples of non-semantic elements: <div> and <span> - They tell nothing about their content.
Examples of semantic elements: <form>, <table>, and <article> - They clearly define their content.
Non-semantic vs. Semantic
html
<!-- Non-semantic example -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main-content">...</div>
<div class="footer">...</div>html
<!-- Semantic example -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>HTML5 Semantic Elements
HTML5 offers a set of new semantic elements to define different parts of a web page, which makes the web more accessible and improves SEO.
Example: <section>
The <section> element defines a thematic grouping of content.
html
<section>
<h2>WWF</h2>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment.</p>
</section>Example: <article>
The <article> element specifies independent, self-contained content, like a blog post or news story.
html
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>Test Yourself with an Exercise
Which element is used to define a set of navigation links?