[html5] r7680 - / images
whatwg at whatwg.org
whatwg at whatwg.org
Thu Jan 31 13:00:12 PST 2013
Author: ianh
Date: 2013-01-31 13:00:11 -0800 (Thu, 31 Jan 2013)
New Revision: 7680
Modified:
complete.html
images/content-venn.svg
index
source
Log:
[cgiowt] (3) Match reality
Affected topics: DOM APIs, HTML, HTML Syntax and Parsing, Rendering
Modified: complete.html
===================================================================
--- complete.html 2013-01-31 00:36:58 UTC (rev 7679)
+++ complete.html 2013-01-31 21:00:11 UTC (rev 7680)
@@ -501,7 +501,8 @@
<li><a href=#the-dd-element><span class=secno>4.5.10 </span>The <code>dd</code> element</a></li>
<li><a href=#the-figure-element><span class=secno>4.5.11 </span>The <code>figure</code> element</a></li>
<li><a href=#the-figcaption-element><span class=secno>4.5.12 </span>The <code>figcaption</code> element</a></li>
- <li><a href=#the-div-element><span class=secno>4.5.13 </span>The <code>div</code> element</a></ol></li>
+ <li><a href=#the-main-element><span class=secno>4.5.13 </span>The <code>main</code> element</a></li>
+ <li><a href=#the-div-element><span class=secno>4.5.14 </span>The <code>div</code> element</a></ol></li>
<li><a href=#text-level-semantics><span class=secno>4.6 </span>Text-level semantics</a>
<ol>
<li><a href=#the-a-element><span class=secno>4.6.1 </span>The <code>a</code> element</a></li>
@@ -11764,6 +11765,7 @@
<li><code><a href=#the-keygen-element>keygen</a></code></li>
<li><code><a href=#the-label-element>label</a></code></li>
<li><code><a href=#the-link-element>link</a></code> (if the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present)</li>
+ <li><code><a href=#the-main-element>main</a></code></li>
<li><code><a href=#the-map-element>map</a></code></li>
<li><code><a href=#the-mark-element>mark</a></code></li>
<li><code><a href=#math>math</a></code></li>
@@ -12183,6 +12185,7 @@
<li><code><a href=#the-kbd-element>kbd</a></code></li>
<li><code><a href=#the-keygen-element>keygen</a></code></li>
<li><code><a href=#the-label-element>label</a></code></li>
+ <li><code><a href=#the-main-element>main</a></code></li>
<li><code><a href=#the-map-element>map</a></code></li>
<li><code><a href=#the-mark-element>mark</a></code></li>
<li><code><a href=#math>math</a></code></li>
@@ -12956,6 +12959,10 @@
<td><code title=attr-aria-role-listitem>listitem</code> role
<td>Role must be either <code title=attr-aria-role-listitem>listitem</code>, <code title=attr-aria-role-menuitemcheckbox>menuitemcheckbox</code>, <code title=attr-aria-role-menuitemradio>menuitemradio</code>, <code title=attr-aria-role-option>option</code>, <code title=attr-aria-role-tab>tab</code>, or <code title=attr-aria-role-treeitem>treeitem</code>
+ <tr><td><code><a href=#the-main-element>main</a></code> element
+ <td><code title=attr-aria-role-main>main</code> role
+ <td>Role must be either <code title=attr-aria-role-document>document</code>, <code title=attr-aria-role-application>application</code>, or <code title=attr-aria-role-main>main</code>
+
<tr><td><code><a href=#the-menu-element>menu</a></code> element with a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#toolbar-state title="toolbar state">toolbar</a> state
<td><code title=attr-aria-role-toolbar>toolbar</code> role
<td>Role must be either <code title=attr-aria-role-directory>directory</code>, <code title=attr-aria-role-list>list</code>, <code title=attr-aria-role-listbox>listbox</code>, <code title=attr-aria-role-menu>menu</code>, <code title=attr-aria-role-menubar>menubar</code>, <code title=attr-aria-role-tablist>tablist</code>, <code title="attr-aria-role-toolbar ">toolbar</code>, or <code title=attr-aria-role-tree>tree</code>
@@ -17250,21 +17257,21 @@
</ul>
</nav>
</header>
- <div>
+ <main>
<article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">My Day at the Beach</h1>
</header>
- <div itemprop="articleBody">
+ <main itemprop="articleBody">
<p>Today I went to the beach and had a lot of fun.</p>
<em>...more content...</em>
- </div>
+ </main>
<footer>
<p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
</footer>
</article>
<em>...more blog posts...</em>
- </div>
+ </main>
<footer>
<p>Copyright ©
<span itemprop="copyrightYear">2010</span>
@@ -17276,7 +17283,7 @@
</footer>
</body></pre>
- <p>Notice the <code><a href=#the-div-element>div</a></code> elements being used to wrap all the contents of the page other
+ <p>Notice the <code><a href=#the-main-element>main</a></code> elements being used to wrap all the contents of the page other
than the header and footer, and all the contents of the blog entry other than its header and
footer.</p>
@@ -19932,7 +19939,7 @@
- <h4 id=the-div-element><span class=secno>4.5.13 </span>The <dfn><code>div</code></dfn> element</h4>
+ <h4 id=the-main-element><span class=secno>4.5.13 </span>The <dfn><code>main</code></dfn> element</h4>
<dl class=element><dt><a href=#element-dfn-categories title=element-dfn-categories>Categories</a>:</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -19944,6 +19951,68 @@
<dt><a href=#element-dfn-attributes title=element-dfn-attributes>Content attributes</a>:</dt>
<dd><a href=#global-attributes>Global attributes</a></dd>
<dt><a href=#element-dfn-dom title=element-dfn-dom>DOM interface</a>:</dt><!--TOPIC:DOM APIs-->
+ <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+ </dl><!--TOPIC:HTML--><p>The <code><a href=#the-main-element>main</a></code> element can be used as a container for the dominant contents of another
+ element. It <a href=#represents>represents</a> its children.</p>
+
+ <p class=note>The <code><a href=#the-main-element>main</a></code> element is distinct from the <code><a href=#the-section-element>section</a></code> and
+ <code><a href=#the-article-element>article</a></code> elements in that the <code><a href=#the-main-element>main</a></code> element does not contribute to the
+ document <a href=#outline>outline</a>.</p>
+
+ <div class=example>
+
+ <p>In this example, the author has used a presentation where each component of the page is
+ rendered in a box. To wrap the main content of the page (as opposed to the header, the footer,
+ the navigation bar, and a sidebar), the <code><a href=#the-main-element>main</a></code> element is used.</p>
+
+ <pre><!DOCTYPE html>
+<title>RPG System 17</title>
+<style>
+ header, nav, aside, main, footer {
+ margin: 0.5em; border: thin solid; padding: 0.5em;
+ background: #EFF; color: black; box-shadow: 0 0 0.25em #033;
+ }
+ h1, h2, p { margin: 0; }
+ nav, main { float: left; }
+ aside { float: right; }
+ footer { clear: both; }
+</style>
+<header>
+ <h1>System Eighteen</h1>
+</header>
+<nav>
+ <a href="../16/">← System 17</a>
+ <a href="../18/">RPXIX →</a>
+</nav>
+<aside>
+ <p>This system has no HP mechanic, so there's no healing.
+</aside>
+<main>
+ <h2>Character creation</h2>
+ <p>Attributes (magic, strength, agility) are purchased at the cost of one point per level.</p>
+ <h2>Rolls</h2>
+ <p>Each encounter, roll the dice for all your skills. If you roll more than the opponent, you win.</p>
+</main>
+<footer>
+ <p>Copyright © 2013
+</footer></pre>
+
+ </div>
+
+
+
+ <h4 id=the-div-element><span class=secno>4.5.14 </span>The <dfn><code>div</code></dfn> element</h4>
+
+ <dl class=element><dt><a href=#element-dfn-categories title=element-dfn-categories>Categories</a>:</dt>
+ <dd><a href=#flow-content>Flow content</a>.</dd>
+ <dd><a href=#palpable-content>Palpable content</a>.</dd>
+ <dt><a href=#element-dfn-contexts title=element-dfn-contexts>Contexts in which this element can be used</a>:</dt>
+ <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
+ <dt><a href=#element-dfn-content-model title=element-dfn-content-model>Content model</a>:</dt>
+ <dd><a href=#flow-content>Flow content</a>.</dd>
+ <dt><a href=#element-dfn-attributes title=element-dfn-attributes>Content attributes</a>:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dt><a href=#element-dfn-dom title=element-dfn-dom>DOM interface</a>:</dt><!--TOPIC:DOM APIs-->
<dd>
<pre class=idl>interface <dfn id=htmldivelement>HTMLDivElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
</dd>
@@ -61031,13 +61100,13 @@
<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
+ for example for styling purposes, then the <code><a href=#the-main-element>main</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
+ <code><a href=#the-main-element>main</a></code> for the main content instead of leaving it
implied:</p>
<pre><!DOCTYPE HTML>
@@ -61045,7 +61114,7 @@
<head>
<title> My Toys </title>
<style>
- body > div { background: navy; color: yellow; }
+ body > main { background: navy; color: yellow; }
</style>
</head>
<body>
@@ -61056,11 +61125,11 @@
<p><a href="/">Home</a></p>
<p><a href="/contact">Contact</a></p>
</nav>
-<strong> <div>
+<strong> <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>
- </div></strong>
+ </main></strong>
<footer>
<p>© copyright 2010 by the boy</p>
</footer>
@@ -86435,7 +86504,7 @@
<code><a href=#the-fieldset-element>fieldset</a></code>, <code><a href=#the-footer-element>footer</a></code>, <code><a href=#the-form-element>form</a></code>,
<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>,
<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>, <code><a href=#the-header-element>header</a></code>,
- <code><a href=#the-hgroup-element>hgroup</a></code>, <code><a href=#the-hr-element>hr</a></code>, <code><a href=#the-menu-element>menu</a></code>,
+ <code><a href=#the-hgroup-element>hgroup</a></code>, <code><a href=#the-hr-element>hr</a></code>, <code><a href=#the-main-element>main</a></code>, <code><a href=#the-menu-element>menu</a></code>,
<code><a href=#the-nav-element>nav</a></code>, <code><a href=#the-ol-element>ol</a></code>, <code><a href=#the-p-element>p</a></code>, <code><a href=#the-pre-element>pre</a></code>,
<code><a href=#the-section-element>section</a></code>, <code><a href=#the-table-element>table</a></code>, or <code><a href=#the-ul-element>ul</a></code>,
element, or if there is no more content in the parent element and
@@ -87752,7 +87821,7 @@
<code><a href=#the-hr-element>hr</a></code>, <code><a href=#the-html-element>html</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <!-- <code>image</code>, (commented out
because this isn't an element that can end up on the stack, so it doesn't matter) -->
<code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>, <code><a href=#isindex-0>isindex</a></code>, <code><a href=#the-li-element>li</a></code>, <code><a href=#the-link-element>link</a></code>,
- <code><a href=#listing>listing</a></code>, <code><a href=#the-marquee-element>marquee</a></code>, <code><a href=#the-menu-element>menu</a></code>, <code><a href=#the-menuitem-element>menuitem</a></code>,
+ <code><a href=#listing>listing</a></code>, <code><a href=#the-main-element>main</a></code>, <code><a href=#the-marquee-element>marquee</a></code>, <code><a href=#the-menu-element>menu</a></code>, <code><a href=#the-menuitem-element>menuitem</a></code>,
<code><a href=#the-meta-element>meta</a></code>, <code><a href=#the-nav-element>nav</a></code>, <code><a href=#noembed>noembed</a></code>, <code><a href=#noframes>noframes</a></code>,
<code><a href=#the-noscript-element>noscript</a></code>, <code><a href=#the-object-element>object</a></code>, <code><a href=#the-ol-element>ol</a></code>, <code><a href=#the-p-element>p</a></code>, <code><a href=#the-param-element>param</a></code>,
<code><a href=#plaintext>plaintext</a></code>, <code><a href=#the-pre-element>pre</a></code>, <code><a href=#the-script-element>script</a></code>, <code><a href=#the-section-element>section</a></code>,
@@ -91350,7 +91419,7 @@
<dt>A start tag whose tag name is one of: "address", "article",
"aside", "blockquote", "center", "details", "dialog", "dir", "div",
"dl", "fieldset", "figcaption", "figure", "footer", "header",
- "hgroup", "menu", "nav", "ol", "p", "section", "summary", "ul"</dt>
+ "hgroup", "main", "menu", "nav", "ol", "p", "section", "summary", "ul"</dt>
<dd>
<!-- As of May 2008 this doesn't match any browser exactly, but is
@@ -91571,7 +91640,7 @@
<dt>An end tag whose tag name is one of: "address", "article",
"aside", "blockquote", "button", "center", "details", "dialog",
"dir", "div", "dl", "fieldset", "figcaption", "figure", "footer",
- "header", "hgroup", "listing", "menu", "nav", "ol", "pre",
+ "header", "hgroup", "listing", "main", "menu", "nav", "ol", "pre",
"section", "summary", "ul"</dt>
<dd>
@@ -95509,7 +95578,7 @@
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
address, blockquote, center, div, figure, figcaption, footer, form,
-header, hr, legend, listing, p, plaintext, pre, summary, xmp {
+header, hr, legend, listing, main, p, plaintext, pre, summary, xmp {
display: block;<!-- see also unicode-bidi: isolate rules-->
}
@@ -95775,7 +95844,7 @@
:dir(rtl) { direction: rtl; }
address, blockquote, center, div, figure, figcaption, footer, form,
-header, hr, legend, listing, p, plaintext, pre, summary, xmp, article,
+header, hr, legend, listing, main, p, plaintext, pre, summary, xmp, article,
aside, h1, h2, h3, h4, h5, h6, hgroup, nav, section, table, caption,
colgroup, col, thead, tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu,
ol, ul, li {
@@ -95784,7 +95853,7 @@
:matches([dir=ltr i], [dir=rtl i], [dir=auto i]):not(address):not(blockquote
):not(center):not(div):not(figure):not(figcaption):not(footer):not(form
-):not(header):not(hr):not(legend):not(listing):not(p):not(plaintext):not(pre
+):not(header):not(hr):not(legend):not(listing):not(main):not(p):not(plaintext):not(pre
):not(summary):not(xmp):not(article):not(aside):not(h1):not(h2):not(h3):not(h4
):not(h5):not(h6):not(hgroup):not(nav):not(section):not(table):not(caption
):not(colgroup):not(col):not(thead):not(tbody):not(tfoot):not(tr):not(td
@@ -95839,6 +95908,7 @@
:root:lang(cgg), :not(:lang(cgg)) > :lang(cgg) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(chr), :not(:lang(chr)) > :lang(chr) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(cs), :not(:lang(cs)) > :lang(cs) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
+:root:lang(cy), :not(:lang(cy)) > :lang(cy) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(da), :not(:lang(da)) > :lang(da) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(dav), :not(:lang(dav)) > :lang(dav) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(de), :not(:lang(de)) > :lang(de) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
@@ -95869,12 +95939,14 @@
:root:lang(hi), :not(:lang(hi)) > :lang(hi) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(hr), :not(:lang(hr)) > :lang(hr) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(hu), :not(:lang(hu)) > :lang(hu) { quotes: '\201e' '\201d' '\00bb' '\00ab' } /* „ ” » « */
+:root:lang(hy), :not(:lang(hy)) > :lang(hy) { quotes: '\00ab' '\00bb' '\00ab' '\00bb' } /* « » « » */
:root:lang(id), :not(:lang(id)) > :lang(id) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ig), :not(:lang(ig)) > :lang(ig) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(it), :not(:lang(it)) > :lang(it) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
:root:lang(ja), :not(:lang(ja)) > :lang(ja) { quotes: '\300c' '\300d' '\300e' '\300f' } /* 「 」 『 』 */
:root:lang(jgo), :not(:lang(jgo)) > :lang(jgo) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
:root:lang(jmc), :not(:lang(jmc)) > :lang(jmc) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
+:root:lang(ka), :not(:lang(ka)) > :lang(ka) { quotes: '\201e' '\201c' '\00ab' '\00bb' } /* „ “ « » */
:root:lang(kab), :not(:lang(kab)) > :lang(kab) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
:root:lang(kam), :not(:lang(kam)) > :lang(kam) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(kde), :not(:lang(kde)) > :lang(kde) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
@@ -95904,6 +95976,7 @@
:root:lang(mgo), :not(:lang(mgo)) > :lang(mgo) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(mk), :not(:lang(mk)) > :lang(mk) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(ml), :not(:lang(ml)) > :lang(ml) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
+:root:lang(mn), :not(:lang(mn)) > :lang(mn) { quotes: '\2018' '\2019' '\201c' '\201d' } /* ‘ ’ “ ” */
:root:lang(mr), :not(:lang(mr)) > :lang(mr) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ms), :not(:lang(ms)) > :lang(ms) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(mua), :not(:lang(mua)) > :lang(mua) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
@@ -100843,6 +100916,13 @@
<code title=attr-link-type><a href=#attr-link-type>type</a></code>;
<code title=attr-link-sizes><a href=#attr-link-sizes>sizes</a></code></td>
<td><code><a href=#htmllinkelement>HTMLLinkElement</a></code></td>
+ <tr><th><code><a href=#the-main-element>main</a></code></th>
+ <td>Container for the dominant contents of another element</td>
+ <td><a href=#flow-content title="Flow content">flow</a></td>
+ <td><a href=#flow-content title="Flow content">flow</a></td>
+ <td><a href=#flow-content title="Flow content">flow</a></td>
+ <td><a href=#global-attributes title="global attributes">globals</a></td>
+ <td><code><a href=#htmlelement>HTMLElement</a></code></td>
<tr><th><code><a href=#the-map-element>map</a></code></th>
<td><a href=#image-map>Image map</a></td>
<td><a href=#flow-content title="Flow content">flow</a>;
@@ -101446,6 +101526,7 @@
<code><a href=#the-kbd-element>kbd</a></code>;
<code><a href=#the-keygen-element>keygen</a></code>;
<code><a href=#the-label-element>label</a></code>;
+ <code><a href=#the-main-element>main</a></code>;
<code><a href=#the-map-element>map</a></code>;
<code><a href=#the-mark-element>mark</a></code>;
<code><a href=#math>math</a></code>;
@@ -101712,6 +101793,7 @@
<code><a href=#the-kbd-element>kbd</a></code>;
<code><a href=#the-keygen-element>keygen</a></code>;
<code><a href=#the-label-element>label</a></code>;
+ <code><a href=#the-main-element>main</a></code>;
<code><a href=#the-map-element>map</a></code>;
<code><a href=#the-mark-element>mark</a></code>;
<code><a href=#math>math</a></code>;
@@ -103090,6 +103172,9 @@
<tr><td> <code><a href=#the-link-element>link</a></code>
<td> <code><a href=#htmllinkelement>HTMLLinkElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
+ <tr><td> <code><a href=#the-main-element>main</a></code>
+ <td> <code><a href=#htmlelement>HTMLElement</a></code>
+
<tr><td> <code><a href=#the-map-element>map</a></code>
<td> <code><a href=#htmlmapelement>HTMLMapElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
Modified: images/content-venn.svg
===================================================================
--- images/content-venn.svg 2013-01-31 00:36:58 UTC (rev 7679)
+++ images/content-venn.svg 2013-01-31 21:00:11 UTC (rev 7680)
@@ -70,6 +70,7 @@
<li><code>keygen</code></li>
<li><code>label</code></li>
<li><code>link</code>*</li>
+ <li><code>main</code></li>
<li><code>map</code></li>
<li><code>mark</code></li>
<li><code>math</code></li>
Modified: index
===================================================================
--- index 2013-01-31 00:36:58 UTC (rev 7679)
+++ index 2013-01-31 21:00:11 UTC (rev 7680)
@@ -501,7 +501,8 @@
<li><a href=#the-dd-element><span class=secno>4.5.10 </span>The <code>dd</code> element</a></li>
<li><a href=#the-figure-element><span class=secno>4.5.11 </span>The <code>figure</code> element</a></li>
<li><a href=#the-figcaption-element><span class=secno>4.5.12 </span>The <code>figcaption</code> element</a></li>
- <li><a href=#the-div-element><span class=secno>4.5.13 </span>The <code>div</code> element</a></ol></li>
+ <li><a href=#the-main-element><span class=secno>4.5.13 </span>The <code>main</code> element</a></li>
+ <li><a href=#the-div-element><span class=secno>4.5.14 </span>The <code>div</code> element</a></ol></li>
<li><a href=#text-level-semantics><span class=secno>4.6 </span>Text-level semantics</a>
<ol>
<li><a href=#the-a-element><span class=secno>4.6.1 </span>The <code>a</code> element</a></li>
@@ -11764,6 +11765,7 @@
<li><code><a href=#the-keygen-element>keygen</a></code></li>
<li><code><a href=#the-label-element>label</a></code></li>
<li><code><a href=#the-link-element>link</a></code> (if the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute is present)</li>
+ <li><code><a href=#the-main-element>main</a></code></li>
<li><code><a href=#the-map-element>map</a></code></li>
<li><code><a href=#the-mark-element>mark</a></code></li>
<li><code><a href=#math>math</a></code></li>
@@ -12183,6 +12185,7 @@
<li><code><a href=#the-kbd-element>kbd</a></code></li>
<li><code><a href=#the-keygen-element>keygen</a></code></li>
<li><code><a href=#the-label-element>label</a></code></li>
+ <li><code><a href=#the-main-element>main</a></code></li>
<li><code><a href=#the-map-element>map</a></code></li>
<li><code><a href=#the-mark-element>mark</a></code></li>
<li><code><a href=#math>math</a></code></li>
@@ -12956,6 +12959,10 @@
<td><code title=attr-aria-role-listitem>listitem</code> role
<td>Role must be either <code title=attr-aria-role-listitem>listitem</code>, <code title=attr-aria-role-menuitemcheckbox>menuitemcheckbox</code>, <code title=attr-aria-role-menuitemradio>menuitemradio</code>, <code title=attr-aria-role-option>option</code>, <code title=attr-aria-role-tab>tab</code>, or <code title=attr-aria-role-treeitem>treeitem</code>
+ <tr><td><code><a href=#the-main-element>main</a></code> element
+ <td><code title=attr-aria-role-main>main</code> role
+ <td>Role must be either <code title=attr-aria-role-document>document</code>, <code title=attr-aria-role-application>application</code>, or <code title=attr-aria-role-main>main</code>
+
<tr><td><code><a href=#the-menu-element>menu</a></code> element with a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#toolbar-state title="toolbar state">toolbar</a> state
<td><code title=attr-aria-role-toolbar>toolbar</code> role
<td>Role must be either <code title=attr-aria-role-directory>directory</code>, <code title=attr-aria-role-list>list</code>, <code title=attr-aria-role-listbox>listbox</code>, <code title=attr-aria-role-menu>menu</code>, <code title=attr-aria-role-menubar>menubar</code>, <code title=attr-aria-role-tablist>tablist</code>, <code title="attr-aria-role-toolbar ">toolbar</code>, or <code title=attr-aria-role-tree>tree</code>
@@ -17250,21 +17257,21 @@
</ul>
</nav>
</header>
- <div>
+ <main>
<article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">My Day at the Beach</h1>
</header>
- <div itemprop="articleBody">
+ <main itemprop="articleBody">
<p>Today I went to the beach and had a lot of fun.</p>
<em>...more content...</em>
- </div>
+ </main>
<footer>
<p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
</footer>
</article>
<em>...more blog posts...</em>
- </div>
+ </main>
<footer>
<p>Copyright ©
<span itemprop="copyrightYear">2010</span>
@@ -17276,7 +17283,7 @@
</footer>
</body></pre>
- <p>Notice the <code><a href=#the-div-element>div</a></code> elements being used to wrap all the contents of the page other
+ <p>Notice the <code><a href=#the-main-element>main</a></code> elements being used to wrap all the contents of the page other
than the header and footer, and all the contents of the blog entry other than its header and
footer.</p>
@@ -19932,7 +19939,7 @@
- <h4 id=the-div-element><span class=secno>4.5.13 </span>The <dfn><code>div</code></dfn> element</h4>
+ <h4 id=the-main-element><span class=secno>4.5.13 </span>The <dfn><code>main</code></dfn> element</h4>
<dl class=element><dt><a href=#element-dfn-categories title=element-dfn-categories>Categories</a>:</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -19944,6 +19951,68 @@
<dt><a href=#element-dfn-attributes title=element-dfn-attributes>Content attributes</a>:</dt>
<dd><a href=#global-attributes>Global attributes</a></dd>
<dt><a href=#element-dfn-dom title=element-dfn-dom>DOM interface</a>:</dt><!--TOPIC:DOM APIs-->
+ <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+ </dl><!--TOPIC:HTML--><p>The <code><a href=#the-main-element>main</a></code> element can be used as a container for the dominant contents of another
+ element. It <a href=#represents>represents</a> its children.</p>
+
+ <p class=note>The <code><a href=#the-main-element>main</a></code> element is distinct from the <code><a href=#the-section-element>section</a></code> and
+ <code><a href=#the-article-element>article</a></code> elements in that the <code><a href=#the-main-element>main</a></code> element does not contribute to the
+ document <a href=#outline>outline</a>.</p>
+
+ <div class=example>
+
+ <p>In this example, the author has used a presentation where each component of the page is
+ rendered in a box. To wrap the main content of the page (as opposed to the header, the footer,
+ the navigation bar, and a sidebar), the <code><a href=#the-main-element>main</a></code> element is used.</p>
+
+ <pre><!DOCTYPE html>
+<title>RPG System 17</title>
+<style>
+ header, nav, aside, main, footer {
+ margin: 0.5em; border: thin solid; padding: 0.5em;
+ background: #EFF; color: black; box-shadow: 0 0 0.25em #033;
+ }
+ h1, h2, p { margin: 0; }
+ nav, main { float: left; }
+ aside { float: right; }
+ footer { clear: both; }
+</style>
+<header>
+ <h1>System Eighteen</h1>
+</header>
+<nav>
+ <a href="../16/">← System 17</a>
+ <a href="../18/">RPXIX →</a>
+</nav>
+<aside>
+ <p>This system has no HP mechanic, so there's no healing.
+</aside>
+<main>
+ <h2>Character creation</h2>
+ <p>Attributes (magic, strength, agility) are purchased at the cost of one point per level.</p>
+ <h2>Rolls</h2>
+ <p>Each encounter, roll the dice for all your skills. If you roll more than the opponent, you win.</p>
+</main>
+<footer>
+ <p>Copyright © 2013
+</footer></pre>
+
+ </div>
+
+
+
+ <h4 id=the-div-element><span class=secno>4.5.14 </span>The <dfn><code>div</code></dfn> element</h4>
+
+ <dl class=element><dt><a href=#element-dfn-categories title=element-dfn-categories>Categories</a>:</dt>
+ <dd><a href=#flow-content>Flow content</a>.</dd>
+ <dd><a href=#palpable-content>Palpable content</a>.</dd>
+ <dt><a href=#element-dfn-contexts title=element-dfn-contexts>Contexts in which this element can be used</a>:</dt>
+ <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
+ <dt><a href=#element-dfn-content-model title=element-dfn-content-model>Content model</a>:</dt>
+ <dd><a href=#flow-content>Flow content</a>.</dd>
+ <dt><a href=#element-dfn-attributes title=element-dfn-attributes>Content attributes</a>:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dt><a href=#element-dfn-dom title=element-dfn-dom>DOM interface</a>:</dt><!--TOPIC:DOM APIs-->
<dd>
<pre class=idl>interface <dfn id=htmldivelement>HTMLDivElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
</dd>
@@ -61031,13 +61100,13 @@
<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
+ for example for styling purposes, then the <code><a href=#the-main-element>main</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
+ <code><a href=#the-main-element>main</a></code> for the main content instead of leaving it
implied:</p>
<pre><!DOCTYPE HTML>
@@ -61045,7 +61114,7 @@
<head>
<title> My Toys </title>
<style>
- body > div { background: navy; color: yellow; }
+ body > main { background: navy; color: yellow; }
</style>
</head>
<body>
@@ -61056,11 +61125,11 @@
<p><a href="/">Home</a></p>
<p><a href="/contact">Contact</a></p>
</nav>
-<strong> <div>
+<strong> <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>
- </div></strong>
+ </main></strong>
<footer>
<p>© copyright 2010 by the boy</p>
</footer>
@@ -86435,7 +86504,7 @@
<code><a href=#the-fieldset-element>fieldset</a></code>, <code><a href=#the-footer-element>footer</a></code>, <code><a href=#the-form-element>form</a></code>,
<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>,
<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>, <code><a href=#the-header-element>header</a></code>,
- <code><a href=#the-hgroup-element>hgroup</a></code>, <code><a href=#the-hr-element>hr</a></code>, <code><a href=#the-menu-element>menu</a></code>,
+ <code><a href=#the-hgroup-element>hgroup</a></code>, <code><a href=#the-hr-element>hr</a></code>, <code><a href=#the-main-element>main</a></code>, <code><a href=#the-menu-element>menu</a></code>,
<code><a href=#the-nav-element>nav</a></code>, <code><a href=#the-ol-element>ol</a></code>, <code><a href=#the-p-element>p</a></code>, <code><a href=#the-pre-element>pre</a></code>,
<code><a href=#the-section-element>section</a></code>, <code><a href=#the-table-element>table</a></code>, or <code><a href=#the-ul-element>ul</a></code>,
element, or if there is no more content in the parent element and
@@ -87752,7 +87821,7 @@
<code><a href=#the-hr-element>hr</a></code>, <code><a href=#the-html-element>html</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <!-- <code>image</code>, (commented out
because this isn't an element that can end up on the stack, so it doesn't matter) -->
<code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>, <code><a href=#isindex-0>isindex</a></code>, <code><a href=#the-li-element>li</a></code>, <code><a href=#the-link-element>link</a></code>,
- <code><a href=#listing>listing</a></code>, <code><a href=#the-marquee-element>marquee</a></code>, <code><a href=#the-menu-element>menu</a></code>, <code><a href=#the-menuitem-element>menuitem</a></code>,
+ <code><a href=#listing>listing</a></code>, <code><a href=#the-main-element>main</a></code>, <code><a href=#the-marquee-element>marquee</a></code>, <code><a href=#the-menu-element>menu</a></code>, <code><a href=#the-menuitem-element>menuitem</a></code>,
<code><a href=#the-meta-element>meta</a></code>, <code><a href=#the-nav-element>nav</a></code>, <code><a href=#noembed>noembed</a></code>, <code><a href=#noframes>noframes</a></code>,
<code><a href=#the-noscript-element>noscript</a></code>, <code><a href=#the-object-element>object</a></code>, <code><a href=#the-ol-element>ol</a></code>, <code><a href=#the-p-element>p</a></code>, <code><a href=#the-param-element>param</a></code>,
<code><a href=#plaintext>plaintext</a></code>, <code><a href=#the-pre-element>pre</a></code>, <code><a href=#the-script-element>script</a></code>, <code><a href=#the-section-element>section</a></code>,
@@ -91350,7 +91419,7 @@
<dt>A start tag whose tag name is one of: "address", "article",
"aside", "blockquote", "center", "details", "dialog", "dir", "div",
"dl", "fieldset", "figcaption", "figure", "footer", "header",
- "hgroup", "menu", "nav", "ol", "p", "section", "summary", "ul"</dt>
+ "hgroup", "main", "menu", "nav", "ol", "p", "section", "summary", "ul"</dt>
<dd>
<!-- As of May 2008 this doesn't match any browser exactly, but is
@@ -91571,7 +91640,7 @@
<dt>An end tag whose tag name is one of: "address", "article",
"aside", "blockquote", "button", "center", "details", "dialog",
"dir", "div", "dl", "fieldset", "figcaption", "figure", "footer",
- "header", "hgroup", "listing", "menu", "nav", "ol", "pre",
+ "header", "hgroup", "listing", "main", "menu", "nav", "ol", "pre",
"section", "summary", "ul"</dt>
<dd>
@@ -95509,7 +95578,7 @@
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
address, blockquote, center, div, figure, figcaption, footer, form,
-header, hr, legend, listing, p, plaintext, pre, summary, xmp {
+header, hr, legend, listing, main, p, plaintext, pre, summary, xmp {
display: block;<!-- see also unicode-bidi: isolate rules-->
}
@@ -95775,7 +95844,7 @@
:dir(rtl) { direction: rtl; }
address, blockquote, center, div, figure, figcaption, footer, form,
-header, hr, legend, listing, p, plaintext, pre, summary, xmp, article,
+header, hr, legend, listing, main, p, plaintext, pre, summary, xmp, article,
aside, h1, h2, h3, h4, h5, h6, hgroup, nav, section, table, caption,
colgroup, col, thead, tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu,
ol, ul, li {
@@ -95784,7 +95853,7 @@
:matches([dir=ltr i], [dir=rtl i], [dir=auto i]):not(address):not(blockquote
):not(center):not(div):not(figure):not(figcaption):not(footer):not(form
-):not(header):not(hr):not(legend):not(listing):not(p):not(plaintext):not(pre
+):not(header):not(hr):not(legend):not(listing):not(main):not(p):not(plaintext):not(pre
):not(summary):not(xmp):not(article):not(aside):not(h1):not(h2):not(h3):not(h4
):not(h5):not(h6):not(hgroup):not(nav):not(section):not(table):not(caption
):not(colgroup):not(col):not(thead):not(tbody):not(tfoot):not(tr):not(td
@@ -95839,6 +95908,7 @@
:root:lang(cgg), :not(:lang(cgg)) > :lang(cgg) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(chr), :not(:lang(chr)) > :lang(chr) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(cs), :not(:lang(cs)) > :lang(cs) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
+:root:lang(cy), :not(:lang(cy)) > :lang(cy) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(da), :not(:lang(da)) > :lang(da) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(dav), :not(:lang(dav)) > :lang(dav) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(de), :not(:lang(de)) > :lang(de) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
@@ -95869,12 +95939,14 @@
:root:lang(hi), :not(:lang(hi)) > :lang(hi) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(hr), :not(:lang(hr)) > :lang(hr) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(hu), :not(:lang(hu)) > :lang(hu) { quotes: '\201e' '\201d' '\00bb' '\00ab' } /* „ ” » « */
+:root:lang(hy), :not(:lang(hy)) > :lang(hy) { quotes: '\00ab' '\00bb' '\00ab' '\00bb' } /* « » « » */
:root:lang(id), :not(:lang(id)) > :lang(id) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ig), :not(:lang(ig)) > :lang(ig) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(it), :not(:lang(it)) > :lang(it) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
:root:lang(ja), :not(:lang(ja)) > :lang(ja) { quotes: '\300c' '\300d' '\300e' '\300f' } /* 「 」 『 』 */
:root:lang(jgo), :not(:lang(jgo)) > :lang(jgo) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
:root:lang(jmc), :not(:lang(jmc)) > :lang(jmc) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
+:root:lang(ka), :not(:lang(ka)) > :lang(ka) { quotes: '\201e' '\201c' '\00ab' '\00bb' } /* „ “ « » */
:root:lang(kab), :not(:lang(kab)) > :lang(kab) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
:root:lang(kam), :not(:lang(kam)) > :lang(kam) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(kde), :not(:lang(kde)) > :lang(kde) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
@@ -95904,6 +95976,7 @@
:root:lang(mgo), :not(:lang(mgo)) > :lang(mgo) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(mk), :not(:lang(mk)) > :lang(mk) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(ml), :not(:lang(ml)) > :lang(ml) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
+:root:lang(mn), :not(:lang(mn)) > :lang(mn) { quotes: '\2018' '\2019' '\201c' '\201d' } /* ‘ ’ “ ” */
:root:lang(mr), :not(:lang(mr)) > :lang(mr) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ms), :not(:lang(ms)) > :lang(ms) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(mua), :not(:lang(mua)) > :lang(mua) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
@@ -100843,6 +100916,13 @@
<code title=attr-link-type><a href=#attr-link-type>type</a></code>;
<code title=attr-link-sizes><a href=#attr-link-sizes>sizes</a></code></td>
<td><code><a href=#htmllinkelement>HTMLLinkElement</a></code></td>
+ <tr><th><code><a href=#the-main-element>main</a></code></th>
+ <td>Container for the dominant contents of another element</td>
+ <td><a href=#flow-content title="Flow content">flow</a></td>
+ <td><a href=#flow-content title="Flow content">flow</a></td>
+ <td><a href=#flow-content title="Flow content">flow</a></td>
+ <td><a href=#global-attributes title="global attributes">globals</a></td>
+ <td><code><a href=#htmlelement>HTMLElement</a></code></td>
<tr><th><code><a href=#the-map-element>map</a></code></th>
<td><a href=#image-map>Image map</a></td>
<td><a href=#flow-content title="Flow content">flow</a>;
@@ -101446,6 +101526,7 @@
<code><a href=#the-kbd-element>kbd</a></code>;
<code><a href=#the-keygen-element>keygen</a></code>;
<code><a href=#the-label-element>label</a></code>;
+ <code><a href=#the-main-element>main</a></code>;
<code><a href=#the-map-element>map</a></code>;
<code><a href=#the-mark-element>mark</a></code>;
<code><a href=#math>math</a></code>;
@@ -101712,6 +101793,7 @@
<code><a href=#the-kbd-element>kbd</a></code>;
<code><a href=#the-keygen-element>keygen</a></code>;
<code><a href=#the-label-element>label</a></code>;
+ <code><a href=#the-main-element>main</a></code>;
<code><a href=#the-map-element>map</a></code>;
<code><a href=#the-mark-element>mark</a></code>;
<code><a href=#math>math</a></code>;
@@ -103090,6 +103172,9 @@
<tr><td> <code><a href=#the-link-element>link</a></code>
<td> <code><a href=#htmllinkelement>HTMLLinkElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
+ <tr><td> <code><a href=#the-main-element>main</a></code>
+ <td> <code><a href=#htmlelement>HTMLElement</a></code>
+
<tr><td> <code><a href=#the-map-element>map</a></code>
<td> <code><a href=#htmlmapelement>HTMLMapElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
Modified: source
===================================================================
--- source 2013-01-31 00:36:58 UTC (rev 7679)
+++ source 2013-01-31 21:00:11 UTC (rev 7680)
@@ -12022,6 +12022,7 @@
<li><code>keygen</code></li>
<li><code>label</code></li>
<li><code>link</code> (if the <code title="attr-itemprop">itemprop</code> attribute is present)</li>
+ <li><code>main</code></li>
<li><code>map</code></li>
<li><code>mark</code></li>
<li><code>math</code></li>
@@ -12482,6 +12483,7 @@
<li><code>kbd</code></li>
<li><code>keygen</code></li>
<li><code>label</code></li>
+ <li><code>main</code></li>
<li><code>map</code></li>
<li><code>mark</code></li>
<li><code>math</code></li>
@@ -13384,6 +13386,11 @@
<td>Role must be either <code title="attr-aria-role-listitem">listitem</code>, <code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code>, <code title="attr-aria-role-menuitemradio">menuitemradio</code>, <code title="attr-aria-role-option">option</code>, <code title="attr-aria-role-tab">tab</code>, or <code title="attr-aria-role-treeitem">treeitem</code>
<tr>
+ <td><code>main</code> element
+ <td><code title="attr-aria-role-main">main</code> role
+ <td>Role must be either <code title="attr-aria-role-document">document</code>, <code title="attr-aria-role-application">application</code>, or <code title="attr-aria-role-main">main</code>
+
+ <tr>
<td><code>menu</code> element with a <code title="attr-menu-type">type</code> attribute in the <span title="toolbar state">toolbar</span> state
<td><code title="attr-aria-role-toolbar">toolbar</code> role
<td>Role must be either <code title="attr-aria-role-directory">directory</code>, <code title="attr-aria-role-list">list</code>, <code title="attr-aria-role-listbox">listbox</code>, <code title="attr-aria-role-menu">menu</code>, <code title="attr-aria-role-menubar">menubar</code>, <code title="attr-aria-role-tablist">tablist</code>, <code title="attr-aria-role-toolbar ">toolbar</code>, or <code title="attr-aria-role-tree">tree</code>
@@ -18192,21 +18199,21 @@
</ul>
</nav>
</header>
- <div>
+ <main>
<article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">My Day at the Beach</h1>
</header>
- <div itemprop="articleBody">
+ <main itemprop="articleBody">
<p>Today I went to the beach and had a lot of fun.</p>
<em>...more content...</em>
- </div>
+ </main>
<footer>
<p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
</footer>
</article>
<em>...more blog posts...</em>
- </div>
+ </main>
<footer>
<p>Copyright ©
<span itemprop="copyrightYear">2010</span>
@@ -18218,7 +18225,7 @@
</footer>
</body></pre>
- <p>Notice the <code>div</code> elements being used to wrap all the contents of the page other
+ <p>Notice the <code>main</code> elements being used to wrap all the contents of the page other
than the header and footer, and all the contents of the blog entry other than its header and
footer.</p>
@@ -21063,6 +21070,71 @@
+ <h4>The <dfn><code>main</code></dfn> element</h4>
+
+ <dl class="element">
+ <dt><span title="element-dfn-categories">Categories</span>:</dt>
+ <dd><span>Flow content</span>.</dd>
+ <dd><span>Palpable content</span>.</dd>
+ <dt><span title="element-dfn-contexts">Contexts in which this element can be used</span>:</dt>
+ <dd>Where <span>flow content</span> is expected.</dd>
+ <dt><span title="element-dfn-content-model">Content model</span>:</dt>
+ <dd><span>Flow content</span>.</dd>
+ <dt><span title="element-dfn-attributes">Content attributes</span>:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dt><span title="element-dfn-dom">DOM interface</span>:</dt><!--TOPIC:DOM APIs-->
+ <dd>Uses <code>HTMLElement</code>.</dd>
+ </dl><!--TOPIC:HTML-->
+
+ <p>The <code>main</code> element can be used as a container for the dominant contents of another
+ element. It <span>represents</span> its children.</p>
+
+ <p class="note">The <code>main</code> element is distinct from the <code>section</code> and
+ <code>article</code> elements in that the <code>main</code> element does not contribute to the
+ document <span>outline</span>.</p>
+
+ <div class="example">
+
+ <p>In this example, the author has used a presentation where each component of the page is
+ rendered in a box. To wrap the main content of the page (as opposed to the header, the footer,
+ the navigation bar, and a sidebar), the <code>main</code> element is used.</p>
+
+ <pre><!DOCTYPE html>
+<title>RPG System 17</title>
+<style>
+ header, nav, aside, main, footer {
+ margin: 0.5em; border: thin solid; padding: 0.5em;
+ background: #EFF; color: black; box-shadow: 0 0 0.25em #033;
+ }
+ h1, h2, p { margin: 0; }
+ nav, main { float: left; }
+ aside { float: right; }
+ footer { clear: both; }
+</style>
+<header>
+ <h1>System Eighteen</h1>
+</header>
+<nav>
+ <a href="../16/">← System 17</a>
+ <a href="../18/">RPXIX →</a>
+</nav>
+<aside>
+ <p>This system has no HP mechanic, so there's no healing.
+</aside>
+<main>
+ <h2>Character creation</h2>
+ <p>Attributes (magic, strength, agility) are purchased at the cost of one point per level.</p>
+ <h2>Rolls</h2>
+ <p>Each encounter, roll the dice for all your skills. If you roll more than the opponent, you win.</p>
+</main>
+<footer>
+ <p>Copyright © 2013
+</footer></pre>
+
+ </div>
+
+
+
<h4>The <dfn><code>div</code></dfn> element</h4>
<dl class="element">
@@ -71389,13 +71461,13 @@
<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
+ for example for styling purposes, then the <code>main</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
+ <code>main</code> for the main content instead of leaving it
implied:</p>
<pre><!DOCTYPE HTML>
@@ -71403,7 +71475,7 @@
<head>
<title> My Toys </title>
<style>
- body > div { background: navy; color: yellow; }
+ body > main { background: navy; color: yellow; }
</style>
</head>
<body>
@@ -71414,11 +71486,11 @@
<p><a href="/">Home</a></p>
<p><a href="/contact">Contact</a></p>
</nav>
-<strong> <div>
+<strong> <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>
- </div></strong>
+ </main></strong>
<footer>
<p>© copyright 2010 by the boy</p>
</footer>
@@ -100335,7 +100407,7 @@
<code>fieldset</code>, <code>footer</code>, <code>form</code>,
<code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>,
<code>h5</code>, <code>h6</code>, <code>header</code>,
- <code>hgroup</code>, <code>hr</code>, <code>menu</code>,
+ <code>hgroup</code>, <code>hr</code>, <code>main</code>, <code>menu</code>,
<code>nav</code>, <code>ol</code>, <code>p</code>, <code>pre</code>,
<code>section</code>, <code>table</code>, or <code>ul</code>,
element, or if there is no more content in the parent element and
@@ -101844,7 +101916,7 @@
<code>hr</code>, <code>html</code>, <code>iframe</code>, <!-- <code>image</code>, (commented out
because this isn't an element that can end up on the stack, so it doesn't matter) -->
<code>img</code>, <code>input</code>, <code>isindex</code>, <code>li</code>, <code>link</code>,
- <code>listing</code>, <code>marquee</code>, <code>menu</code>, <code>menuitem</code>,
+ <code>listing</code>, <code>main</code>, <code>marquee</code>, <code>menu</code>, <code>menuitem</code>,
<code>meta</code>, <code>nav</code>, <code>noembed</code>, <code>noframes</code>,
<code>noscript</code>, <code>object</code>, <code>ol</code>, <code>p</code>, <code>param</code>,
<code>plaintext</code>, <code>pre</code>, <code>script</code>, <code>section</code>,
@@ -105959,7 +106031,7 @@
<dt>A start tag whose tag name is one of: "address", "article",
"aside", "blockquote", "center", "details", "dialog", "dir", "div",
"dl", "fieldset", "figcaption", "figure", "footer", "header",
- "hgroup", "menu", "nav", "ol", "p", "section", "summary", "ul"</dt>
+ "hgroup", "main", "menu", "nav", "ol", "p", "section", "summary", "ul"</dt>
<dd>
<!-- As of May 2008 this doesn't match any browser exactly, but is
@@ -106188,7 +106260,7 @@
<dt>An end tag whose tag name is one of: "address", "article",
"aside", "blockquote", "button", "center", "details", "dialog",
"dir", "div", "dl", "fieldset", "figcaption", "figure", "footer",
- "header", "hgroup", "listing", "menu", "nav", "ol", "pre",
+ "header", "hgroup", "listing", "main", "menu", "nav", "ol", "pre",
"section", "summary", "ul"</dt>
<dd>
@@ -110645,7 +110717,7 @@
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
address, blockquote, center, div, figure, figcaption, footer, form,
-header, hr, legend, listing, p, plaintext, pre, summary, xmp {
+header, hr, legend, listing, main, p, plaintext, pre, summary, xmp {
display: block;<!-- see also unicode-bidi: isolate rules-->
}
@@ -110955,7 +111027,7 @@
:dir(rtl) { direction: rtl; }
address, blockquote, center, div, figure, figcaption, footer, form,
-header, hr, legend, listing, p, plaintext, pre, summary, xmp, article,
+header, hr, legend, listing, main, p, plaintext, pre, summary, xmp, article,
aside, h1, h2, h3, h4, h5, h6, hgroup, nav, section, table, caption,
colgroup, col, thead, tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu,
ol, ul, li {
@@ -110964,7 +111036,7 @@
:matches([dir=ltr i], [dir=rtl i], [dir=auto i]):not(address):not(blockquote
):not(center):not(div):not(figure):not(figcaption):not(footer):not(form
-):not(header):not(hr):not(legend):not(listing):not(p):not(plaintext):not(pre
+):not(header):not(hr):not(legend):not(listing):not(main):not(p):not(plaintext):not(pre
):not(summary):not(xmp):not(article):not(aside):not(h1):not(h2):not(h3):not(h4
):not(h5):not(h6):not(hgroup):not(nav):not(section):not(table):not(caption
):not(colgroup):not(col):not(thead):not(tbody):not(tfoot):not(tr):not(td
@@ -117959,6 +118031,16 @@
</tr>
<tr>
+ <th><code>main</code></th>
+ <td>Container for the dominant contents of another element</td>
+ <td><span title="Flow content">flow</span></td>
+ <td><span title="Flow content">flow</span></td>
+ <td><span title="Flow content">flow</span></td>
+ <td><span title="global attributes">globals</span></td>
+ <td><code>HTMLElement</code></td>
+ </tr>
+
+ <tr>
<th><code>map</code></th>
<td><span>Image map</span></td>
<td><span title="Flow content">flow</span>;
@@ -118716,6 +118798,7 @@
<code>kbd</code>;
<code>keygen</code>;
<code>label</code>;
+ <code>main</code>;
<code>map</code>;
<code>mark</code>;
<code>math</code>;
@@ -118994,6 +119077,7 @@
<code>kbd</code>;
<code>keygen</code>;
<code>label</code>;
+ <code>main</code>;
<code>map</code>;
<code>mark</code>;
<code>math</code>;
@@ -120681,6 +120765,10 @@
<td> <code>HTMLLinkElement</code> : <code>HTMLElement</code>
<tr>
+ <td> <code>main</code>
+ <td> <code>HTMLElement</code>
+
+ <tr>
<td> <code>map</code>
<td> <code>HTMLMapElement</code> : <code>HTMLElement</code>
More information about the Commit-Watchers
mailing list