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">).
Let’s have a look at semantic elements and their meaning.
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:
<!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 cannot be placed in the <footer> tag for defining links in the footer of the website.
Example of the HTML <nav> element:
<!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:
<!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:
<!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>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:
<!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:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.header {
height: 40px;
padding: 20px 20px 0;
background: #e1e1e1;
}
.main-content {
height: 60vh;
padding: 20px;
}
footer {
padding: 10px 20px;
background: #666;
color: white;
}
a {
color: #00aaff;
}
</style>
</head>
<body>
<div class="header">Header / Menu</div>
<div class="main-content">
<h1>Main content</h1>
<p>This is some paragraph. </p>
</div>
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>The <address> element
The <address> element is used to provide contact information of the author or the owner of an article, document or the website.
Example of the HTML <address> element:
<!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>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:
<!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:
<!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:
<!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>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:
<!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:
<!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:
<!DOCTYPE html>
<html>
<head>
<title>Title of the documnet</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:
<!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>
</p>
</body>
</html>Practice Your Knowledge
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.