Introducing the New HTML5 <main> Element

When was the last time we received a new element? HTML5 introduced just nine new structural tags and they’ve been stable for several years: section, article, aside, hgroup, header, footer, nav, figure and figcaption. There are another 20 or so content elements including video, audio, canvas, progress etc. Today, we have a new structural element to learn: <main> According to the recent W3C specification:

The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application. Authors must not include more than one main element in a document. Authors must not include the main element as a child of an article, aside, footer, header or nav element.

main marks the meaty content within your page, i.e. the target of a “skip to” link. You’ll probably use main where you had a content wrapper before; it will replace tags such as <div id="main">, <div id="page"> or <div id="wrapper">

. If you’re using ARIA, you’d use it for the element where role="main" is defined…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Using main</title>
</head>
<body>

	<header>My page</header>
	
	<nav>
		<a href="#">Home</a>
	</nav>
	
	<main>
		<article>
			<h1>My article</h1>
			<p>Content</p>
		</article>
	
		<aside>
			<p>More information</p>
		</aside>
	</main>
	
	<footer>Copyright 2013</footer>

</body>
</html>

Browser Support

While main is new, most browsers support unrecognized tags. However, you will need to apply a block style in your CSS, i.e.

main
{
	display: block
}

This is may become unnecessary as browsers evolve (main is supported in Chrome and Firefox nightly builds), but there’s little harm retaining it. The element’s also been added to the html5shiv

so it will work in IE6, 7 and 8. You may need to download the new version if you’re using a locally-hosted file.

Can you use <main> today?

The element has been surprisingly controversial. It’s been argued that it’s unnecessary and pages should permit more than one main tag. But it’s here to stay and I think it will be useful. Just ensure you’ve thoroughly tested your new site prior to going live! And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World. Comments on this article are closed. Have a question about HTML5? Why not ask it on our forums?

Frequently Asked Questions (FAQs) about HTML5 Main Element

What is the main role of the HTML5 main element in web development?

The HTML5 main element plays a crucial role in web development. It is used to encapsulate the primary content of a web page, such as the main body of a blog post or an article. This element is unique to each page and should appear only once. It helps in improving the accessibility of the website, making it easier for screen readers and other assistive technologies to understand the structure of the page.

How does the HTML5 main element differ from other HTML elements?

Unlike other HTML elements, the main element specifically targets the primary content of a web page. While elements like header, footer, and nav are used for repetitive content across multiple pages, the main element is unique to each page. It should not contain content that is repeated across a set of documents such as site navigation links, header or footer information.

Can I use multiple main elements on a single page?

No, it is not recommended to use multiple main elements on a single page. The main element should be unique and encapsulate the primary content of a web page. Using multiple main elements can confuse assistive technologies and make it difficult for users to navigate the page.

How does the main element improve website accessibility?

The main element improves website accessibility by providing a clear structure to the web page. It allows assistive technologies like screen readers to quickly identify and skip to the main content, making it easier for users with disabilities to navigate the website.

Is it necessary to use the main element in HTML5?

While it’s not mandatory to use the main element in HTML5, it is highly recommended due to its benefits in improving website accessibility. It provides a semantic way to identify the primary content of each page, which can be beneficial for both users and search engines.

Can the main element be used inside an article element?

No, the main element should not be used inside an article, aside, footer, header, or nav element. It is intended to be used as a top-level element to mark up the main content of a web page.

How does the main element affect SEO?

The main element can indirectly affect SEO by improving website accessibility and user experience. While it doesn’t directly contribute to SEO, it helps search engines understand the structure of the page, which can potentially improve the page’s visibility in search results.

What browsers support the main element?

The main element is supported by all modern browsers, including Google Chrome, Firefox, Safari, and Internet Explorer 9 and above. However, for older browsers that do not recognize the main element, developers can use a simple JavaScript shim to enable support.

How to style the main element using CSS?

The main element can be styled using CSS just like any other HTML element. You can use the main keyword as a selector in your CSS code to apply styles to the main element.

What happens if I don’t use the main element in my HTML5 document?

If you don’t use the main element in your HTML5 document, it won’t necessarily break anything, but you’ll be missing out on the benefits it provides in terms of accessibility and semantic clarity. It’s always a good practice to use the main element to encapsulate the primary content of your web page.