Introducing the New HTML5 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!

Source Link: http://www.sitepoint.com/html5-main-element/