HTML5 Main Usage

Question

Previously I'd lay out a main container on an HTML page to wrap most of my body content in. for example, an 'about' page:

<header>
    <!--header markup -->
</header>

<div id="container">
    <!--articles, images, etc for the about section -->
</div>

<footer>
    <!--footer markup -->
</footer>    

would HTML5's <main> tag be ideal to take the place of my 'div id="container"' in this case?

Answer 1

In a word yes.

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.

w3c specs

See here for more info

Answer 2

You should use it for content that is unique to the page. So yes, headers and footers are naturally left out. From there on, it depends what else you have there. If there's a sidebar, for example, with template-loaded content that is common across many pages, you should consider leaving that out as well.

Answer 3

Just replace the tag of most important part of your website with <main> . Mostly <main> will replace <section> (In your case, <div> , and originally it should be <section> ). Notice that I put emphasis on the word part because <main> is not for sectioning your document, its purpose is just: point out what's the most important part of your website/application.