Semantic Elements in HTML5
Semantic elements clearly define their purpose on the website making it easier to understand the markup for both the browser and the developers.
Semantic elements are one of the most significant introductions in HTML5. In the previous versions of HTML, the generic <div> tag with an id or class attribute was used for structuring a web page. For example, for defining sidebars, footers, menu or other structural blocks, the <div> tag was used with the corresponding meaning (div class="footer").
Semantic elements in HTML have intrinsic meaning and convey that meaning both to the browser and the developer. They clearly define what kind of content they contain (for example, the <footer> tag is used instead of <div id="footer">). They also help improve accessibility and make the markup easier for search engines to understand.
This page covers the structural (page-layout) semantic elements you will use to build the skeleton of almost every web page — <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> — plus a few content-level semantic tags. It also shows how these elements map to ARIA landmarks, which is the real reason they matter for accessibility.
Let’s have a look at semantic elements and their meaning.
A full semantic page layout
Before looking at each element on its own, it helps to see how they fit together. The structural elements nest in a predictable way: a <header> and <footer> wrap the page, a single <main> holds the primary content, and inside it an <article> can sit next to a related <aside>. Navigation lives in <nav>.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic page layout</title>
</head>
<body>
<header>
<h1>The Daily Markup</h1>
<nav>
<a href="/">Home</a> |
<a href="/articles">Articles</a> |
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>Why semantic HTML matters</h2>
<p>Semantic elements describe the role of the content they wrap,
which helps browsers, search engines and assistive technology.</p>
</article>
<aside>
<h2>Related reading</h2>
<ul>
<li><a href="/articles/headings">Heading structure</a></li>
<li><a href="/articles/landmarks">ARIA landmarks</a></li>
</ul>
</aside>
</main>
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>The rest of this page explains each element in turn.
Semantic elements and ARIA landmarks
The biggest practical benefit of structural semantic elements is accessibility. Screen-reader users do not scroll a page top to bottom — they jump between landmarks. Many structural elements expose an implicit ARIA landmark role automatically, so you get this for free just by using the right tag (no role attribute needed):
| Element | Implicit landmark role | Notes |
|---|---|---|
<header> (direct child of <body>) | banner | Site-wide header. A <header> inside <article>/<section> is not a landmark. |
<nav> | navigation | Label multiple navs with aria-label so they are distinguishable. |
<main> | main | Use only one per page. |
<aside> | complementary | Content related to, but separable from, the main content. |
<footer> (direct child of <body>) | contentinfo | Site-wide footer (copyright, contact, etc.). |
Because of this, replacing <div class="header"> with <header> is not just tidier markup — it makes the page navigable to people using assistive technology.
The <header> element
The <header> element defines a header for the document or section. It usually contains a logo, search bar, navigation links, etc.
Example of the HTML <header> element
Example of the HTML header of the page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li {
display: inline-block;
margin-right: 10px;
color: #778899;
}
</style>
</head>
<body>
<header>
<nav>
<ul style="padding:0;">
<li>Home</li>
<li>About us</li>
</ul>
</nav>
<h1>Welcome to our page</h1>
<hr />
</header>
<article>
<header>
<h2>Title of the document</h2>
<p>The content of the paragraph.</p>
</header>
</article>
</body>
</html>The <nav> element
The <nav> element defines a block of navigation links, either within the current document or to other documents. Note that not all links in the HTML document can be placed inside the <nav> element; it can only include major navigation blocks. For example, the <nav> tag can also be placed in the <footer> tag for defining links in the footer of the website.
Example of the HTML <nav> element
Example of the nav element of the page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<header>
<h1>Programming Courses</h1>
</header>
<nav>
<a href="/learn-html.html">HTML</a> | <a href="/learn-css.html">CSS</a> | <a href="/learn-javascript.html">JavaScript</a> | <a href="/learn-php.html">PHP</a> |
</nav>
<h2>Welcome to W3Docs!</h2>
</body>
</html>The <article> element
The <article> element is used to specify an independent, self-contained content (articles, blog posts, comments, etc.). The content of the element has its meaning, and it is easily differentiated from the rest of the webpage content.
Example of the HTML <article> element
Example of the article element of the page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<article>
<h1>Title of the article</h1>
<p>Text of the article</p>
</article>
</body>
</html>The <section> element
The <section> element is used to group standalone sections within a webpage containing logically connected content (news block, contact information etc.).
Example of the HTML <section> element
Example of the section element of the page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Using the section tag</title>
</head>
<body>
<section>
<h1>Hypertext markup language HTML</h1>
<p>HTML is the standard markup language for creating web pages and web applications. Browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
</section>
<section>
<h1>CSS</h1>
<p>A formal language that is used as a description zone, formatting the appearance of a web page written with the help of markup languages HTML and XHTML but it can be applied to any XML-document, for example, to SVG or XUL.</p>
</section>
</body>
</html><section> vs <article>
These two elements are easy to confuse. A quick rule of thumb:
- Use
<article>when the content is self-contained and independently distributable — it would still make sense on its own, out of context (a blog post, a news story, a product card, a single user comment). If you could imagine it being syndicated to an RSS feed, it’s an<article>. - Use
<section>for a thematic grouping of related content that is part of something larger and is not meaningful on its own. A<section>should almost always start with a heading (<h2>–<h6>) that names the group.
When neither applies — you only need a styling or layout wrapper with no semantic meaning — reach for a plain <div> instead.
The <aside> element
The <aside> element defines a section with additional information related to the content around the <aside> element. It is generally used to enhance an article with additional information, or highlight the parts that can be interesting to the user.
Example of the HTML <aside> element
Example of the aside element of the page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>I like watching Game of Thrones.</p>
<aside>
<h4>Game of Thrones</h4>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
</aside>
</body>
</html>The <footer> element
The <footer> element defines the footer of a web page or a section. As a rule, it contains copyright information, contact details, navigation links, etc.
Example of the HTML <footer> element
Example of the footer element of the page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
header {
height: 40px;
padding: 20px 20px 0;
background: #e1e1e1;
}
main {
height: 60vh;
padding: 20px;
}
footer {
padding: 10px 20px;
background: #666;
color: white;
}
a {
color: #00aaff;
}
</style>
</head>
<body>
<header>Header / Menu</header>
<main>
<h1>Main content</h1>
<p>This is some paragraph. </p>
</main>
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>The <address> element
The <address> element provides contact information for its nearest <article> ancestor, or for the whole document when it is a child of <body>. It is meant for contact details (the author or owner of the article or site) — not for arbitrary postal addresses that are simply part of the content.
Example of the HTML <address> element
Example of the address element of the page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<address>
Author: W3docs Team<br />
<a href="mailto:[email protected]">Send Mail to the Author</a>
</address>
</body>
</html>Demo: Send Mail to the Author
The <main> element
The <main> element defines the main content of the page. The content of the <main> tag must be unique and not duplicate blocks of the same type that are repeated in other documents, such as the header of a site, footer, menu, search, copyright information, etc.
Example of the HTML <main> element
Example of the main element of the page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<main>
<h1>Programming languages</h1>
<p>Languages HTML and CSS are intended for site layout.</p>
<article>
<h2>HTML</h2>
<p> HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages. </p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>CSS</h2>
<p>CSS is a language of styles, defining the display of HTML documents. </p>
<p>... </p>
</article>
</main>
</body>
</html>The <figure> element
The <figure> element is used for indicating self-contained content. The tag can include images, diagrams, illustrations, code examples, etc.
Example of the HTML <figure> element
Example of the figure element of the page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A cute baby</p>
<figure>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
</figure>
</body>
</html>The <figcaption> element
The <figcaption> element is used for adding signature or annotation to the <figure> tag.
Example of the HTML <figcaption> element
Example of the figcaption element of the page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Image of a baby</p>
<figure>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
<figcaption>Fig.1 – Cute baby</figcaption>
</figure>
</body>
</html>Content-level semantic elements
The elements above describe the structure of a page. The following tags add meaning at the text level — they mark up small pieces of content inside a paragraph rather than laying out the page. They are not landmarks and do not affect page structure.
The <time> element
The <time> element defines a human-readable time on a 24-hour clock or a precise date in the Gregorian calendar.
Example of the HTML <time> element
Example of the time element of the page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>The game will be held on<time datetime="2018-09-28 19:00">September 28</time>.</p>
<p>It will start at <time>19:00</time></p>
</body>
</html>The <mark> element
The <mark> element is used to mark a part of the text which has relevance. It can be used to highlight a text for showing emphasis, highlight search terms in search results to provide context, or distinguish a new content added by the user by showing it differently.
Example of the HTML <mark> element
Example of the mark element of the page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
</body>
</html>The <bdi> element
The <bdi> element is used to isolate bidirectional text when a language with a right-to-left directionality, such as Arabic or Hebrew, is used inline with left-to-right languages.
Example of the HTML <bdi> element
Example of the bdi element of the page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1> Example of using the bdi element </h1>
<p dir="ltr"><bdi>أرمينيا جميلة</bdi> This sentence in Arabic is automatically displayed from right to left.</p>
</body>
</html>The <wbr> element
The <wbr> tag is used to instruct the browser where a line-break could be added in the text. Unlike the <br> tag, which obliges the browser to insert a line-break, in the case of <wbr> the browser first analyzes its content, and then inserts a line-break if necessary (too long word or URL address).
Example of the HTML <wbr> element
Example of the wbr element of the page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Example of a long string of text without wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</p>
<p>Example of a long string of text with wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumono<wbr />ultra<wbr />micro<wbr />scopic<wbr />silico<wbr />volcano<wbr />coniosis</p>
</body>
</html>