Now that we have seen div tags in action, let’s take a look at semantic tags. Semantic HTML tags are tags that convey meaning to the browser and help improve the accessibility and SEO of a web page.
Before, we used <div> tags to group every single element on the page. We would just add classes to the <div> tags to style them. Like <div class="header">, <div class="footer">, etc. This is not the best way to structure a web page.
Since HTML5, there are many new semantic tags that we can use to structure our web pages. These tags are more descriptive and provide more context to the browser. This makes it easier, not only for web crawlers, but also us developers, to understand the structure of our web pages.
What are Semantic Tags?#
Semantic tags are HTML tags that describe the content within them. They provide contextual information about the meaning of the content. Strictly speaking, all HTML tags are semantic, as they convey meaning to the browser. However, semantic tags are more specific and descriptive than generic tags.
For example, using a semantic tag like <header> to define the header of a web page provides more context to the browser and assistive technologies than using a generic <div> tag. Even if the content within the <header> tag is visually identical to the content within the <div> tag, and both tags are displayed in the same way, the <header> tag provides more information about the meaning of the content.
Benefits of Using Semantic Tags#
Using semantic tags in HTML has several benefits, including:
Improved Accessibility: Semantic tags help screen readers and other assistive technologies understand the content of a web page, making it more accessible to users with disabilities.
Better SEO: Search engines like Google use semantic tags to understand the content of a web page. Using semantic tags can help improve the visibility and ranking of a web page in search results.
Improved Readability: Semantic tags provide structure and organization to content, making it easier to read and understand.
Examples of Semantic Tags#
Here are some examples of semantic tags and their usage:
<header>: Defines the header of a web page or a section within a web page.<nav>: Defines a section of the page that contains navigation links.<main>: Defines the main content area of a web page.<section>: Defines a section of a web page.<article>: Defines an article or blog post.<aside>: Defines content that is tangentially related to the main content of the page, such as a sidebar or callout box.<footer>: Defines the footer of a web page.
By using semantic tags in HTML, you can improve the accessibility, SEO, and readability of your web pages.
Example#
Let’s take a look at an example of an HTML document that uses semantic tags. Here’s the HTML code for a web page that contains a header, navigation links, a main content area, a sidebar, and a footer. Don’t worry if you don’t understand all of the code yet. We will cover these tags in more detail in the next few lessons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example HTML Page</title>
</head>
<body>
<header>
<h1>Example Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum augue nibh, nec efficitur ipsum blandit quis. Nam sit amet bibendum eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec eu lectus sed velit consequat congue id id velit. Aliquam rutrum libero eget dolor convallis, in feugiat dolor ullamcorper. Donec pharetra faucibus felis. Aliquam euismod elementum nulla, sed congue libero faucibus ut.</p>
</section>
<section>
<h2>Our Services</h2>
<article>
<h3>Web Design</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum augue nibh, nec efficitur ipsum blandit quis. Nam sit amet bibendum eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</article>
<article>
<h3>Web Development</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum augue nibh, nec efficitur ipsum blandit quis. Nam sit amet bibendum eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</article>
<article>
<h3>SEO Optimization</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum augue nibh, nec efficitur ipsum blandit quis. Nam sit amet bibendum eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</article>
</section>
<aside>
<h3>Latest News</h3>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Consectetur adipiscing elit</a></li>
<li><a href="#">Duis vestibulum augue nibh</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 Example Website. All rights reserved.</p>
</footer>
</body>
</html>
Note that in the example above, the <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> tags are used to define the structure of the web page. The <h1>, <h2>, <h3>, <p>, <ul>, and <li> tags are used to define the content of the web page.
Also, did you see that there is a lot of dummy text in some strange language? That’s called Lorem Ipsum, and it’s used as placeholder text when you’re building a web page. You can use it to see how your web page will look without having to write any actual content.
Activity#
If you want to take it a step further, try using the section element instead of the div element to group related content. The section element is specifically designed to group related content that forms a larger section of a web page. Here’s an example of how you could wrap your “About Me” section in a section element:
<section>
<h1>About Me</h1>
<p>Hi, my name is [insert your name here] and I am [insert your age here] years old. I love [insert your hobbies here] and I am currently studying [insert your field of study here].</p>
</section>
Remember, the more you practice using HTML elements like div and section, the more comfortable you will become with web development!