HTML Semantic Elements
Semantic elements are elements with a meaning.
What are Semantic Elements?
A semantic element clearly describes its meaning to both the browser and the developer. Non-semantic elements like <div> and <span> tell nothing about their content, while semantic elements like <img>, <table>, and <article> clearly define theirs.
Semantic Elements in HTML
Many sites use generic markup like a div for navigation, header, and footer. HTML has semantic elements for these parts instead: <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, and <time>.
HTML <section> Element
The <section> element defines a section in a document. Bootstrap describes a section as a thematic grouping of content, usually with a heading, such as chapters, an introduction, news items, or contact information.
Example
Two sections in a document.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Section Element</title>
</head>
<body>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
</body>
</html>
HTML <article> Element
The <article> element holds independent, self-contained content that should make sense on its own and could be distributed separately, such as forum posts, blog posts, user comments, product cards, or newspaper articles.
Three articles
Three self-contained articles about browsers.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Article Element</title>
</head>
<body>
<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>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</body>
</html>
Styled with CSS
Nested articles styled with CSS.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers > h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2, p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>Most Popular Browsers</h1>
<article class="browser">
<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>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
Nesting <article> in <section> or Vice Versa?
The <article> element holds independent, self-contained content, and the <section> element defines a section. Can the definitions tell you how to nest them? No. You will find pages with <section> elements containing <article> elements, and the other way around.
HTML <header> Element
The <header> element is a container for introductory content or a set of navigation links. It usually holds one or more headings, a logo or icon, and authorship information.
Note: You can have several <header> elements in one document, but a <header> cannot go inside a <footer>, <address>, or another <header>.
Example
A header inside an article.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Element</title>
</head>
<body>
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>
</article>
</body>
</html>
HTML <footer> Element
The <footer> element defines a footer for a document or section. It usually holds authorship, copyright, and contact information, a sitemap, back-to-top links, or related documents. You can have several <footer> elements in one document.
Example
A footer with authorship and contact info.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Element</title>
</head>
<body>
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>
</body>
</html>
HTML <nav> Element
The <nav> element defines a set of navigation links. Not every link belongs in a <nav>; it is meant only for major blocks of navigation. Screen readers can use it to decide whether to skip this content at first.
Example
A set of navigation links.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav Element</title>
</head>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>
HTML <aside> Element
The <aside> element holds content set apart from the content around it, like a sidebar. It should be only indirectly related to the surrounding content.
Basic aside
An aside next to a paragraph.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aside Element</title>
</head>
<body>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
</body>
</html>
Styled with CSS
An aside styled as a floated sidebar.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
</body>
</html>
HTML <figure> and <figcaption> Elements
The <figure> tag holds self-contained content like illustrations, diagrams, photos, or code listings. The <figcaption> tag gives a caption for the figure, placed as its first or last child, and the <img> element is the actual image.
Example
An image with a figure caption.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Figure Element</title>
</head>
<body>
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
</body>
</html>
Why Semantic Elements?
According to the Bootstrap, a semantic web lets data be shared and reused across applications, enterprises, and communities. Semantic elements help describe the meaning of content rather than just its appearance.
Semantic Elements in HTML
Some semantic elements and what they do: <article> (independent content), <aside> (content aside from the page), <details> (details the user can show or hide), <figcaption> (a caption for a figure), <figure> (self-contained content like a photo), <footer> (a footer), <header> (a header), <main> (the main content), <mark> (marked text), <nav> (navigation links), <section> (a section), <summary> (a heading for details), and <time> (a date or time).