[html5] r5237 - [e] (0) idioms: main content
whatwg at whatwg.org
whatwg at whatwg.org
Wed Aug 4 15:27:35 PDT 2010
Author: ianh
Date: 2010-08-04 15:27:34 -0700 (Wed, 04 Aug 2010)
New Revision: 5237
Modified:
complete.html
index
source
Log:
[e] (0) idioms: main content
Modified: complete.html
===================================================================
--- complete.html 2010-08-04 20:56:08 UTC (rev 5236)
+++ complete.html 2010-08-04 22:27:34 UTC (rev 5237)
@@ -771,9 +771,10 @@
<li><a href=#other-link-types><span class=secno>4.12.3.19 </span>Other link types</a></ol></ol></li>
<li><a href=#common-idioms-without-dedicated-elements><span class=secno>4.13 </span>Common idioms without dedicated elements</a>
<ol>
- <li><a href=#tag-clouds><span class=secno>4.13.1 </span>Tag clouds</a></li>
- <li><a href=#conversations><span class=secno>4.13.2 </span>Conversations</a></li>
- <li><a href=#footnotes><span class=secno>4.13.3 </span>Footnotes</a></ol></li>
+ <li><a href=#the-main-part-of-the-content><span class=secno>4.13.1 </span>The main part of the content</a></li>
+ <li><a href=#tag-clouds><span class=secno>4.13.2 </span>Tag clouds</a></li>
+ <li><a href=#conversations><span class=secno>4.13.3 </span>Conversations</a></li>
+ <li><a href=#footnotes><span class=secno>4.13.4 </span>Footnotes</a></ol></li>
<li><a href=#matching-html-elements-using-selectors><span class=secno>4.14 </span>Matching HTML elements using selectors</a>
<ol>
<li><a href=#selectors><span class=secno>4.14.1 </span>Case-sensitivity</a></li>
@@ -51732,8 +51733,173 @@
<h3 id=common-idioms-without-dedicated-elements><span class=secno>4.13 </span>Common idioms without dedicated elements</h3>
- <h4 id=tag-clouds><span class=secno>4.13.1 </span>Tag clouds</h4>
+ <h4 id=the-main-part-of-the-content><span class=secno>4.13.1 </span>The main part of the content</h4>
+ <p>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.</p>
+
+ <p>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 <code><a href=#the-body-element-0>body</a></code> 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 <code><a href=#the-aside-element>aside</a></code> and
+ <code><a href=#the-nav-element>nav</a></code>.</p>
+
+ <div class=example>
+
+ <p>Here is a short Web page marked up along this minimalistic
+ school of thought. The main content is highlighted. Notice how all
+ the <em>other</em> content in the <code><a href=#the-body-element-0>body</a></code> is marked up
+ with elements to indicate that it's not part of the main content,
+ in this case <code><a href=#the-header-element>header</a></code>, <code><a href=#the-nav-element>nav</a></code>, and
+ <code><a href=#the-footer-element>footer</a></code>.</p>
+
+ <pre><!DOCTYPE HTML>
+<html>
+ <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>
+<strong> <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></strong>
+ <footer>
+ <p>© copyright 2010 by the boy</p>
+ </footer>
+ </body>
+</html></pre>
+
+ </div>
+
+ <p>If the main content is an independent unit of content that one
+ could imagine syndicating independently, then the
+ <code><a href=#the-article-element>article</a></code> element would be appropriate to mark up the
+ main content of the document.</p>
+
+ <div class=example>
+
+ <p>The document in the previous example is here recast as a blog
+ post:</p>
+
+ <pre><!DOCTYPE HTML>
+<html>
+ <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>
+<strong> <article>
+ <header>
+ <h1>My toys</h1>
+ <p>Published <time pubdate datetime="2010-08-04">August 4th</time></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></strong>
+ <footer>
+ <p>© copyright 2010 by the boy</p>
+ </footer>
+ </body>
+</html></pre>
+
+ </div>
+
+ <p>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
+ <code><a href=#the-section-element>section</a></code> element would be appropriate to mark up the
+ main content of the document.</p>
+
+ <div class=example>
+
+ <p>Here is the same document, case as a chapter in an online
+ book:</p>
+
+ <pre><!DOCTYPE HTML>
+<html>
+ <head>
+ <title> Chapter 2: My Toys — The Book of the Boy </title>
+ </head>
+ <body>
+ <header>
+ <h1>Chapter 2: My Toys</h1>
+ </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>
+<strong> <section>
+ <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></strong>
+ <footer>
+ <p>© copyright 2010 by the boy</p>
+ </footer>
+ </body>
+</html></pre>
+
+ </div>
+
+ <p>If neither <code><a href=#the-article-element>article</a></code> nor <code><a href=#the-section-element>section</a></code> would be
+ appropriate, but the main content still needs an explicit element,
+ for example for styling purposes, then the <code><a href=#the-div-element>div</a></code> element
+ can be used.</p>
+
+ <div class=example>
+
+ <p>This is the same as the original example, but using
+ <code><a href=#the-div-element>div</a></code> for the main content instead of leaving it
+ implied:</p>
+
+ <pre><!DOCTYPE HTML>
+<html>
+ <head>
+ <title> My Toys </title>
+ <style>
+ body > div { 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>
+<strong> <div>
+ <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>
+ </div></strong>
+ <footer>
+ <p>© copyright 2010 by the boy</p>
+ </footer>
+ </body>
+</html></pre>
+
+ </div>
+
+
+ <h4 id=tag-clouds><span class=secno>4.13.2 </span>Tag clouds</h4>
+
<p id=tag-cloud>This specification does not define any markup
specifically for marking up lists of keywords that apply to a group
of pages (also known as <i>tag clouds</i>). In general, authors are
@@ -51784,7 +51950,7 @@
</div>
- <h4 id=conversations><span class=secno>4.13.2 </span>Conversations</h4>
+ <h4 id=conversations><span class=secno>4.13.3 </span>Conversations</h4>
<!-- http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-September/022576.html -->
@@ -51830,7 +51996,7 @@
</div>
- <h4 id=footnotes><span class=secno>4.13.3 </span>Footnotes</h4>
+ <h4 id=footnotes><span class=secno>4.13.4 </span>Footnotes</h4>
<p>HTML does not have a dedicated mechanism for marking up
footnotes. Here are the recommended alternatives.</p>
Modified: index
===================================================================
--- index 2010-08-04 20:56:08 UTC (rev 5236)
+++ index 2010-08-04 22:27:34 UTC (rev 5237)
@@ -778,9 +778,10 @@
<li><a href=#other-link-types><span class=secno>4.12.3.19 </span>Other link types</a></ol></ol></li>
<li><a href=#common-idioms-without-dedicated-elements><span class=secno>4.13 </span>Common idioms without dedicated elements</a>
<ol>
- <li><a href=#tag-clouds><span class=secno>4.13.1 </span>Tag clouds</a></li>
- <li><a href=#conversations><span class=secno>4.13.2 </span>Conversations</a></li>
- <li><a href=#footnotes><span class=secno>4.13.3 </span>Footnotes</a></ol></li>
+ <li><a href=#the-main-part-of-the-content><span class=secno>4.13.1 </span>The main part of the content</a></li>
+ <li><a href=#tag-clouds><span class=secno>4.13.2 </span>Tag clouds</a></li>
+ <li><a href=#conversations><span class=secno>4.13.3 </span>Conversations</a></li>
+ <li><a href=#footnotes><span class=secno>4.13.4 </span>Footnotes</a></ol></li>
<li><a href=#matching-html-elements-using-selectors><span class=secno>4.14 </span>Matching HTML elements using selectors</a>
<ol>
<li><a href=#selectors><span class=secno>4.14.1 </span>Case-sensitivity</a></li>
@@ -51659,8 +51660,173 @@
<h3 id=common-idioms-without-dedicated-elements><span class=secno>4.13 </span>Common idioms without dedicated elements</h3>
- <h4 id=tag-clouds><span class=secno>4.13.1 </span>Tag clouds</h4>
+ <h4 id=the-main-part-of-the-content><span class=secno>4.13.1 </span>The main part of the content</h4>
+ <p>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.</p>
+
+ <p>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 <code><a href=#the-body-element-0>body</a></code> 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 <code><a href=#the-aside-element>aside</a></code> and
+ <code><a href=#the-nav-element>nav</a></code>.</p>
+
+ <div class=example>
+
+ <p>Here is a short Web page marked up along this minimalistic
+ school of thought. The main content is highlighted. Notice how all
+ the <em>other</em> content in the <code><a href=#the-body-element-0>body</a></code> is marked up
+ with elements to indicate that it's not part of the main content,
+ in this case <code><a href=#the-header-element>header</a></code>, <code><a href=#the-nav-element>nav</a></code>, and
+ <code><a href=#the-footer-element>footer</a></code>.</p>
+
+ <pre><!DOCTYPE HTML>
+<html>
+ <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>
+<strong> <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></strong>
+ <footer>
+ <p>© copyright 2010 by the boy</p>
+ </footer>
+ </body>
+</html></pre>
+
+ </div>
+
+ <p>If the main content is an independent unit of content that one
+ could imagine syndicating independently, then the
+ <code><a href=#the-article-element>article</a></code> element would be appropriate to mark up the
+ main content of the document.</p>
+
+ <div class=example>
+
+ <p>The document in the previous example is here recast as a blog
+ post:</p>
+
+ <pre><!DOCTYPE HTML>
+<html>
+ <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>
+<strong> <article>
+ <header>
+ <h1>My toys</h1>
+ <p>Published <time pubdate datetime="2010-08-04">August 4th</time></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></strong>
+ <footer>
+ <p>© copyright 2010 by the boy</p>
+ </footer>
+ </body>
+</html></pre>
+
+ </div>
+
+ <p>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
+ <code><a href=#the-section-element>section</a></code> element would be appropriate to mark up the
+ main content of the document.</p>
+
+ <div class=example>
+
+ <p>Here is the same document, case as a chapter in an online
+ book:</p>
+
+ <pre><!DOCTYPE HTML>
+<html>
+ <head>
+ <title> Chapter 2: My Toys — The Book of the Boy </title>
+ </head>
+ <body>
+ <header>
+ <h1>Chapter 2: My Toys</h1>
+ </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>
+<strong> <section>
+ <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></strong>
+ <footer>
+ <p>© copyright 2010 by the boy</p>
+ </footer>
+ </body>
+</html></pre>
+
+ </div>
+
+ <p>If neither <code><a href=#the-article-element>article</a></code> nor <code><a href=#the-section-element>section</a></code> would be
+ appropriate, but the main content still needs an explicit element,
+ for example for styling purposes, then the <code><a href=#the-div-element>div</a></code> element
+ can be used.</p>
+
+ <div class=example>
+
+ <p>This is the same as the original example, but using
+ <code><a href=#the-div-element>div</a></code> for the main content instead of leaving it
+ implied:</p>
+
+ <pre><!DOCTYPE HTML>
+<html>
+ <head>
+ <title> My Toys </title>
+ <style>
+ body > div { 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>
+<strong> <div>
+ <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>
+ </div></strong>
+ <footer>
+ <p>© copyright 2010 by the boy</p>
+ </footer>
+ </body>
+</html></pre>
+
+ </div>
+
+
+ <h4 id=tag-clouds><span class=secno>4.13.2 </span>Tag clouds</h4>
+
<p id=tag-cloud>This specification does not define any markup
specifically for marking up lists of keywords that apply to a group
of pages (also known as <i>tag clouds</i>). In general, authors are
@@ -51711,7 +51877,7 @@
</div>
- <h4 id=conversations><span class=secno>4.13.2 </span>Conversations</h4>
+ <h4 id=conversations><span class=secno>4.13.3 </span>Conversations</h4>
<!-- http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-September/022576.html -->
@@ -51757,7 +51923,7 @@
</div>
- <h4 id=footnotes><span class=secno>4.13.3 </span>Footnotes</h4>
+ <h4 id=footnotes><span class=secno>4.13.4 </span>Footnotes</h4>
<p>HTML does not have a dedicated mechanism for marking up
footnotes. Here are the recommended alternatives.</p>
Modified: source
===================================================================
--- source 2010-08-04 20:56:08 UTC (rev 5236)
+++ source 2010-08-04 22:27:34 UTC (rev 5237)
@@ -57849,6 +57849,171 @@
<h3>Common idioms without dedicated elements</h3>
+ <h4>The main part of the content</h4>
+
+ <p>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.</p>
+
+ <p>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 <code>body</code> 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 <code>aside</code> and
+ <code>nav</code>.</p>
+
+ <div class="example">
+
+ <p>Here is a short Web page marked up along this minimalistic
+ school of thought. The main content is highlighted. Notice how all
+ the <em>other</em> content in the <code>body</code> is marked up
+ with elements to indicate that it's not part of the main content,
+ in this case <code>header</code>, <code>nav</code>, and
+ <code>footer</code>.</p>
+
+ <pre><!DOCTYPE HTML>
+<html>
+ <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>
+<strong> <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></strong>
+ <footer>
+ <p>© copyright 2010 by the boy</p>
+ </footer>
+ </body>
+</html></pre>
+
+ </div>
+
+ <p>If the main content is an independent unit of content that one
+ could imagine syndicating independently, then the
+ <code>article</code> element would be appropriate to mark up the
+ main content of the document.</p>
+
+ <div class="example">
+
+ <p>The document in the previous example is here recast as a blog
+ post:</p>
+
+ <pre><!DOCTYPE HTML>
+<html>
+ <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>
+<strong> <article>
+ <header>
+ <h1>My toys</h1>
+ <p>Published <time pubdate datetime="2010-08-04">August 4th</time></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></strong>
+ <footer>
+ <p>© copyright 2010 by the boy</p>
+ </footer>
+ </body>
+</html></pre>
+
+ </div>
+
+ <p>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
+ <code>section</code> element would be appropriate to mark up the
+ main content of the document.</p>
+
+ <div class="example">
+
+ <p>Here is the same document, case as a chapter in an online
+ book:</p>
+
+ <pre><!DOCTYPE HTML>
+<html>
+ <head>
+ <title> Chapter 2: My Toys — The Book of the Boy </title>
+ </head>
+ <body>
+ <header>
+ <h1>Chapter 2: My Toys</h1>
+ </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>
+<strong> <section>
+ <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></strong>
+ <footer>
+ <p>© copyright 2010 by the boy</p>
+ </footer>
+ </body>
+</html></pre>
+
+ </div>
+
+ <p>If neither <code>article</code> nor <code>section</code> would be
+ appropriate, but the main content still needs an explicit element,
+ for example for styling purposes, then the <code>div</code> element
+ can be used.</p>
+
+ <div class="example">
+
+ <p>This is the same as the original example, but using
+ <code>div</code> for the main content instead of leaving it
+ implied:</p>
+
+ <pre><!DOCTYPE HTML>
+<html>
+ <head>
+ <title> My Toys </title>
+ <style>
+ body > div { 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>
+<strong> <div>
+ <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>
+ </div></strong>
+ <footer>
+ <p>© copyright 2010 by the boy</p>
+ </footer>
+ </body>
+</html></pre>
+
+ </div>
+
+
<h4>Tag clouds</h4>
<p id="tag-cloud">This specification does not define any markup
More information about the Commit-Watchers
mailing list