Mastering HTML Semantic Tag [with Examples]

Updated on 30/01/2025460 Views

Table of Content

A semantic element might not seem very important in web development at first glance but they help in a lot of ways. With the introduction of HTML5, the usage of semantic elements is an industry-standard. HTML semantic elements help convey information to the browser and do much more.

Being a web developer, I use HTML semantic elements all the time when coding my projects. In this tutorial, I will teach you how you can implement them in your projects as well.

What is HTML Semantic Element?

HTML Semantic tags are HTML components that convey information about the text they contain. They add structural context to the material, making it easier for browsers, search engines, and assistive technologies to read and deliver it correctly.

Let me give you a real-life analogy to help explain why you should use HTML semantic elements. Using HTML semantic elements is similar to speaking to web browsers and search engines in their language. It's similar to wearing nice clothes to a big part. It does not change who you are, but it makes a nice impression and helps you stand out. It is almost like giving browsers a secret handshake and giving them a heads-up that our website is better than the others.

Now let me give you the list of commonly used HTML semantic tags. The list includes.

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
<figure>
<figcaption>
<time>
<address>
<blockquote
<cite>
<em>
<strong>
<mark>
<code>
<pre>
<ul>
<ol>
<li>
<dl>
<dt>
<dd>
<table>
<tr>

These tags help to arrange content semantically, making webpages more accessible, SEO-friendly, and manageable. Now let us know about each element more thoroughly with the help of semantic tags examples.

HTML <header> and <footer> element

First, let me talk about the header element. The <header> element is the introduction or navigational portion of a webpage. It usually includes headings, logos, navigation menus, search bars, and other components that add context and navigation options to the page.

Now let us come to the footer element. The <footer> element is the final or bottom area of a webpage. It usually includes terms and conditions, copyright information, contact information, legal notices, and other content that applies to the entire page or website.

Let me show an example to explain both the semantic element.

Code:

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Header and Footer Element example </title>
</head>
<body>
<header>
<h1> Header of the web page </h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<footer>
<h1>Footer of the web page</h1>
<p> Example Content for the footer of the website </p>
</footer>

In the above example, I have declared a header element with a heading and a navbar element. The navbar element has links to a home page, about page, and contact page. After that, I have inserted a footer element. Inside there is a heading declaring that it is the footer of the web page.

HTML <section> element

Let me talk about the HTML section element now. The <section> element is an HTML semantic tag that defines a segment or thematic grouping of material within a webpage. It is often used to split a web page's content into distinct sections that are connected but can stand on their own.

Let me explain with the help of a semantic HTML example.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example Page</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#"> Content a </a></li>
<li><a href="#"> Content b </a></li>
<li><a href="#"> Content c </a></li>
<li><a href="#"> Content d </a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2> Section 1s</h2>
<p>Welcome to our website! This is an example website for section element in HTML. </p>
</section>
<section>
<h2> Section 2 </h2>
<ul>
<li> Content 1 </li>
<li> Content 2 </li>
<li> Content 3 </li>
</ul>
</section>
</main>
</body>
</html>

In the above example, I have used <section> to create two sections within the main content area of the webpage: "Section 1" and "Section 2." This helps to organize the content and provide a clear structure.

HTML <article> element

Let me talk a little about the HTML article element. The <article> element in HTML defines a self-contained chunk of content within a webpage. It is commonly used for content that can be spread or reused independently, such as blog posts, news articles, forum postings, product listings, and so on.

Let me demonstrate with the help of an example.

Code:

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Article Example Website </title>
</head>
<body>
<header>
<h1>My Example Website for Article element </h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2> Example Content 1</h2>
<p>Example Content 2</p>
</header>
<p>Example Content 3 </p>
<footer>
<p>Example Content 4</p>
</footer>
</article>
<article>
<header>
<h2>Example Content 5 </h2>
<p>Example Content 6 </p>
</header>
<p>Example Content 7 </p>
<footer>
<p>Example Content 8</p>
</footer>
</article>
</main>
</body>
</html>

