2. HTML Semantic tags
A semantic tag describes its meaning. For example <header>, <section>, <footer>, <form>, <table>, <article>,<nav>… Examples of non-semantic elements (tells nothing about its content): <div> and <span>.
Many web sites contain HTML code like: <div class="header"> <div id="nav"> <div id="section"> <div id="aside"> <div id="footer">. It is so important to change that code and use semantics tags: <header> <nav> <section> <aside> <footer>.
2.1. Semantic tags
| Element | Description |
<nav> | It is used to designate a section of a web page that contains navigation links or menus. |
<article> | It is used to define a self-contained piece of content within a web page. It can contain various types of content, including text, images, videos, or other multimedia elements. |
<section> | It defines sections of a web page. Each section typically represents a distinct thematic or conceptual grouping of content. |
<aside> | It is often used for elements such as sidebars, advertisements, author information, related links, or other content that is not directly part of the main content flow but provides additional context or enhancements to the page. |
<h1> <h2> <h3> <h4> <h5> <h6> | They are used to define headings in HTML. These headings represent the hierarchical structure of the content on a web page, with <h1> being the highest level of importance and <h6> being the lowest. It is important to have only one <h1> heading per document. |
<header> | The <header> element defines the header section of a web page or a specific section within a document. It is typically used to encapsulate introductory content or the topmost part of a web page, such as the site logo, navigation menu, page title, or any other relevant information that appears at the top of the page. |
<footer> | It defines the footer section of a web page or a specific section within a document. It is commonly used to provide additional information, copyright notices, contact details, or navigation links that appear at the bottom of a page. |
<address> | It is used to define a section that contains contact information. It is typically used to provide details such as the physical address, phone number, email address, or other contact information. |
<main> | It represents the primary content area of a web page, excluding any headers, footers, sidebars, or navigation elements. According to the HTML specification, there should be only one <main> element per document. |
2.2. Advantages of using semantic tags
The are several advantages of using semantic tags in HTML:
- It helps the search engines and other user devices to determine the importance and context of web pages. It is important for SEO (Search Engine Optimization).
- It is much easier to read.
- It has greater accessibility.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Web title</title>
<meta charset="UTF-8">
<meta name="title" content="Web Title">
<meta name="description" content="Web description">
<link href="style.css" rel="stylesheet">
<style>
header{background-color:yellow;} /* CSS Code */
</style>
<script src="script.js"></script>
<script type="text/javascript">
/* JS Code */
</script>
</head>
<body>
<header>
<h1>Title</h1>
</header>
<nav>
<a href="#">Go to section 2</a>
<a href="#">Go to section 3</a>
</nav>
<section>
<article>
<h2>Heading</h2>
<p>Content</p>
</article>
</section>
<aside>
<h3>Testimonials</h3>
<p>I love this page.</p>
</aside>
<footer>
<h4>Social network</h4>
<a href="#">Facebook</a>
<a href="#">Twitter</a>
</footer>
</body>
</html>
CodePen example
Exercise
Test