Semantic tags (also known as HTML5 semantic tags) are a set of HTML tags introduced in HTML5 that allow developers to more accurately describe the relationship between HTML elements on a webpage. For example, instead of using div tags to group elements we can use header, nav or section tags depending on what specific type of group of elements we are trying to make.
Why are semantic tags important?
Using semantic tags does not change the appearance of the website in the browser. So why is it important to use semantic tags? Quite simply, semantic tags more accurately describe the content that is on the page. Describing the contents of the page more semantically can have many benefits, such as:
- Making code easier for people to navigate when updating features or fixing bugs.
- Giving your page a higher Search Engine Optimization (SEO) score, which makes your content more visible on search engines.
- Allowing users with special needs to access your website using alternative means such as screen readers, which are devices that read the contents of a webpage aloud to users who have visual impairments.
Identify different parts of a typical website :
In addition to defining individual parts of your page (such as “a paragraph” or “an image”), HTML also boasts a number of block-level elements used to define areas of your website (such as “the header”, “the navigation menu”, “the main content column”).
To implement such semantic mark up, HTML provides dedicated tags that you can use to represent such sections, for example:
- header:
<header>. - navigation bar:
<nav>. - main content:
<main>, with various content subsections represented by<article>,<section>, and<div>elements. - sidebar:
<aside>; often placed inside<main>. - footer:
<footer>.
HTML layout elements in more detail:
It’s good to understand the overall meaning of all the HTML sectioning elements in detail — this is something you’ll work on gradually as you start to get more experience with web development.
<main>is for content unique to this page. Use<main>only once per page, and put it directly inside<body>. Ideally, this shouldn’t be nested within other elements.<article>encloses a block of related content that makes sense on its own without the rest of the page (e.g., a single blog post).<section>is similar to<article>, but it is more for grouping together a single part of the page that constitutes one single piece of functionality (e.g., a mini map, or a set of article headlines and summaries), or a theme. It’s considered best practice to begin each section with a heading; also note that you can break<article>s up into different<section>s, or<section>s up into different<article>s, depending on the context.<aside>contains content that is not directly related to the main content but can provide additional information indirectly related to it (glossary entries, author biography, related links, etc.).<header>represents a group of introductory content. If it is a child of<body>it defines the global header of a webpage, but if it’s a child of an<article>or<section>it defines a specific header for that section.<nav>contains the main navigation functionality for the page. Secondary links, etc., would not go in the navigation.<footer>represents a group of end content for a page.