In this example, we've used <article> to define two independent articles within the main content section of the webpage. Each <article> includes a <header>, main text, and a <footer> (metadata or related information). This semantic HTML structure helps arrange the material and differentiates between different articles on the page.

HTML <nav> element

The HTML nav element is pretty self explanatory. The <nav> element in HTML provides a navigation menu or area within a webpage. It is mostly used for creating navigation links that allow users to move between different pages or sections of a website.

Let me share an example of an HTML <nav> element.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Navigation Example in HTML </title>
</head>
<body>
<header>
<h1> Nav element example Website in HTML </h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2> Example main content for the website. </h2>
<p> This is the main content area of the webpage. </p>
</main>
<footer>
<nav>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#"> Other details </a></li>
</ul>
</nav>
</footer>
</body>
</html>

In this example, the <nav> element is used in the <header> and <footer> sections to build navigation menus for the top and bottom of the webpage. Each <nav> has an unordered list <ul> with navigation links <li> within it. This layout helps the website show a clear presentation of navigation links to users and search engines.

HTML5 Semantic Elements

The new HTML5 syntax brought a lot of new features and regulations. It also brought new semantic tags in HTML5. Here let me share the new tags added in HTML5.

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
<figure>
<figcaption>
<time>
<address>
<details>
<summary>

In Conclusion

In Conclusion, HTML semantic elements are very helpful. They help with improving the SEO, and overall structure of web pages. Using HTML semantic components such as <header>, <nav>, and <main> allows us to create more meaningful and ordered web pages that are easier for users and search engines to navigate and understand. This tutorial has taught you basic HTML semantic elements that you can implement in your future projects.

To learn more concepts of HTML and web development, I would suggest doing a certified course from a reputed platform. One such platform that I would personally suggest is upGrad. Their courses are curated by some of the best professors. The courses are in collaboration with some of the best universities around the world.

Frequently Asked Questions

What is HTML semantics?

HTML semantic is the practice of using HTML tags to provide meaning to the content of a webpage. It's all about selecting the appropriate tags so that search engines, screen readers, and other tools can grasp your content's structure and purpose.

Why are HTML semantics important?

HTML semantic elements are useful because they give meaning and structure to web content, making it more accessible to users, increasing search engine rankings, and assuring compatibility with diverse devices and technologies.

What are some examples of semantic HTML elements?

Examples of HTML semantic elements include <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, <figure>, <figcaption>, <details>, <summary>, <time>, <address>.

How do semantic elements differ from non-semantic elements?

HTML semantic elements convey meaning about the text, allowing browsers, search engines, and other devices to better understand the content's structure better. Non-semantic elements, on the other hand, have no inherent significance and are usually used for styling or layout purposes.

Can I style semantic elements with CSS?

Yes, you may use CSS to style semantic elements in the same way that you would non-semantic components. Browsers provide default styling for semantic components, but you can change or apply extra styles using CSS classes, IDs, or inline styles. This allows you to keep the semantic structure of your HTML while changing the appearance of your website.

What is HTML5 semantic structure?

HTML5 semantic structure uses new HTML elements that it introduced such as <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> to create an organized layout for web content. These components improve the accessibility, SEO, and overall organization of a webpage.

What is the semantic HTML main tag?

HTML5 semantic structure uses HTML elements such as <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> to create an organized layout for web content. These components improve the accessibility, SEO, and overall organization of a webpage.

How to test semantic HTML?

You can test HTML semantic elements by inspecting the page structure with browser developer tools, checking for proper nesting and usage of semantic elements, performing accessibility audits with tools like Lighthouse or Axe, and testing with screen readers to ensure content is presented logically and meaningfully to users with disabilities.

Is semantic HTML better?

Yes, HTML semantic elements are often preferred since they increase accessibility, search engine optimization (SEO), readability of code and reliability, and compatibility with various devices and technologies. It also makes web content more structured and meaningful, which benefits both consumers and developers.