HTML tags are designed to be semantic, meaning they convey the purpose and structure of the content they encapsulate. When using HTML, it’s crucial to choose tags that accurately represent the meaning of your content. This practice of semantic HTML naturally results in well-structured web pages that are easier for developers to read, write, and maintain. It also helps computers better process and understand web content.

The Importance of Semantic HTML

One of the key functions of HTML tags is to declare the nature of webpage elements. This allows users to understand the significance of each element just by looking at the tags, and to grasp the overall structure of the page by reading the HTML source code. This principle is known as the semantic approach to HTML.
Here’s an example of a typical semantic structure for a webpage:

1
2
3
4
5
6
7
8
9
10
<body>
  <header>Page Header</header>
  <main>
    <article>
      <h1>Article Title</h1>
      <p>Article content</p>
    </article>
  </main>
  <footer>Page Footer</footer>
</body>

Just by looking at this code, you can see that the page is divided into three main sections: a header, main content area, and footer.
When creating an HTML webpage, the first step should be to establish this semantic structure as the skeleton of your page.

Commonly Used Semantic Tags

<header>

The <header> tag is versatile and can be used in multiple contexts. It can represent the header of the entire webpage or the header of a specific article or section.
When used as the webpage header, it’s often referred to as the “page header” and typically contains site navigation and search functionality:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<header>
  <h1>Company Name</h1>
  <nav>
    <ul>
      <li><a href="/home">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
  <form action="/search">
    <input name="q" type="search" />
    <input type="submit" />
  </form>
</header>

When used within an article, it can contain the article title, author information, and other metadata:
1
2
3
4
5
6
<article>
  <header>
    <h2>Article Title</h2>
    <p>By John Doe, published January 1, 2010</p>
  </header>
</article>

Note that while a page can have multiple <header> elements in different contexts, each specific context should only have one. Additionally, a <header> should not contain another <header> or a <footer>.

The <footer> tag represents the footer of a webpage, article, or section. When used for the entire webpage, it’s called the “page footer” and typically contains copyright information or other relevant details:

1
2
3
4
5
<body>
  <footer>
    <p>© 2024 XYZ Company</p>
  </footer>
</body>

It can also be used within articles:
1
2
3
4
5
6
7
8
<article>
  <header>
    <h1>Article Title</h1>
  </header>
  <footer>
    <p>© All rights reserved</p>
  </footer>
</article>

Like <header>, <footer> cannot be nested within another <footer> or contain a <header>.

<main>

The <main> tag represents the primary content of the page. There should only be one <main> element per page:

1
2
3
4
5
6
7
8
<body>
  <header>Page Header</header>
  <main>
    <article>Main Content</article>
  </main>
  <aside>Sidebar</aside>
  <footer>Page Footer</footer>
</body>

<main> is a top-level tag and should not be placed within <header>, <footer>, <article>, <aside>, <nav>, or similar tags. Functional elements like search bars should not be included in <main> unless the current page is specifically a search page.

<article>

The <article> tag represents a self-contained piece of content that would make sense on its own, even if the rest of the page didn’t exist. It’s typically used for blog posts, news articles, or forum posts:

1
2
3
4
<article>
  <h2>Article Title</h2>
  <p>Article content goes here...</p>
</article>

A webpage can contain multiple <article> elements.

<aside>

The <aside> tag is used for content that is tangentially related to the main content of the webpage or article. At the page level, it’s often used for sidebars (though it doesn’t necessarily have to be positioned on the side of the page). Within an article, it can be used for supplementary information, comments, or footnotes:

1
2
3
4
<body>
  <main>Main Content</main>
  <aside>Sidebar Content</aside>
</body>

Example of an article-level aside:
1
2
3
4
<p>First paragraph</p>
<aside>
  <p>This paragraph is a key point of the article.</p>
</aside>

<section>

The <section> tag represents a thematically distinct part of a document, typically used to divide an article into chapters or major sections:

1
2
3
4
5
6
7
8
9
10
11
<article>
  <h1>Article Title</h1>
  <section>
    <h2>Chapter 1</h2>
    <p>...</p>
  </section>
  <section>
    <h2>Chapter 2</h2>
    <p>...</p>
  </section>
</article>

<section> elements are typically used in groups; a page shouldn’t have just one <section>. They’re also well-suited for slide presentations, where each <section> represents a slide.

Generally, each <section> should have a heading (h1-h6). Multiple <section> elements can be placed within an <article>, and a <section> might contain multiple <article> elements, depending on the context and meaning in the current page.

<nav>

The <nav> tag is used for major navigation blocks on the page:

1
2
3
4
5
6
7
<nav>
  <ul>
    <li><a href="item-a">Product A</a></li>
    <li><a href="item-b">Product B</a></li>
    <li>Product C</li>
  </ul>
</nav>

Typically, <nav> is placed within <header> rather than <footer>. A page can have multiple <nav> elements, such as one for site navigation and another for in-page navigation.

<h1> to <h6>

HTML provides six tags for representing article headings, organized into six levels based on their hierarchy:

  1. <h1>: Heading 1 (highest level)
  2. <h2>: Heading 2
  3. <h3>: Heading 3
  4. <h4>: Heading 4
  5. <h5>: Heading 5
  6. <h6>: Heading 6 (lowest level)

<h1> represents the highest-level heading, while <h6> is the lowest. Each subsequent heading level serves as a subheading to the one above it. For example, an <h1> can be followed by multiple <h2> headings, and each <h2> can have multiple <h3> headings beneath.

1
2
3
4
5
6
7
8
<body>
  <h1>Introduction to JavaScript</h1>
    <h2>Overview</h2>
    <h2>Basic Concepts</h2>
      <h3>Webpages</h3>
      <h3>Links</h3>
    <h2>Main Uses</h2>
</body>

The code above clearly outlines the structure of the article through its section titles. The detailed content can be written under these section titles.

Headings should not skip levels (e.g., from h1 to h3) as this disrupts the document’s structure. Browsers typically display headings in bold, with decreasing font sizes from h1 to h6.

<hgroup>

The <hgroup> tag is used to group multiple levels of headings, such as when you have a main title with one or more subtitles:

1
2
3
4
5
<hgroup>
  <h1>Main Title</h1>
  <h2>Subtitle 1</h2>
  <h2>Subtitle 2</h2>
</hgroup>

Note that <hgroup> should only contain <h1>-<h6> elements, not other types of content.