Skip to content

Commit

Permalink
[e] (0) idioms: main content
Browse files Browse the repository at this point in the history 
git-svn-id: http://svn.whatwg.org/webapps@5237 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Aug 4, 2010
1 parent 446b45e commit 99353c0
Show file tree
Hide file tree
Showing 3 changed files with 509 additions and 12 deletions.
178 changes: 172 additions & 6 deletions complete.html
View file
Expand Up @@ -771,9 +771,10 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
<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>
Expand Down Expand Up @@ -51732,7 +51733,172 @@ <h5 id=other-link-types><span class=secno>4.12.3.19 </span>Other link types</h5>

<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 &mdash; not including headers and
footers, navigation links, sidebars, advertisements, and so forth
&mdash; 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>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt; My Toys &lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;header&gt;
&lt;h1&gt;My toys&lt;/h1&gt;
&lt;/header&gt;
&lt;nav&gt;
&lt;p&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="/contact"&gt;Contact&lt;/a&gt;&lt;/p&gt;
&lt;/nav&gt;
<strong> &lt;p&gt;I really like my chained book and my telephone. I'm not such a
fan of my big ball.&lt;/p&gt;
&lt;p&gt;Another toy I like is my mirror.&lt;/p&gt;</strong>
&lt;footer&gt;
&lt;p&gt;&copy; copyright 2010 by the boy&lt;/p&gt;
&lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;</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>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt; The Boy Blog: My Toys &lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;header&gt;
&lt;h1&gt;The Boy Blog&lt;/h1&gt;
&lt;/header&gt;
&lt;nav&gt;
&lt;p&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="/contact"&gt;Contact&lt;/a&gt;&lt;/p&gt;
&lt;/nav&gt;
<strong> &lt;article&gt;
&lt;header&gt;
&lt;h1&gt;My toys&lt;/h1&gt;
&lt;p&gt;Published &lt;time pubdate datetime="2010-08-04"&gt;August 4th&lt;/time&gt;&lt;/p&gt;
&lt;/header&gt;
&lt;p&gt;I really like my chained book and my telephone. I'm not such a
fan of my big ball.&lt;/p&gt;
&lt;p&gt;Another toy I like is my mirror.&lt;/p&gt;
&lt;/article&gt;</strong>
&lt;footer&gt;
&lt;p&gt;&copy; copyright 2010 by the boy&lt;/p&gt;
&lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;</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>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt; Chapter 2: My Toys &mdash; The Book of the Boy &lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;header&gt;
&lt;h1&gt;Chapter 2: My Toys&lt;/h1&gt;
&lt;/header&gt;
&lt;nav&gt;
&lt;p&gt;&lt;a href="/"&gt;Front Page&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="/toc"&gt;Table of Contents&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="/c1"&gt;Chapter 1&lt;/a&gt; &mdash; &lt;a href="/c3"&gt;Chapter 3&lt;/a&gt;&lt;/p&gt;
&lt;/nav&gt;
<strong> &lt;section&gt;
&lt;p&gt;I really like my chained book and my telephone. I'm not such a
fan of my big ball.&lt;/p&gt;
&lt;p&gt;Another toy I like is my mirror.&lt;/p&gt;
&lt;/section&gt;</strong>
&lt;footer&gt;
&lt;p&gt;&copy; copyright 2010 by the boy&lt;/p&gt;
&lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;</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>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt; My Toys &lt;/title&gt;
&lt;style&gt;
body &gt; div { background: navy; color: yellow; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;header&gt;
&lt;h1&gt;My toys&lt;/h1&gt;
&lt;/header&gt;
&lt;nav&gt;
&lt;p&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="/contact"&gt;Contact&lt;/a&gt;&lt;/p&gt;
&lt;/nav&gt;
<strong> &lt;div&gt;
&lt;p&gt;I really like my chained book and my telephone. I'm not such a
fan of my big ball.&lt;/p&gt;
&lt;p&gt;Another toy I like is my mirror.&lt;/p&gt;
&lt;/div&gt;</strong>
&lt;footer&gt;
&lt;p&gt;&copy; copyright 2010 by the boy&lt;/p&gt;
&lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;</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
Expand Down Expand Up @@ -51784,7 +51950,7 @@ <h4 id=tag-clouds><span class=secno>4.13.1 </span>Tag clouds</h4>
</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 -->

Expand Down Expand Up @@ -51830,7 +51996,7 @@ <h4 id=conversations><span class=secno>4.13.2 </span>Conversations</h4>
</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>
Expand Down

0 comments on commit 99353c0

Please sign in to comment.