[html5] r8759 - [e] (0) Add some examples of app-like usages to increase example variety Fixing [...]
whatwg at whatwg.org
whatwg at whatwg.org
Thu Sep 11 16:01:23 PDT 2014
Author: ianh
Date: 2014-09-11 16:01:18 -0700 (Thu, 11 Sep 2014)
New Revision: 8759
Modified:
complete.html
index
source
Log:
[e] (0) Add some examples of app-like usages to increase example variety
Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=25747
Affected topics: CSS, HTML
Modified: complete.html
===================================================================
--- complete.html 2014-09-09 23:39:34 UTC (rev 8758)
+++ complete.html 2014-09-11 23:01:18 UTC (rev 8759)
@@ -291,7 +291,7 @@
</style><link rel=stylesheet href=status.css><body onload=init()>
<header id=head class="head with-buttons">
<p><a href=//www.whatwg.org/ class=logo><img src=/images/logo width=101 alt=WHATWG height=101></a></p>
- <hgroup><h1 class=allcaps>HTML</h1><h2 id=living-standard-—-last-updated-[date:-01-jan-1901] class="no-num no-toc">Living Standard — Last Updated <span class=pubdate>9 September 2014</span></h2></hgroup>
+ <hgroup><h1 class=allcaps>HTML</h1><h2 id=living-standard-—-last-updated-[date:-01-jan-1901] class="no-num no-toc">Living Standard — Last Updated <span class=pubdate>11 September 2014</span></h2></hgroup>
<nav>
<div>
@@ -10419,8 +10419,41 @@
</div>
+ <div class=example>
+ <p>In this example, <code id=the-article-element:the-article-element-12><a href=#the-article-element>article</a></code> elements are used to host widgets on a portal page.</p>
+ <pre><DOCTYPE HTML>
+<title>eHome Portal</title>
+<link rel=stylesheet href="/styles/main.js">
+<article>
+ <h1>Stocks</h1>
+ <style scoped> @import url(/widgets/stocks/look.css); </style>
+ <script src="/widgets/stocks/core.js"></script>
+ <table>
+ <thead> <tr> <th> Stock <th> Value <th> Delta
+ <tbody> <template> <tr> <td> <td> <td> </template>
+ </table>
+ <p> <input type=button value="Refresh" onclick="stocks.refresh()">
+</article>
+<article>
+ <h1>News</h1>
+ <style scoped> @import url(/widgets/news/look.css); </style>
+ <script src="/widgets/news/core.js"></script>
+ <ul>
+ <template>
+ <li>
+ <p><img src alt title> <strong></strong>
+ <p>
+ </template>
+ </ul>
+ <p> <input type=button value="Refresh" onclick="news.refresh()">
+</article></pre>
+
+ </div>
+
+
+
<h4 id=the-section-element>4.3.3 The <dfn><code>section</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories id=the-section-element:concept-element-categories>Categories</a>:<dd><a href=#flow-content-2 id=the-section-element:flow-content-2>Flow content</a>.<dd><a href=#sectioning-content-2 id=the-section-element:sectioning-content-2>Sectioning content</a>.<dd><a href=#palpable-content-2 id=the-section-element:palpable-content-2>Palpable content</a>.<dt><a href=#concept-element-contexts id=the-section-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a href=#flow-content-2 id=the-section-element:flow-content-2-2>flow content</a> is expected.<dt><a href=#concept-element-content-model id=the-section-element:concept-element-content-model>Content model</a>:<dd><a href=#flow-content-2 id=the-section-element:flow-content-2-3>Flow content</a>.<dt><a href=#concept-element-tag-omission id=the-section-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissib
le.<dt><a href=#concept-element-attributes id=the-section-element:concept-element-attributes>Content attributes</a>:<dd><a href=#global-attributes id=the-section-element:global-attributes>Global attributes</a><dt><a href=#concept-element-dom id=the-section-element:concept-element-dom>DOM interface</a>:<dd>Uses <code id=the-section-element:htmlelement><a href=#htmlelement>HTMLElement</a></code>.</dl>
@@ -10721,8 +10754,27 @@
</div>
+ <div class=example>
+ <p>In this example, <code id=the-nav-element:the-nav-element-6><a href=#the-nav-element>nav</a></code> is used in an e-mail application, to let the user switch
+ folders:</p>
+ <pre><p><input type=button value="Compose" onclick="compose()"></p>
+<nav>
+ <h1>Folders</h1>
+ <ul>
+ <li> <a href="/inbox" onclick="return openFolder(this.href)">Inbox</a> <span class=count></span>
+ <li> <a href="/sent" onclick="return openFolder(this.href)">Sent</a>
+ <li> <a href="/drafts" onclick="return openFolder(this.href)">Drafts</a>
+ <li> <a href="/trash" onclick="return openFolder(this.href)">Trash</a>
+ <li> <a href="/customers" onclick="return openFolder(this.href)">Customers</a>
+ </ul>
+</nav></pre>
+
+ </div>
+
+
+
<h4 id=the-aside-element>4.3.5 The <dfn><code>aside</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories id=the-aside-element:concept-element-categories>Categories</a>:<dd><a href=#flow-content-2 id=the-aside-element:flow-content-2>Flow content</a>.<dd><a href=#sectioning-content-2 id=the-aside-element:sectioning-content-2>Sectioning content</a>.<dd><a href=#palpable-content-2 id=the-aside-element:palpable-content-2>Palpable content</a>.<dt><a href=#concept-element-contexts id=the-aside-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a href=#flow-content-2 id=the-aside-element:flow-content-2-2>flow content</a> is expected.<dt><a href=#concept-element-content-model id=the-aside-element:concept-element-content-model>Content model</a>:<dd><a href=#flow-content-2 id=the-aside-element:flow-content-2-3>Flow content</a>, but with no <code id=the-aside-element:the-main-element><a href=#the-main-element>main</a></code> element descendants.<dt><a href=#concept-element-tag-omission id=th
e-aside-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=#concept-element-attributes id=the-aside-element:concept-element-attributes>Content attributes</a>:<dd><a href=#global-attributes id=the-aside-element:global-attributes>Global attributes</a><dt><a href=#concept-element-dom id=the-aside-element:concept-element-dom>DOM interface</a>:<dd>Uses <code id=the-aside-element:htmlelement><a href=#htmlelement>HTMLElement</a></code>.</dl>
@@ -10994,8 +11046,42 @@
</div>
+ <div class=example>
+ <p>In the following example, an <code id=the-hgroup-element:the-hgroup-element-8><a href=#the-hgroup-element>hgroup</a></code> element is used to mark up a two-level
+ heading in a wizard-style dialog box:</p>
+ <pre><dialog onclose="walletSetup.continue(this.returnValue)">
+ <hgroup>
+ <h1>Wallet Setup</h1>
+ <h2>Configure your Wallet funding source</h2>
+ </hgroup>
+ <p>Your Wallet can be used to buy wands at the merchant in town, to buy potions from travelling
+ salesmen you may find in the dungeons, and to pay for mercenaries.</p>
+ <p>We support two payment sources:</p>
+ <form method=dialog>
+ <fieldset oninput="this.getElementsByTagName('input')[0].checked = true">
+ <legend> <label> <input type=radio name=payment-type value=cc> Credit Card </label> </legend>
+ <p><label>Name on card: <input name=cc1 autocomplete="section-cc cc-name" placeholder="Y. Name"></label>
+ <p><label>Card number: <input name=cc2 inputmode=numeric autocomplete="section-cc cc-number" placeholder="6331 1019 9999 0016"></label>
+ <p><label>Expiry Date: <input name=cc3 type=month autocomplete="section-cc cc-exp" placeholder="2020-02"></label>
+ <p><label>Security Code: <input name=cc4 inputmode=numeric autocomplete="section-cc cc-csc" placeholder="246"></label>
+ </fieldset>
+ <fieldset oninput="this.getElementsByTagName('input')[0].checked = true">
+ <legend> <label> <input type=radio name=payment-type value=bank> Checking Account </label> </legend>
+ <p><label>Name on account: <input name=bank1 autocomplete="section-bank cc-name"></label>
+ <p><label>Routing number: <input name=bank2 inputmode=numeric></label>
+ <p><label>Account number: <input name=bank3 inputmode=numeric></label>
+ </fieldset>
+ <button type=submit value="back"> ← Back </button>
+ <button type=submit value="next"> Next → </button>
+ </form>
+</dialog></pre>
+
+ </div>
+
+
+
<h4 id=the-header-element>4.3.8 The <dfn><code>header</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories id=the-header-element:concept-element-categories>Categories</a>:<dd><a href=#flow-content-2 id=the-header-element:flow-content-2>Flow content</a>.<dd><a href=#palpable-content-2 id=the-header-element:palpable-content-2>Palpable content</a>.<dt><a href=#concept-element-contexts id=the-header-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a href=#flow-content-2 id=the-header-element:flow-content-2-2>flow content</a> is expected.<dt><a href=#concept-element-content-model id=the-header-element:concept-element-content-model>Content model</a>:<dd><a href=#flow-content-2 id=the-header-element:flow-content-2-3>Flow content</a>, but with no <code id=the-header-element:the-header-element><a href=#the-header-element>header</a></code>, <code id=the-header-element:the-footer-element><a href=#the-footer-element>footer</a></code>, or <code id=the-header-element:the-main-element><a href=#
the-main-element>main</a></code> element descendants.<dt><a href=#concept-element-tag-omission id=the-header-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=#concept-element-attributes id=the-header-element:concept-element-attributes>Content attributes</a>:<dd><a href=#global-attributes id=the-header-element:global-attributes>Global attributes</a><dt><a href=#concept-element-dom id=the-header-element:concept-element-dom>DOM interface</a>:<dd>Uses <code id=the-header-element:htmlelement><a href=#htmlelement>HTMLElement</a></code>.</dl>
@@ -28558,7 +28644,47 @@
+ <div class=example>
+ <p>In this example, we see a snippet of a Web application consisting of a grid of editable cells
+ (essentially a simple spreadsheet). One of the cells has been configured to show the sum of the
+ cells above it. Three have been marked as headings, which use <code id=the-td-element:the-th-element-2><a href=#the-th-element>th</a></code> elements instead of
+ <code id=the-td-element:the-td-element-6><a href=#the-td-element>td</a></code> elements. A script would attach event handlers to these elements to maintain the
+ total.</p>
+
+ <pre><table>
+ <tr>
+ <th><input value="Name">
+ <th><input value="Paid ($)">
+ <tr>
+ <td><input value="Jeff">
+ <td><input value="14">
+ <tr>
+ <td><input value="Britta">
+ <td><input value="9">
+ <tr>
+ <td><input value="Abed">
+ <td><input value="25">
+ <tr>
+ <td><input value="Shirley">
+ <td><input value="2">
+ <tr>
+ <td><input value="Annie">
+ <td><input value="5">
+ <tr>
+ <td><input value="Troy">
+ <td><input value="5">
+ <tr>
+ <td><input value="Pierce">
+ <td><input value="1000">
+ <tr>
+ <th><input value="Total">
+ <td><output value="1060">
+</table></pre>
+
+ </div>
+
+
<h4 id=the-th-element>4.9.10 The <dfn><code>th</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories id=the-th-element:concept-element-categories>Categories</a>:<dd>If the <code id=the-th-element:the-th-element><a href=#the-th-element>th</a></code> element is a <a href=#sorting-interface-th-element id=the-th-element:sorting-interface-th-element>sorting interface <code>th</code> element</a>: <a href=#interactive-content-2 id=the-th-element:interactive-content-2>Interactive content</a>.<dd>Otherwise: None.<dt><a href=#concept-element-contexts id=the-th-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As a child of a <code id=the-th-element:the-tr-element><a href=#the-tr-element>tr</a></code> element.<dt><a href=#concept-element-content-model id=the-th-element:concept-element-content-model>Content model</a>:<dd><a href=#flow-content-2 id=the-th-element:flow-content-2>Flow content</a>, but with no <code id=the-th-element:the-header-element><a href=#the-header-element>header</a></code>
, <code id=the-th-element:the-footer-element><a href=#the-footer-element>footer</a></code>, <a href=#sectioning-content-2 id=the-th-element:sectioning-content-2>sectioning content</a>, or <a href=#heading-content-2 id=the-th-element:heading-content-2>heading content</a> descendants, and if the <code id=the-th-element:the-th-element-2><a href=#the-th-element>th</a></code> element is a <a href=#sorting-interface-th-element id=the-th-element:sorting-interface-th-element-2>sorting interface <code>th</code> element</a>, no <a href=#interactive-content-2 id=the-th-element:interactive-content-2-2>interactive content</a> descendants.<dt><a href=#concept-element-tag-omission id=the-th-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>A <code id=the-th-element:the-th-element-3><a href=#the-th-element>th</a></code> element's <a href=#syntax-end-tag id=the-th-element:syntax-end-tag>end tag</a> can be omitted if the
@@ -40604,7 +40730,7 @@
<td>Berners-Lee
<td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-24>Text</a>
<tr><td colspan=4>"<dfn id=attr-fe-autocomplete-cc-number><code>cc-number</code></dfn>"
- <td>Code identifying the payment instrument (e.g. the credit card number, bank account number)
+ <td>Code identifying the payment instrument (e.g. the credit card number)
<td><a href=#ascii-digits id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits>ASCII digits</a>
<td>4114360123456785
<td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-25>Text</a>
@@ -44306,7 +44432,26 @@
+ <div class=example>
+ <p>This dialog box has some small print. The <code id=the-dialog-element:the-main-element><a href=#the-main-element>main</a></code> element is used to draw the user's
+ attention to the more important parts.</p>
+
+ <pre><dialog>
+ <h1>Add to Wallet</h1>
+ <main>
+ <p>How many gold coins do you want to add to your wallet?</p>
+ <p><input name=amt type=number min=0 step=0.01 value=100></p>
+ </main>
+ <p><small>You add coins at your own risk.</small></p>
+ <p><label><input name=round type=checkbox> Only add perfectly round coins </label>
+ <p><input type=button onclick="submit()" value="Add Coins"></p>
+</dialog></pre>
+
+ </div>
+
+
+
<h5 id=anchor-points>4.11.7.1 Anchor points</h5>
<p class=critical>This section will eventually be moved to a CSS specification; it is specified
Modified: index
===================================================================
--- index 2014-09-09 23:39:34 UTC (rev 8758)
+++ index 2014-09-11 23:01:18 UTC (rev 8759)
@@ -291,7 +291,7 @@
</style><link rel=stylesheet href=status.css><body onload=init()>
<header id=head class="head with-buttons">
<p><a href=//www.whatwg.org/ class=logo><img src=/images/logo width=101 alt=WHATWG height=101></a></p>
- <hgroup><h1 class=allcaps>HTML</h1><h2 id=living-standard-—-last-updated-[date:-01-jan-1901] class="no-num no-toc">Living Standard — Last Updated <span class=pubdate>9 September 2014</span></h2></hgroup>
+ <hgroup><h1 class=allcaps>HTML</h1><h2 id=living-standard-—-last-updated-[date:-01-jan-1901] class="no-num no-toc">Living Standard — Last Updated <span class=pubdate>11 September 2014</span></h2></hgroup>
<nav>
<div>
@@ -10419,8 +10419,41 @@
</div>
+ <div class=example>
+ <p>In this example, <code id=the-article-element:the-article-element-12><a href=#the-article-element>article</a></code> elements are used to host widgets on a portal page.</p>
+ <pre><DOCTYPE HTML>
+<title>eHome Portal</title>
+<link rel=stylesheet href="/styles/main.js">
+<article>
+ <h1>Stocks</h1>
+ <style scoped> @import url(/widgets/stocks/look.css); </style>
+ <script src="/widgets/stocks/core.js"></script>
+ <table>
+ <thead> <tr> <th> Stock <th> Value <th> Delta
+ <tbody> <template> <tr> <td> <td> <td> </template>
+ </table>
+ <p> <input type=button value="Refresh" onclick="stocks.refresh()">
+</article>
+<article>
+ <h1>News</h1>
+ <style scoped> @import url(/widgets/news/look.css); </style>
+ <script src="/widgets/news/core.js"></script>
+ <ul>
+ <template>
+ <li>
+ <p><img src alt title> <strong></strong>
+ <p>
+ </template>
+ </ul>
+ <p> <input type=button value="Refresh" onclick="news.refresh()">
+</article></pre>
+
+ </div>
+
+
+
<h4 id=the-section-element>4.3.3 The <dfn><code>section</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories id=the-section-element:concept-element-categories>Categories</a>:<dd><a href=#flow-content-2 id=the-section-element:flow-content-2>Flow content</a>.<dd><a href=#sectioning-content-2 id=the-section-element:sectioning-content-2>Sectioning content</a>.<dd><a href=#palpable-content-2 id=the-section-element:palpable-content-2>Palpable content</a>.<dt><a href=#concept-element-contexts id=the-section-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a href=#flow-content-2 id=the-section-element:flow-content-2-2>flow content</a> is expected.<dt><a href=#concept-element-content-model id=the-section-element:concept-element-content-model>Content model</a>:<dd><a href=#flow-content-2 id=the-section-element:flow-content-2-3>Flow content</a>.<dt><a href=#concept-element-tag-omission id=the-section-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissib
le.<dt><a href=#concept-element-attributes id=the-section-element:concept-element-attributes>Content attributes</a>:<dd><a href=#global-attributes id=the-section-element:global-attributes>Global attributes</a><dt><a href=#concept-element-dom id=the-section-element:concept-element-dom>DOM interface</a>:<dd>Uses <code id=the-section-element:htmlelement><a href=#htmlelement>HTMLElement</a></code>.</dl>
@@ -10721,8 +10754,27 @@
</div>
+ <div class=example>
+ <p>In this example, <code id=the-nav-element:the-nav-element-6><a href=#the-nav-element>nav</a></code> is used in an e-mail application, to let the user switch
+ folders:</p>
+ <pre><p><input type=button value="Compose" onclick="compose()"></p>
+<nav>
+ <h1>Folders</h1>
+ <ul>
+ <li> <a href="/inbox" onclick="return openFolder(this.href)">Inbox</a> <span class=count></span>
+ <li> <a href="/sent" onclick="return openFolder(this.href)">Sent</a>
+ <li> <a href="/drafts" onclick="return openFolder(this.href)">Drafts</a>
+ <li> <a href="/trash" onclick="return openFolder(this.href)">Trash</a>
+ <li> <a href="/customers" onclick="return openFolder(this.href)">Customers</a>
+ </ul>
+</nav></pre>
+
+ </div>
+
+
+
<h4 id=the-aside-element>4.3.5 The <dfn><code>aside</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories id=the-aside-element:concept-element-categories>Categories</a>:<dd><a href=#flow-content-2 id=the-aside-element:flow-content-2>Flow content</a>.<dd><a href=#sectioning-content-2 id=the-aside-element:sectioning-content-2>Sectioning content</a>.<dd><a href=#palpable-content-2 id=the-aside-element:palpable-content-2>Palpable content</a>.<dt><a href=#concept-element-contexts id=the-aside-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a href=#flow-content-2 id=the-aside-element:flow-content-2-2>flow content</a> is expected.<dt><a href=#concept-element-content-model id=the-aside-element:concept-element-content-model>Content model</a>:<dd><a href=#flow-content-2 id=the-aside-element:flow-content-2-3>Flow content</a>, but with no <code id=the-aside-element:the-main-element><a href=#the-main-element>main</a></code> element descendants.<dt><a href=#concept-element-tag-omission id=th
e-aside-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=#concept-element-attributes id=the-aside-element:concept-element-attributes>Content attributes</a>:<dd><a href=#global-attributes id=the-aside-element:global-attributes>Global attributes</a><dt><a href=#concept-element-dom id=the-aside-element:concept-element-dom>DOM interface</a>:<dd>Uses <code id=the-aside-element:htmlelement><a href=#htmlelement>HTMLElement</a></code>.</dl>
@@ -10994,8 +11046,42 @@
</div>
+ <div class=example>
+ <p>In the following example, an <code id=the-hgroup-element:the-hgroup-element-8><a href=#the-hgroup-element>hgroup</a></code> element is used to mark up a two-level
+ heading in a wizard-style dialog box:</p>
+ <pre><dialog onclose="walletSetup.continue(this.returnValue)">
+ <hgroup>
+ <h1>Wallet Setup</h1>
+ <h2>Configure your Wallet funding source</h2>
+ </hgroup>
+ <p>Your Wallet can be used to buy wands at the merchant in town, to buy potions from travelling
+ salesmen you may find in the dungeons, and to pay for mercenaries.</p>
+ <p>We support two payment sources:</p>
+ <form method=dialog>
+ <fieldset oninput="this.getElementsByTagName('input')[0].checked = true">
+ <legend> <label> <input type=radio name=payment-type value=cc> Credit Card </label> </legend>
+ <p><label>Name on card: <input name=cc1 autocomplete="section-cc cc-name" placeholder="Y. Name"></label>
+ <p><label>Card number: <input name=cc2 inputmode=numeric autocomplete="section-cc cc-number" placeholder="6331 1019 9999 0016"></label>
+ <p><label>Expiry Date: <input name=cc3 type=month autocomplete="section-cc cc-exp" placeholder="2020-02"></label>
+ <p><label>Security Code: <input name=cc4 inputmode=numeric autocomplete="section-cc cc-csc" placeholder="246"></label>
+ </fieldset>
+ <fieldset oninput="this.getElementsByTagName('input')[0].checked = true">
+ <legend> <label> <input type=radio name=payment-type value=bank> Checking Account </label> </legend>
+ <p><label>Name on account: <input name=bank1 autocomplete="section-bank cc-name"></label>
+ <p><label>Routing number: <input name=bank2 inputmode=numeric></label>
+ <p><label>Account number: <input name=bank3 inputmode=numeric></label>
+ </fieldset>
+ <button type=submit value="back"> ← Back </button>
+ <button type=submit value="next"> Next → </button>
+ </form>
+</dialog></pre>
+
+ </div>
+
+
+
<h4 id=the-header-element>4.3.8 The <dfn><code>header</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories id=the-header-element:concept-element-categories>Categories</a>:<dd><a href=#flow-content-2 id=the-header-element:flow-content-2>Flow content</a>.<dd><a href=#palpable-content-2 id=the-header-element:palpable-content-2>Palpable content</a>.<dt><a href=#concept-element-contexts id=the-header-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a href=#flow-content-2 id=the-header-element:flow-content-2-2>flow content</a> is expected.<dt><a href=#concept-element-content-model id=the-header-element:concept-element-content-model>Content model</a>:<dd><a href=#flow-content-2 id=the-header-element:flow-content-2-3>Flow content</a>, but with no <code id=the-header-element:the-header-element><a href=#the-header-element>header</a></code>, <code id=the-header-element:the-footer-element><a href=#the-footer-element>footer</a></code>, or <code id=the-header-element:the-main-element><a href=#
the-main-element>main</a></code> element descendants.<dt><a href=#concept-element-tag-omission id=the-header-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=#concept-element-attributes id=the-header-element:concept-element-attributes>Content attributes</a>:<dd><a href=#global-attributes id=the-header-element:global-attributes>Global attributes</a><dt><a href=#concept-element-dom id=the-header-element:concept-element-dom>DOM interface</a>:<dd>Uses <code id=the-header-element:htmlelement><a href=#htmlelement>HTMLElement</a></code>.</dl>
@@ -28558,7 +28644,47 @@
+ <div class=example>
+ <p>In this example, we see a snippet of a Web application consisting of a grid of editable cells
+ (essentially a simple spreadsheet). One of the cells has been configured to show the sum of the
+ cells above it. Three have been marked as headings, which use <code id=the-td-element:the-th-element-2><a href=#the-th-element>th</a></code> elements instead of
+ <code id=the-td-element:the-td-element-6><a href=#the-td-element>td</a></code> elements. A script would attach event handlers to these elements to maintain the
+ total.</p>
+
+ <pre><table>
+ <tr>
+ <th><input value="Name">
+ <th><input value="Paid ($)">
+ <tr>
+ <td><input value="Jeff">
+ <td><input value="14">
+ <tr>
+ <td><input value="Britta">
+ <td><input value="9">
+ <tr>
+ <td><input value="Abed">
+ <td><input value="25">
+ <tr>
+ <td><input value="Shirley">
+ <td><input value="2">
+ <tr>
+ <td><input value="Annie">
+ <td><input value="5">
+ <tr>
+ <td><input value="Troy">
+ <td><input value="5">
+ <tr>
+ <td><input value="Pierce">
+ <td><input value="1000">
+ <tr>
+ <th><input value="Total">
+ <td><output value="1060">
+</table></pre>
+
+ </div>
+
+
<h4 id=the-th-element>4.9.10 The <dfn><code>th</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories id=the-th-element:concept-element-categories>Categories</a>:<dd>If the <code id=the-th-element:the-th-element><a href=#the-th-element>th</a></code> element is a <a href=#sorting-interface-th-element id=the-th-element:sorting-interface-th-element>sorting interface <code>th</code> element</a>: <a href=#interactive-content-2 id=the-th-element:interactive-content-2>Interactive content</a>.<dd>Otherwise: None.<dt><a href=#concept-element-contexts id=the-th-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As a child of a <code id=the-th-element:the-tr-element><a href=#the-tr-element>tr</a></code> element.<dt><a href=#concept-element-content-model id=the-th-element:concept-element-content-model>Content model</a>:<dd><a href=#flow-content-2 id=the-th-element:flow-content-2>Flow content</a>, but with no <code id=the-th-element:the-header-element><a href=#the-header-element>header</a></code>
, <code id=the-th-element:the-footer-element><a href=#the-footer-element>footer</a></code>, <a href=#sectioning-content-2 id=the-th-element:sectioning-content-2>sectioning content</a>, or <a href=#heading-content-2 id=the-th-element:heading-content-2>heading content</a> descendants, and if the <code id=the-th-element:the-th-element-2><a href=#the-th-element>th</a></code> element is a <a href=#sorting-interface-th-element id=the-th-element:sorting-interface-th-element-2>sorting interface <code>th</code> element</a>, no <a href=#interactive-content-2 id=the-th-element:interactive-content-2-2>interactive content</a> descendants.<dt><a href=#concept-element-tag-omission id=the-th-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>A <code id=the-th-element:the-th-element-3><a href=#the-th-element>th</a></code> element's <a href=#syntax-end-tag id=the-th-element:syntax-end-tag>end tag</a> can be omitted if the
@@ -40604,7 +40730,7 @@
<td>Berners-Lee
<td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-24>Text</a>
<tr><td colspan=4>"<dfn id=attr-fe-autocomplete-cc-number><code>cc-number</code></dfn>"
- <td>Code identifying the payment instrument (e.g. the credit card number, bank account number)
+ <td>Code identifying the payment instrument (e.g. the credit card number)
<td><a href=#ascii-digits id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits>ASCII digits</a>
<td>4114360123456785
<td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-25>Text</a>
@@ -44306,7 +44432,26 @@
+ <div class=example>
+ <p>This dialog box has some small print. The <code id=the-dialog-element:the-main-element><a href=#the-main-element>main</a></code> element is used to draw the user's
+ attention to the more important parts.</p>
+
+ <pre><dialog>
+ <h1>Add to Wallet</h1>
+ <main>
+ <p>How many gold coins do you want to add to your wallet?</p>
+ <p><input name=amt type=number min=0 step=0.01 value=100></p>
+ </main>
+ <p><small>You add coins at your own risk.</small></p>
+ <p><label><input name=round type=checkbox> Only add perfectly round coins </label>
+ <p><input type=button onclick="submit()" value="Add Coins"></p>
+</dialog></pre>
+
+ </div>
+
+
+
<h5 id=anchor-points>4.11.7.1 Anchor points</h5>
<p class=critical>This section will eventually be moved to a CSS specification; it is specified
Modified: source
===================================================================
--- source 2014-09-09 23:39:34 UTC (rev 8758)
+++ source 2014-09-11 23:01:18 UTC (rev 8759)
@@ -15214,8 +15214,41 @@
</div>
+ <div class="example">
+ <p>In this example, <code>article</code> elements are used to host widgets on a portal page.</p>
+ <pre><DOCTYPE HTML>
+<title>eHome Portal</title>
+<link rel=stylesheet href="/styles/main.js">
+<article>
+ <h1>Stocks</h1>
+ <style scoped> @import url(/widgets/stocks/look.css); </style>
+ <script src="/widgets/stocks/core.js"></script>
+ <table>
+ <thead> <tr> <th> Stock <th> Value <th> Delta
+ <tbody> <template> <tr> <td> <td> <td> </template>
+ </table>
+ <p> <input type=button value="Refresh" onclick="stocks.refresh()">
+</article>
+<article>
+ <h1>News</h1>
+ <style scoped> @import url(/widgets/news/look.css); </style>
+ <script src="/widgets/news/core.js"></script>
+ <ul>
+ <template>
+ <li>
+ <p><img src alt title> <strong></strong>
+ <p>
+ </template>
+ </ul>
+ <p> <input type=button value="Refresh" onclick="news.refresh()">
+</article></pre>
+
+ </div>
+
+
+
<h4>The <dfn><code>section</code></dfn> element</h4>
<dl class="element">
@@ -15542,8 +15575,27 @@
</div>
+ <div class="example">
+ <p>In this example, <code>nav</code> is used in an e-mail application, to let the user switch
+ folders:</p>
+ <pre><p><input type=button value="Compose" onclick="compose()"></p>
+<nav>
+ <h1>Folders</h1>
+ <ul>
+ <li> <a href="/inbox" onclick="return openFolder(this.href)">Inbox</a> <span class=count></span>
+ <li> <a href="/sent" onclick="return openFolder(this.href)">Sent</a>
+ <li> <a href="/drafts" onclick="return openFolder(this.href)">Drafts</a>
+ <li> <a href="/trash" onclick="return openFolder(this.href)">Trash</a>
+ <li> <a href="/customers" onclick="return openFolder(this.href)">Customers</a>
+ </ul>
+</nav></pre>
+
+ </div>
+
+
+
<h4>The <dfn><code>aside</code></dfn> element</h4>
<dl class="element">
@@ -15855,8 +15907,42 @@
</div>
+ <div class="example">
+ <p>In the following example, an <code>hgroup</code> element is used to mark up a two-level
+ heading in a wizard-style dialog box:</p>
+ <pre><dialog onclose="walletSetup.continue(this.returnValue)">
+ <hgroup>
+ <h1>Wallet Setup</h1>
+ <h2>Configure your Wallet funding source</h2>
+ </hgroup>
+ <p>Your Wallet can be used to buy wands at the merchant in town, to buy potions from travelling
+ salesmen you may find in the dungeons, and to pay for mercenaries.</p>
+ <p>We support two payment sources:</p>
+ <form method=dialog>
+ <fieldset oninput="this.getElementsByTagName('input')[0].checked = true">
+ <legend> <label> <input type=radio name=payment-type value=cc> Credit Card </label> </legend>
+ <p><label>Name on card: <input name=cc1 autocomplete="section-cc cc-name" placeholder="Y. Name"></label>
+ <p><label>Card number: <input name=cc2 inputmode=numeric autocomplete="section-cc cc-number" placeholder="6331 1019 9999 0016"></label>
+ <p><label>Expiry Date: <input name=cc3 type=month autocomplete="section-cc cc-exp" placeholder="2020-02"></label>
+ <p><label>Security Code: <input name=cc4 inputmode=numeric autocomplete="section-cc cc-csc" placeholder="246"></label>
+ </fieldset>
+ <fieldset oninput="this.getElementsByTagName('input')[0].checked = true">
+ <legend> <label> <input type=radio name=payment-type value=bank> Checking Account </label> </legend>
+ <p><label>Name on account: <input name=bank1 autocomplete="section-bank cc-name"></label>
+ <p><label>Routing number: <input name=bank2 inputmode=numeric></label>
+ <p><label>Account number: <input name=bank3 inputmode=numeric></label>
+ </fieldset>
+ <button type=submit value="back"> ← Back </button>
+ <button type=submit value="next"> Next → </button>
+ </form>
+</dialog></pre>
+
+ </div>
+
+
+
<h4>The <dfn><code>header</code></dfn> element</h4>
<dl class="element">
@@ -37001,7 +37087,47 @@
</div>
+ <div class="example">
+ <p>In this example, we see a snippet of a Web application consisting of a grid of editable cells
+ (essentially a simple spreadsheet). One of the cells has been configured to show the sum of the
+ cells above it. Three have been marked as headings, which use <code>th</code> elements instead of
+ <code>td</code> elements. A script would attach event handlers to these elements to maintain the
+ total.</p>
+
+ <pre><table>
+ <tr>
+ <th><input value="Name">
+ <th><input value="Paid ($)">
+ <tr>
+ <td><input value="Jeff">
+ <td><input value="14">
+ <tr>
+ <td><input value="Britta">
+ <td><input value="9">
+ <tr>
+ <td><input value="Abed">
+ <td><input value="25">
+ <tr>
+ <td><input value="Shirley">
+ <td><input value="2">
+ <tr>
+ <td><input value="Annie">
+ <td><input value="5">
+ <tr>
+ <td><input value="Troy">
+ <td><input value="5">
+ <tr>
+ <td><input value="Pierce">
+ <td><input value="1000">
+ <tr>
+ <th><input value="Total">
+ <td><output value="1060">
+</table></pre>
+
+ </div>
+
+
<h4>The <dfn><code>th</code></dfn> element</h4>
<dl class="element">
@@ -52122,7 +52248,7 @@
<td><span data-x="Control Group Text">Text</span>
<tr>
<td colspan=4>"<dfn><code data-x="attr-fe-autocomplete-cc-number">cc-number</code></dfn>"
- <td>Code identifying the payment instrument (e.g. the credit card number, bank account number)
+ <td>Code identifying the payment instrument (e.g. the credit card number)
<td><span>ASCII digits</span>
<td>4114360123456785 <!-- http://www.auricsystems.com/support-center/sample-credit-card-numbers -->
<td><span data-x="Control Group Text">Text</span>
@@ -57551,7 +57677,26 @@
</div>
+ <div class="example">
+ <p>This dialog box has some small print. The <code>main</code> element is used to draw the user's
+ attention to the more important parts.</p>
+
+ <pre><dialog>
+ <h1>Add to Wallet</h1>
+ <main>
+ <p>How many gold coins do you want to add to your wallet?</p>
+ <p><input name=amt type=number min=0 step=0.01 value=100></p>
+ </main>
+ <p><small>You add coins at your own risk.</small></p>
+ <p><label><input name=round type=checkbox> Only add perfectly round coins </label>
+ <p><input type=button onclick="submit()" value="Add Coins"></p>
+</dialog></pre>
+
+ </div>
+
+
+
<h5>Anchor points</h5>
<p class="critical">This section will eventually be moved to a CSS specification; it is specified
More information about the Commit-Watchers
mailing list