The main content of a page — not including headers and footers, navigation links, - sidebars, advertisements, and so forth — can be marked up in a variety of ways, depending on - the needs of the author.
- -The simplest solution is to not mark up the main content at all, and just leave it as implicit.
- Another way to think of this is that the body elements marks up the main content of
- the page, and the bits that aren't main content are excluded through the use of more appropriate
- elements like aside and nav.
Here is a short Web page marked up along this minimalistic school of thought. The main content
- is highlighted. Notice how all the other content in the body is marked up
- with elements to indicate that it's not part of the main content, in this case
- header, nav, and footer.
<!DOCTYPE HTML>
-<html lang="en">
- <head>
- <title> My Toys </title>
- </head>
- <body>
- <header>
- <h1>My toys</h1>
- </header>
- <nav>
- <p><a href="/">Home</a></p>
- <p><a href="/contact">Contact</a></p>
- </nav>
- <p>I really like my chained book and my telephone. I'm not such a
- fan of my big ball.</p>
- <p>Another toy I like is my mirror.</p>
- <footer>
- <p>© copyright 2010 by the boy</p>
- </footer>
- </body>
-</html>If the main content is an independent unit of content that one could imagine syndicating
- independently, then the article element would be appropriate to mark up the main
- content of the document.
The document in the previous example is here recast as a blog post:
- -<!DOCTYPE HTML>
-<html lang="en">
- <head>
- <title> The Boy Blog: My Toys </title>
- </head>
- <body>
- <header>
- <h1>The Boy Blog</h1>
- </header>
- <nav>
- <p><a href="/">Home</a></p>
- <p><a href="/contact">Contact</a></p>
- </nav>
- <article>
- <header>
- <h1>My toys</h1>
- <p>Published August 4th</p>
- </header>
- <p>I really like my chained book and my telephone. I'm not such a
- fan of my big ball.</p>
- <p>Another toy I like is my mirror.</p>
- </article>
- <footer>
- <p>© copyright 2010 by the boy</p>
- </footer>
- </body>
-</html>If the main content is not an independent unit of content so much as a section of a larger
- work, for instance a chapter, then the section element would be appropriate to mark
- up the main content of the document.
Here is the same document, but as a chapter in an online book:
- -<!DOCTYPE HTML>
-<html lang="en">
- <head>
- <title> Chapter 2: My Toys — The Book of the Boy </title>
- </head>
- <body>
- <header>
- <hgroup>
- <h1>The Book of the Boy</h1>
- <h2>A book about boy stuff</h2>
- </hgroup>
- </header>
- <nav>
- <p><a href="/">Front Page</a></p>
- <p><a href="/toc">Table of Contents</a></p>
- <p><a href="/c1">Chapter 1</a> — <a href="/c3">Chapter 3</a></p>
- </nav>
- <section>
- <h1>Chapter 2: My Toys</h1>
- <p>I really like my chained book and my telephone. I'm not such a
- fan of my big ball.</p>
- <p>Another toy I like is my mirror.</p>
- </section>
- </body>
-</html>If neither article nor section would be appropriate, but the main
- content still needs an explicit element, for example for styling purposes, then the
- main element can be used.
This is the same as the original example, but using main for the main content
- instead of leaving it implied:
<!DOCTYPE HTML>
-<html lang="en">
- <head>
- <title> My Toys </title>
- <style>
- body > main { background: navy; color: yellow; }
- </style>
- </head>
- <body>
- <header>
- <h1>My toys</h1>
- </header>
- <nav>
- <p><a href="/">Home</a></p>
- <p><a href="/contact">Contact</a></p>
- </nav>
- <main>
- <p>I really like my chained book and my telephone. I'm not such a
- fan of my big ball.</p>
- <p>Another toy I like is my mirror.</p>
- </main>
- <footer>
- <p>© copyright 2010 by the boy</p>
- </footer>
- </body>
-</html>This specification does not provide a machine-readable way of describing bread-crumb navigation @@ -121381,7 +121226,7 @@ INSERT INTERFACES HERE Erik Arvidsson, Erik Charlebois, Erik Rose, - espretto, + espretto, Evan Jacobs, Evan Martin, Evan Prodromou, @@ -121969,13 +121814,14 @@ INSERT INTERFACES HERE Tom Baker, Tom Pike, Tom Schuster, + Tomasz Jakut, Tommy Thorsen, Tony Ross, Tooru Fujisawa, Travis Leithead, Trevor Rowbotham, Trevor Saunders, - triple-underscore, + triple-underscore, Tyler Close, Valentin Gosu, Vardhan Gupta,