Learn SQL

HTML <main> Tag: Usage and Examples

By Cristian G. Guasch •  Updated: 09/25/23 •  10 min read

As someone who has spent countless hours building websites, I’ve realized the significance of each and every HTML tag. One such element that often doesn’t get the limelight it deserves is the <main> tag. This humble yet powerful HTML element holds a crucial place in semantic markup, helping search engines and assistive technologies understand the structure of your web content.

When I first started my journey into web development, I overlooked the importance of this tag. It’s easy to do so because on face value, it doesn’t seem to add any visual impact to your webpage. However, as I delved deeper into SEO and accessibility, understanding its usage became vital.

So why exactly does this <main> tag matter? Well for starters, it helps improve both SEO and website accessibility by clearly defining where the main content begins. This makes it easier for search engine algorithms and screen readers to interpret your site. And trust me when I say – making your content easily accessible is key in today’s digital world!
Diving right into the world of HTML coding, let’s unravel the mysteries of the <main> tag. This is a semantic element in HTML5 that’s often unnoticed but plays an important role in structuring your webpage layout. It designates the main content or core topic within your document.

If you’re thinking about where to place this tag, it typically goes after navigational links and other header elements but before footers and similar items. The beauty of the <main> tag is it helps web browsers and assistive technologies like screen readers understand where the primary content resides.

Here’s a simple example:

<!DOCTYPE html>
<html>
<head>
  <title>My First Web Page</title>
</head>
<body>

<header>Header Section</header>

<main>
  <h1>Welcome to My Webpage!</h1>
  <p>This is my first webpage using HTML.</p>
</main>

<footer>Footer Section</footer>

</body>
</html>

In this example, you’ll notice that everything under the <main> tag is considered as the main content of our webpage.

Now, there are few things you need to remember when working with this handy <main> tag:

Common mistakes include nesting multiple tags or using them for non-core sections of your page, such as headers or footers. Remember: Keep it simple! The best code isn’t always complex—it’s what communicates its purpose effectively. So next time you’re marking up your main content area, give some thought to our unsung hero—the humble HTML <main> tag!

Attributes of the HTML <main> Tag

Let’s dive into the world of HTML and explore one particular gem – the <main> tag. Now, you might be wondering what’s so special about this unassuming tag. Well, it’s time to unveil its attributes and get a grip on how they can simplify your coding life.

First off, what you need to know is that the <main> tag doesn’t bear any specific attribute of its own. Yes, you heard me right! But don’t let this fact fool you into underestimating its power. This unique characteristic allows it to inherit global attributes common to all HTML tags. So, instead of having some predefined properties like other tags (think <img>, <a>, etc.), our dear friend <main> prefers to keep it general.

Now, let’s examine these inherited attributes more closely:

Here’s how these work with the <main> tag:

<main id="content" class="container" style="margin:auto; width:50%;">
  <h1>Title</h1>
  <p>This is some example text</p>
</main>

In this snippet, I’ve used various global attributes within my main element. There’s an id named ‘content’, a class called ‘container’, and even some inline CSS through the use of style.

But beware of one common pitfall! Avoid using multiple <main> tags in one document as it goes against best practices. HTML5 introduced the <main> tag to mark the dominant content in your document, so there should be only one per page.

So, even though it may not have its own exclusive attributes, the <main> tag proves to be a versatile tool. It’s this flexibility that makes it an essential part of any developer’s toolkit.
Diving right into it, the HTML <main> tag plays a key role in web development. It’s meant to wrap around the main content of your webpage. This doesn’t include elements that are repeated across pages such as navigation links or footers – just the nitty-gritty unique content that changes from page to page.

Here’s a simple example:

<body>
  <header>Website Header</header>

  <nav>Navigation Menu</nav>

  <main>
    Unique Content Specific to Each Page Goes Here
  </main>

  <footer>Website Footer</footer>
</body>

Now, you might be thinking, “What’s the big deal? Why can’t I just toss my content anywhere?” Well, using the <main> tag has some significant benefits. Primarily, it improves accessibility for those using screen readers or other assistive technologies. These tools can identify and interact with the <main> element, enhancing user experience by allowing easy navigation directly to primary content.

Additionally, the <main> tag bolsters SEO (Search Engine Optimization). Search engines give more weight to primary content when indexing your site. So utilizing this tag can help put your site on Google’s radar.

However, remember there should only be one <main> element per page and it should be unique to that document excluding elements shared by other documents within your set of pages such as site header, navigation links and footer. Misuse of this could lead to confusing results for assistive technologies so make sure you’re implementing it correctly!

For instance:

❌ Incorrect Usage:

<main>
    <nav></nav> <!-- Navigation should not be inside main -->
    Hello World! 
</main>

✅ Correct Usage:

<nav></nav> <!-- Navigation goes outside -->
<main>
    Hello World! 
</main>

In conclusion (and without sounding like a broken record), the <main> tag is your friend when it comes to improving both accessibility and SEO of your webpages. So, make good use of it!

Practical Examples: Leveraging the HTML <main> Tag

Diving right into our practical examples, let’s see how we can effectively use the HTML <main> tag. This crucial component gives structure to our web pages and helps search engines understand content priority.

Taking an example of a simple webpage layout, you’ll generally find elements like headers, footers, navigation bars, sidebars and of course, the main content area. Here’s where our <main> tag comes in handy. It’s designated for the unique content of a document that stands apart from repeated site-wide components. To illustrate this:

<!DOCTYPE html>
<html>
<head>
  <title>My Simple Page</title>
</head>
<body>
  <header>...</header>
  <nav>...</nav>
  <aside>...</aside>

  <!-- The main unique content -->
  <main id="content">
    ...
   </main>

   <footer>...</footer>
</body>
</html>

In this basic outline above, we’ve encapsulated our primary distinct content within the <main> tags represented by ....

Keep in mind that there should be only one <main> element per page and it should be unique to the document, excluding site-wide navigational links or header information. Also bear in mind that it doesn’t have any specific attributes tied to it.

Common mistakes include using multiple <main> tags on a single page or including repeated elements within it like headers or navigation menus which dilutes its purpose.

As developers continue working with semantic HTML5 elements like these they’re not only making their code more readable but also enhancing accessibility for assistive technologies such as screen readers. So next time you’re laying out your website structure don’t forget about utilizing your trusty <main> tag!

Conclusion: Mastering the Use of HTML <main> Tag

By now, you’ve probably realized that the HTML <main> tag isn’t as intimidating as it first seems. It’s a simple yet powerful tool in your web development toolkit. When used correctly, this semantic element plays a pivotal role in structuring your content and enhancing accessibility.

Let’s quickly revisit what we’ve learned:

Here’s an example of how you might use it:

<!DOCTYPE html>
<html>
<head>
<title>Title of the Page</title>
</head>
<body>

<header>...</header>

<main role="main">
  <article>...</article>
  <article>...</article>
</main>

<footer>...</footer>

</body>
</html>

But remember, not all browsers support the <main> tag. You’ll need to include some additional CSS for compatibility with Internet Explorer:

/* For IE */
main {
  display: block;
}

A common mistake I see folks making is using multiple <main> tags or placing them inside other sectioning elements like <aside>, <nav>, or even another <main>. Doing so goes against best practices and can negatively impact accessibility.

In conclusion, I hope this guide has given you confidence when working with the HTML <main> tag. Keep practicing, stay curious, and don’t hesitate to experiment – there’s always more to learn in web development!

Cristian G. Guasch

Hey! I'm Cristian Gonzalez, I created HTML Easy to help you learn HTML easily and fast.

Related articles