Main Tag

Introduction

The <main> tag is a fundamental element in HTML, serving as the primary content area of a webpage. It’s a crucial part of semantic HTML, meaning it provides meaning to the structure of your page, improving accessibility and SEO. Unlike <div> and <span> which are generic container elements, the <main> tag explicitly tells the browser that this section is the main content of the page, allowing it to be properly interpreted by assistive technologies and search engines. Understanding and correctly using the <main> tag is a foundational step in building well-structured and accessible web applications.

The <body> tag contains all the visible content of your webpage – text, images, videos, and other elements. The <main> tag is placed inside the <body> tag. It’s the container for the main content of your page.

<main> Tag Syntax

The basic syntax for the <main> tag is:

<main>
  <!-- Content of the main section -->
</main>

• </main>: This closing tag marks the end of the <main> tag.
• Content within the <main> tag: This is where you place the main content of your page. It can contain text, images, links, and other HTML elements.

Practical Example 1: A Simple Heading

Let's create a simple webpage with a main heading and some introductory text.

<!DOCTYPE html>
<html>
<head>
  <title>Main Tag Example</title>
</head>
<body>

  <main>
    <h1>Welcome to My Website!</h1>
    <p>This is the main content of the page.</p>
  </main>

</body>
</html>

In this example, the <h1> tag is placed inside the <main> tag. The text "Welcome to My Website!" is the main content of the page.

Practical Example 2: A Blockquote

Now, let's add a blockquote to illustrate how the <main> tag can be used to structure content.

<!DOCTYPE html>
<html>
<head>
  <title>Main Tag Example</title>
</head>
<body>

  <main>
    <h1>Welcome to My Website!</h1>

    <p>This page demonstrates the use of the main tag.</p>

    <blockquote>
      “The future belongs to those who believe in the beauty of their dreams.”
      – Eleanor Roosevelt
    </blockquote>
  </main>

</body>
</html>

Here, the <p> tag is placed inside the <main> tag. The quote is a blockquote, providing additional information and context.

Practical Example 3: Using Images

Let's add an image to the page. Remember that images are typically placed within the <body> tag.

<!DOCTYPE html>
<html>
<head>
  <title>Main Tag Example</title>
</head>
<body>

  <main>
    <h1>Welcome to My Website!</h1>
    <p>This is the main content area.</p>

    <img src="https://www.netgramnews.com/NetGram.png" alt="Website Logo" width="200">
  </main>

</body>
</html>

In this example, the <img> tag is placed within the <body> tag. The src attribute specifies the URL of the image. The alt attribute provides alternative text for the image, which is important for accessibility.

💡 Tip: Using the <main> tag for semantic structure

The <main> tag is particularly useful when you want to clearly define the main content of a page. It helps search engines and assistive technologies understand the structure of your content, improving the overall user experience. It’s a good practice to use it consistently throughout your website.

Key Takeaways

• The <main> tag is the primary container for the main content of a webpage.
• It's placed inside the <body> tag.
• It's essential for semantic HTML and accessibility.
• Using the <main> tag correctly improves the structure and SEO of your website.