[html5] r8431 - [e] (0) Add a bunch of examples to the tag omission section. Fixing https://www. [...]
whatwg at whatwg.org
whatwg at whatwg.org
Tue Jan 28 15:02:36 PST 2014
Author: ianh
Date: 2014-01-28 15:02:35 -0800 (Tue, 28 Jan 2014)
New Revision: 8431
Modified:
complete.html
index
source
Log:
[e] (0) Add a bunch of examples to the tag omission section.
Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=24358
Affected topics: HTML Syntax and Parsing
Modified: complete.html
===================================================================
--- complete.html 2014-01-28 20:34:26 UTC (rev 8430)
+++ complete.html 2014-01-28 23:02:35 UTC (rev 8431)
@@ -84739,6 +84739,78 @@
<p>An <code><a href=#the-html-element>html</a></code> element's <a href=#syntax-start-tag title=syntax-start-tag>start tag</a> may be omitted
if the first thing inside the <code><a href=#the-html-element>html</a></code> element is not a <a href=#syntax-comments title=syntax-comments>comment</a>.</p>
+ <div class=example>
+
+ <p>For example, in the following case it's ok to remove the "<code title=""><html></code>"
+ tag:</p>
+
+ <pre><!DOCTYPE HTML>
+<strong><html></strong>
+ <head>
+ <title>Hello</title>
+ </head>
+ <body>
+ <p>Welcome to this example.</p>
+ </body>
+</html></pre>
+
+ <p>Doing so would make the document look like this:</p>
+
+ <pre><!DOCTYPE HTML>
+
+ <head>
+ <title>Hello</title>
+ </head>
+ <body>
+ <p>Welcome to this example.</p>
+ </body>
+</html></pre>
+
+ <p>This has the exact same DOM. In particular, note that white space around the root element is
+ ignored by the parser. The following example would also have the exact same DOM:</p>
+
+ <pre><!DOCTYPE HTML><head>
+ <title>Hello</title>
+ </head>
+ <body>
+ <p>Welcome to this example.</p>
+ </body>
+</html></pre>
+
+ <p>However, in the following example, removing the start tag moves the comment to before the
+ <code><a href=#the-html-element>html</a></code> element:</p>
+
+ <pre><!DOCTYPE HTML>
+<html>
+ <strong><!-- where is this comment in the DOM? --></strong>
+ <head>
+ <title>Hello</title>
+ </head>
+ <body>
+ <p>Welcome to this example.</p>
+ </body>
+</html></pre>
+
+ <p>With the tag removed, the document actually turns into the same as this:</p>
+
+ <pre><!DOCTYPE HTML>
+<!-- where is this comment in the DOM? -->
+<small><html></small>
+ <head>
+ <title>Hello</title>
+ </head>
+ <body>
+ <p>Welcome to this example.</p>
+ </body>
+</html></pre>
+
+ <p>This is why the tag can only be removed if it is not followed by a comment: removing the tag
+ when there is a comment there changes the document's resulting parse tree. Of course, if the
+ position of the comment does not matter, then the tag can be omitted, as if the comment had been
+ moved to before the start tag in the first place.</p>
+
+ </div>
+
<!-- </html> -->
<p>An <code><a href=#the-html-element>html</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end tag</a> may be omitted if
the <code><a href=#the-html-element>html</a></code> element is not immediately followed by a <a href=#syntax-comments title=syntax-comments>comment</a>.</p>
@@ -84765,6 +84837,50 @@
<p>A <code><a href=#the-body-element>body</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end tag</a> may be omitted if the
<code><a href=#the-body-element>body</a></code> element is not immediately followed by a <a href=#syntax-comments title=syntax-comments>comment</a>.</p>
+ <div class=example>
+
+ <p>Note that in the example above, the <code><a href=#the-head-element>head</a></code> element start and end tags, and the
+ <code><a href=#the-body-element>body</a></code> element start tag, can't be omitted, because they are surrounded by white
+ space:</p>
+
+ <pre><!DOCTYPE HTML>
+<html><strong>
+ </strong><head><strong>
+ </strong><title>Hello</title><strong>
+ </strong></head><strong>
+ </strong><body><strong>
+ </strong><p>Welcome to this example.</p>
+ </body>
+</html></pre>
+
+ <p>(The <code><a href=#the-body-element>body</a></code> and <code><a href=#the-html-element>html</a></code> element end tags could be omitted without
+ trouble; any spaces after those get parsed into the <code><a href=#the-body-element>body</a></code> element anyway.)</p>
+
+ <p>Usually, however, white space isn't an issue. If we first remove the white space we don't care
+ about:</p>
+
+ <pre><!DOCTYPE HTML><html><head><title>Hello</title></head><body><p>Welcome to this example.</p></body></html></pre>
+
+ <p>Then we can omit a number of tags without affecting the DOM:</p>
+
+ <pre><!DOCTYPE HTML><title>Hello</title><p>Welcome to this example.</p></pre>
+
+ <p>At that point, we can also add some white space back:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>Hello</title>
+<p>Welcome to this example.</p></pre>
+
+ <p>This would be equivalent to this document, with the ommitted tags shown in their
+ parser-implied positions; the only white space text node that results from this is the newline at
+ the end of the <code><a href=#the-head-element>head</a></code> element:</p>
+
+ <pre><!DOCTYPE HTML>
+<small><html><head></small><title>Hello</title>
+<small></head><body></small><p>Welcome to this example.</p><small></body></html></small></pre>
+
+ </div>
+
<!-- </li> -->
<p>An <code><a href=#the-li-element>li</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end tag</a> may be omitted if the
<code><a href=#the-li-element>li</a></code> element is immediately followed by another <code><a href=#the-li-element>li</a></code> element or if there is
@@ -84791,6 +84907,14 @@
<code><a href=#the-ul-element>ul</a></code>, element, or if there is no more content in the parent element and the parent
element is not an <code><a href=#the-a-element>a</a></code> element.</p>
+ <div class=example>
+
+ <p>We can thus simplify the earlier example further:
+
+ <pre><!DOCTYPE HTML><title>Hello</title><p>Welcome to this example.<small></p></small></pre>
+
+ </div>
+
<!-- </rt> -->
<p>An <code><a href=#the-rt-element>rt</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end tag</a> may be omitted if the
<code><a href=#the-rt-element>rt</a></code> element is immediately followed by an <code><a href=#the-rt-element>rt</a></code> or <code><a href=#the-rp-element>rp</a></code> element,
@@ -84872,10 +84996,122 @@
<code><a href=#the-th-element>th</a></code> element is immediately followed by a <code><a href=#the-td-element>td</a></code> or <code><a href=#the-th-element>th</a></code> element,
or if there is no more content in the parent element.</p>
+ <div class=example>
+
+ <p>The ability to omit all these table-related tags makes table markup much terser.</p>
+
+ <p>Take this example:</p>
+
+ <pre><table>
+ <caption>37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)</caption>
+ <colgroup><col><col><col></colgroup>
+ <thead>
+ <tr>
+ <th>Function</th>
+ <th>Control Unit</th>
+ <th>Central Station</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Headlights</td>
+ <td>✔</td>
+ <td>✔</td>
+ </tr>
+ <tr>
+ <td>Interior Lights</td>
+ <td>✔</td>
+ <td>✔</td>
+ </tr>
+ <tr>
+ <td>Electric locomotive operating sounds</td>
+ <td>✔</td>
+ <td>✔</td>
+ </tr>
+ <tr>
+ <td>Engineer's cab lighting</td>
+ <td></td>
+ <td>✔</td>
+ </tr>
+ <tr>
+ <td>Station Announcements - Swiss</td>
+ <td></td>
+ <td>✔</td>
+ </tr>
+ </tbody>
+</table></pre>
+
+ <p>The exact same table, modulo some white space differences, could be marked up as follows:</p>
+
+ <pre><table>
+ <caption>37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)
+ <colgroup><col><col><col>
+ <thead>
+ <tr>
+ <th>Function
+ <th>Control Unit
+ <th>Central Station
+ <tbody>
+ <tr>
+ <td>Headlights
+ <td>✔
+ <td>✔
+ <tr>
+ <td>Interior Lights
+ <td>✔
+ <td>✔
+ <tr>
+ <td>Electric locomotive operating sounds
+ <td>✔
+ <td>✔
+ <tr>
+ <td>Engineer's cab lighting
+ <td>
+ <td>✔
+ <tr>
+ <td>Station Announcements - Swiss
+ <td>
+ <td>✔
+</table></pre>
+
+ <p>Since the cells take up much less room this way, this can be made even terser by having each
+ row on one line:</p>
+
+ <pre><table>
+ <caption>37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)
+ <colgroup><col><col><col>
+ <thead>
+ <tr> <th>Function <th>Control Unit <th>Central Station
+ <tbody>
+ <tr> <td>Headlights <td>✔ <td>✔
+ <tr> <td>Interior Lights <td>✔ <td>✔
+ <tr> <td>Electric locomotive operating sounds <td>✔ <td>✔
+ <tr> <td>Engineer's cab lighting <td> <td>✔
+ <tr> <td>Station Announcements - Swiss <td> <td>✔
+</table></pre>
+
+ <p>The only differences between these tables, at the DOM level, is with the precise position of
+ the (in any case semantically-neutral) white space.</p>
+
+ </div>
+
<p><strong>However</strong>, a <a href=#syntax-start-tag title=syntax-start-tag>start tag</a> must never be
omitted if it has any attributes.</p>
+ <div class=example>
+ <p>Returning to the earlier example with all the white space removed and then all the optional
+ tags removed:</p>
+
+ <pre><!DOCTYPE HTML><title>Hello</title><p>Welcome to this example.</pre>
+
+ <p>If the <code><a href=#the-body-element>body</a></code> element in this example had to have a <code title=attr-class><a href=#classes>class</a></code> attribute and the <code><a href=#the-html-element>html</a></code> element had to have a <code title=attr-lang><a href=#attr-lang>lang</a></code> attribute, the markup would have to become:</p>
+
+ <pre><!DOCTYPE HTML><html lang="en"><title>Hello</title><body class="demo"><p>Welcome to this example.</pre>
+
+ </div>
+
+
<h5 id=element-restrictions><span class=secno>12.1.2.5 </span>Restrictions on content models</h5>
<p>For historical reasons, certain elements have extra restrictions beyond even the restrictions
Modified: index
===================================================================
--- index 2014-01-28 20:34:26 UTC (rev 8430)
+++ index 2014-01-28 23:02:35 UTC (rev 8431)
@@ -84739,6 +84739,78 @@
<p>An <code><a href=#the-html-element>html</a></code> element's <a href=#syntax-start-tag title=syntax-start-tag>start tag</a> may be omitted
if the first thing inside the <code><a href=#the-html-element>html</a></code> element is not a <a href=#syntax-comments title=syntax-comments>comment</a>.</p>
+ <div class=example>
+
+ <p>For example, in the following case it's ok to remove the "<code title=""><html></code>"
+ tag:</p>
+
+ <pre><!DOCTYPE HTML>
+<strong><html></strong>
+ <head>
+ <title>Hello</title>
+ </head>
+ <body>
+ <p>Welcome to this example.</p>
+ </body>
+</html></pre>
+
+ <p>Doing so would make the document look like this:</p>
+
+ <pre><!DOCTYPE HTML>
+
+ <head>
+ <title>Hello</title>
+ </head>
+ <body>
+ <p>Welcome to this example.</p>
+ </body>
+</html></pre>
+
+ <p>This has the exact same DOM. In particular, note that white space around the root element is
+ ignored by the parser. The following example would also have the exact same DOM:</p>
+
+ <pre><!DOCTYPE HTML><head>
+ <title>Hello</title>
+ </head>
+ <body>
+ <p>Welcome to this example.</p>
+ </body>
+</html></pre>
+
+ <p>However, in the following example, removing the start tag moves the comment to before the
+ <code><a href=#the-html-element>html</a></code> element:</p>
+
+ <pre><!DOCTYPE HTML>
+<html>
+ <strong><!-- where is this comment in the DOM? --></strong>
+ <head>
+ <title>Hello</title>
+ </head>
+ <body>
+ <p>Welcome to this example.</p>
+ </body>
+</html></pre>
+
+ <p>With the tag removed, the document actually turns into the same as this:</p>
+
+ <pre><!DOCTYPE HTML>
+<!-- where is this comment in the DOM? -->
+<small><html></small>
+ <head>
+ <title>Hello</title>
+ </head>
+ <body>
+ <p>Welcome to this example.</p>
+ </body>
+</html></pre>
+
+ <p>This is why the tag can only be removed if it is not followed by a comment: removing the tag
+ when there is a comment there changes the document's resulting parse tree. Of course, if the
+ position of the comment does not matter, then the tag can be omitted, as if the comment had been
+ moved to before the start tag in the first place.</p>
+
+ </div>
+
<!-- </html> -->
<p>An <code><a href=#the-html-element>html</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end tag</a> may be omitted if
the <code><a href=#the-html-element>html</a></code> element is not immediately followed by a <a href=#syntax-comments title=syntax-comments>comment</a>.</p>
@@ -84765,6 +84837,50 @@
<p>A <code><a href=#the-body-element>body</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end tag</a> may be omitted if the
<code><a href=#the-body-element>body</a></code> element is not immediately followed by a <a href=#syntax-comments title=syntax-comments>comment</a>.</p>
+ <div class=example>
+
+ <p>Note that in the example above, the <code><a href=#the-head-element>head</a></code> element start and end tags, and the
+ <code><a href=#the-body-element>body</a></code> element start tag, can't be omitted, because they are surrounded by white
+ space:</p>
+
+ <pre><!DOCTYPE HTML>
+<html><strong>
+ </strong><head><strong>
+ </strong><title>Hello</title><strong>
+ </strong></head><strong>
+ </strong><body><strong>
+ </strong><p>Welcome to this example.</p>
+ </body>
+</html></pre>
+
+ <p>(The <code><a href=#the-body-element>body</a></code> and <code><a href=#the-html-element>html</a></code> element end tags could be omitted without
+ trouble; any spaces after those get parsed into the <code><a href=#the-body-element>body</a></code> element anyway.)</p>
+
+ <p>Usually, however, white space isn't an issue. If we first remove the white space we don't care
+ about:</p>
+
+ <pre><!DOCTYPE HTML><html><head><title>Hello</title></head><body><p>Welcome to this example.</p></body></html></pre>
+
+ <p>Then we can omit a number of tags without affecting the DOM:</p>
+
+ <pre><!DOCTYPE HTML><title>Hello</title><p>Welcome to this example.</p></pre>
+
+ <p>At that point, we can also add some white space back:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>Hello</title>
+<p>Welcome to this example.</p></pre>
+
+ <p>This would be equivalent to this document, with the ommitted tags shown in their
+ parser-implied positions; the only white space text node that results from this is the newline at
+ the end of the <code><a href=#the-head-element>head</a></code> element:</p>
+
+ <pre><!DOCTYPE HTML>
+<small><html><head></small><title>Hello</title>
+<small></head><body></small><p>Welcome to this example.</p><small></body></html></small></pre>
+
+ </div>
+
<!-- </li> -->
<p>An <code><a href=#the-li-element>li</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end tag</a> may be omitted if the
<code><a href=#the-li-element>li</a></code> element is immediately followed by another <code><a href=#the-li-element>li</a></code> element or if there is
@@ -84791,6 +84907,14 @@
<code><a href=#the-ul-element>ul</a></code>, element, or if there is no more content in the parent element and the parent
element is not an <code><a href=#the-a-element>a</a></code> element.</p>
+ <div class=example>
+
+ <p>We can thus simplify the earlier example further:
+
+ <pre><!DOCTYPE HTML><title>Hello</title><p>Welcome to this example.<small></p></small></pre>
+
+ </div>
+
<!-- </rt> -->
<p>An <code><a href=#the-rt-element>rt</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end tag</a> may be omitted if the
<code><a href=#the-rt-element>rt</a></code> element is immediately followed by an <code><a href=#the-rt-element>rt</a></code> or <code><a href=#the-rp-element>rp</a></code> element,
@@ -84872,10 +84996,122 @@
<code><a href=#the-th-element>th</a></code> element is immediately followed by a <code><a href=#the-td-element>td</a></code> or <code><a href=#the-th-element>th</a></code> element,
or if there is no more content in the parent element.</p>
+ <div class=example>
+
+ <p>The ability to omit all these table-related tags makes table markup much terser.</p>
+
+ <p>Take this example:</p>
+
+ <pre><table>
+ <caption>37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)</caption>
+ <colgroup><col><col><col></colgroup>
+ <thead>
+ <tr>
+ <th>Function</th>
+ <th>Control Unit</th>
+ <th>Central Station</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Headlights</td>
+ <td>✔</td>
+ <td>✔</td>
+ </tr>
+ <tr>
+ <td>Interior Lights</td>
+ <td>✔</td>
+ <td>✔</td>
+ </tr>
+ <tr>
+ <td>Electric locomotive operating sounds</td>
+ <td>✔</td>
+ <td>✔</td>
+ </tr>
+ <tr>
+ <td>Engineer's cab lighting</td>
+ <td></td>
+ <td>✔</td>
+ </tr>
+ <tr>
+ <td>Station Announcements - Swiss</td>
+ <td></td>
+ <td>✔</td>
+ </tr>
+ </tbody>
+</table></pre>
+
+ <p>The exact same table, modulo some white space differences, could be marked up as follows:</p>
+
+ <pre><table>
+ <caption>37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)
+ <colgroup><col><col><col>
+ <thead>
+ <tr>
+ <th>Function
+ <th>Control Unit
+ <th>Central Station
+ <tbody>
+ <tr>
+ <td>Headlights
+ <td>✔
+ <td>✔
+ <tr>
+ <td>Interior Lights
+ <td>✔
+ <td>✔
+ <tr>
+ <td>Electric locomotive operating sounds
+ <td>✔
+ <td>✔
+ <tr>
+ <td>Engineer's cab lighting
+ <td>
+ <td>✔
+ <tr>
+ <td>Station Announcements - Swiss
+ <td>
+ <td>✔
+</table></pre>
+
+ <p>Since the cells take up much less room this way, this can be made even terser by having each
+ row on one line:</p>
+
+ <pre><table>
+ <caption>37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)
+ <colgroup><col><col><col>
+ <thead>
+ <tr> <th>Function <th>Control Unit <th>Central Station
+ <tbody>
+ <tr> <td>Headlights <td>✔ <td>✔
+ <tr> <td>Interior Lights <td>✔ <td>✔
+ <tr> <td>Electric locomotive operating sounds <td>✔ <td>✔
+ <tr> <td>Engineer's cab lighting <td> <td>✔
+ <tr> <td>Station Announcements - Swiss <td> <td>✔
+</table></pre>
+
+ <p>The only differences between these tables, at the DOM level, is with the precise position of
+ the (in any case semantically-neutral) white space.</p>
+
+ </div>
+
<p><strong>However</strong>, a <a href=#syntax-start-tag title=syntax-start-tag>start tag</a> must never be
omitted if it has any attributes.</p>
+ <div class=example>
+ <p>Returning to the earlier example with all the white space removed and then all the optional
+ tags removed:</p>
+
+ <pre><!DOCTYPE HTML><title>Hello</title><p>Welcome to this example.</pre>
+
+ <p>If the <code><a href=#the-body-element>body</a></code> element in this example had to have a <code title=attr-class><a href=#classes>class</a></code> attribute and the <code><a href=#the-html-element>html</a></code> element had to have a <code title=attr-lang><a href=#attr-lang>lang</a></code> attribute, the markup would have to become:</p>
+
+ <pre><!DOCTYPE HTML><html lang="en"><title>Hello</title><body class="demo"><p>Welcome to this example.</pre>
+
+ </div>
+
+
<h5 id=element-restrictions><span class=secno>12.1.2.5 </span>Restrictions on content models</h5>
<p>For historical reasons, certain elements have extra restrictions beyond even the restrictions
Modified: source
===================================================================
--- source 2014-01-28 20:34:26 UTC (rev 8430)
+++ source 2014-01-28 23:02:35 UTC (rev 8431)
@@ -94375,6 +94375,78 @@
if the first thing inside the <code>html</code> element is not a <span
data-x="syntax-comments">comment</span>.</p>
+ <div class="example">
+
+ <p>For example, in the following case it's ok to remove the "<code data-x=""><html></code>"
+ tag:</p>
+
+ <pre><!DOCTYPE HTML>
+<strong><html></strong>
+ <head>
+ <title>Hello</title>
+ </head>
+ <body>
+ <p>Welcome to this example.</p>
+ </body>
+</html></pre>
+
+ <p>Doing so would make the document look like this:</p>
+
+ <pre><!DOCTYPE HTML>
+
+ <head>
+ <title>Hello</title>
+ </head>
+ <body>
+ <p>Welcome to this example.</p>
+ </body>
+</html></pre>
+
+ <p>This has the exact same DOM. In particular, note that white space around the root element is
+ ignored by the parser. The following example would also have the exact same DOM:</p>
+
+ <pre><!DOCTYPE HTML><head>
+ <title>Hello</title>
+ </head>
+ <body>
+ <p>Welcome to this example.</p>
+ </body>
+</html></pre>
+
+ <p>However, in the following example, removing the start tag moves the comment to before the
+ <code>html</code> element:</p>
+
+ <pre><!DOCTYPE HTML>
+<html>
+ <strong><!-- where is this comment in the DOM? --></strong>
+ <head>
+ <title>Hello</title>
+ </head>
+ <body>
+ <p>Welcome to this example.</p>
+ </body>
+</html></pre>
+
+ <p>With the tag removed, the document actually turns into the same as this:</p>
+
+ <pre><!DOCTYPE HTML>
+<!-- where is this comment in the DOM? -->
+<small><html></small>
+ <head>
+ <title>Hello</title>
+ </head>
+ <body>
+ <p>Welcome to this example.</p>
+ </body>
+</html></pre>
+
+ <p>This is why the tag can only be removed if it is not followed by a comment: removing the tag
+ when there is a comment there changes the document's resulting parse tree. Of course, if the
+ position of the comment does not matter, then the tag can be omitted, as if the comment had been
+ moved to before the start tag in the first place.</p>
+
+ </div>
+
<!-- </html> -->
<p>An <code>html</code> element's <span data-x="syntax-end-tag">end tag</span> may be omitted if
the <code>html</code> element is not immediately followed by a <span
@@ -94404,6 +94476,50 @@
<code>body</code> element is not immediately followed by a <span
data-x="syntax-comments">comment</span>.</p>
+ <div class="example">
+
+ <p>Note that in the example above, the <code>head</code> element start and end tags, and the
+ <code>body</code> element start tag, can't be omitted, because they are surrounded by white
+ space:</p>
+
+ <pre><!DOCTYPE HTML>
+<html><strong>
+ </strong><head><strong>
+ </strong><title>Hello</title><strong>
+ </strong></head><strong>
+ </strong><body><strong>
+ </strong><p>Welcome to this example.</p>
+ </body>
+</html></pre>
+
+ <p>(The <code>body</code> and <code>html</code> element end tags could be omitted without
+ trouble; any spaces after those get parsed into the <code>body</code> element anyway.)</p>
+
+ <p>Usually, however, white space isn't an issue. If we first remove the white space we don't care
+ about:</p>
+
+ <pre><!DOCTYPE HTML><html><head><title>Hello</title></head><body><p>Welcome to this example.</p></body></html></pre>
+
+ <p>Then we can omit a number of tags without affecting the DOM:</p>
+
+ <pre><!DOCTYPE HTML><title>Hello</title><p>Welcome to this example.</p></pre>
+
+ <p>At that point, we can also add some white space back:</p>
+
+ <pre><!DOCTYPE HTML>
+<title>Hello</title>
+<p>Welcome to this example.</p></pre>
+
+ <p>This would be equivalent to this document, with the ommitted tags shown in their
+ parser-implied positions; the only white space text node that results from this is the newline at
+ the end of the <code>head</code> element:</p>
+
+ <pre><!DOCTYPE HTML>
+<small><html><head></small><title>Hello</title>
+<small></head><body></small><p>Welcome to this example.</p><small></body></html></small></pre>
+
+ </div>
+
<!-- </li> -->
<p>An <code>li</code> element's <span data-x="syntax-end-tag">end tag</span> may be omitted if the
<code>li</code> element is immediately followed by another <code>li</code> element or if there is
@@ -94430,6 +94546,14 @@
<code>ul</code>, element, or if there is no more content in the parent element and the parent
element is not an <code>a</code> element.</p>
+ <div class="example">
+
+ <p>We can thus simplify the earlier example further:
+
+ <pre><!DOCTYPE HTML><title>Hello</title><p>Welcome to this example.<small></p></small></pre>
+
+ </div>
+
<!-- </rt> -->
<p>An <code>rt</code> element's <span data-x="syntax-end-tag">end tag</span> may be omitted if the
<code>rt</code> element is immediately followed by an <code>rt</code> or <code>rp</code> element,
@@ -94511,10 +94635,124 @@
<code>th</code> element is immediately followed by a <code>td</code> or <code>th</code> element,
or if there is no more content in the parent element.</p>
+ <div class="example">
+
+ <p>The ability to omit all these table-related tags makes table markup much terser.</p>
+
+ <p>Take this example:</p>
+
+ <pre><table>
+ <caption>37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)</caption>
+ <colgroup><col><col><col></colgroup>
+ <thead>
+ <tr>
+ <th>Function</th>
+ <th>Control Unit</th>
+ <th>Central Station</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Headlights</td>
+ <td>✔</td>
+ <td>✔</td>
+ </tr>
+ <tr>
+ <td>Interior Lights</td>
+ <td>✔</td>
+ <td>✔</td>
+ </tr>
+ <tr>
+ <td>Electric locomotive operating sounds</td>
+ <td>✔</td>
+ <td>✔</td>
+ </tr>
+ <tr>
+ <td>Engineer's cab lighting</td>
+ <td></td>
+ <td>✔</td>
+ </tr>
+ <tr>
+ <td>Station Announcements - Swiss</td>
+ <td></td>
+ <td>✔</td>
+ </tr>
+ </tbody>
+</table></pre>
+
+ <p>The exact same table, modulo some white space differences, could be marked up as follows:</p>
+
+ <pre><table>
+ <caption>37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)
+ <colgroup><col><col><col>
+ <thead>
+ <tr>
+ <th>Function
+ <th>Control Unit
+ <th>Central Station
+ <tbody>
+ <tr>
+ <td>Headlights
+ <td>✔
+ <td>✔
+ <tr>
+ <td>Interior Lights
+ <td>✔
+ <td>✔
+ <tr>
+ <td>Electric locomotive operating sounds
+ <td>✔
+ <td>✔
+ <tr>
+ <td>Engineer's cab lighting
+ <td>
+ <td>✔
+ <tr>
+ <td>Station Announcements - Swiss
+ <td>
+ <td>✔
+</table></pre>
+
+ <p>Since the cells take up much less room this way, this can be made even terser by having each
+ row on one line:</p>
+
+ <pre><table>
+ <caption>37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)
+ <colgroup><col><col><col>
+ <thead>
+ <tr> <th>Function <th>Control Unit <th>Central Station
+ <tbody>
+ <tr> <td>Headlights <td>✔ <td>✔
+ <tr> <td>Interior Lights <td>✔ <td>✔
+ <tr> <td>Electric locomotive operating sounds <td>✔ <td>✔
+ <tr> <td>Engineer's cab lighting <td> <td>✔
+ <tr> <td>Station Announcements - Swiss <td> <td>✔
+</table></pre>
+
+ <p>The only differences between these tables, at the DOM level, is with the precise position of
+ the (in any case semantically-neutral) white space.</p>
+
+ </div>
+
<p><strong>However</strong>, a <span data-x="syntax-start-tag">start tag</span> must never be
omitted if it has any attributes.</p>
+ <div class="example">
+ <p>Returning to the earlier example with all the white space removed and then all the optional
+ tags removed:</p>
+
+ <pre><!DOCTYPE HTML><title>Hello</title><p>Welcome to this example.</pre>
+
+ <p>If the <code>body</code> element in this example had to have a <code
+ data-x="attr-class">class</code> attribute and the <code>html</code> element had to have a <code
+ data-x="attr-lang">lang</code> attribute, the markup would have to become:</p>
+
+ <pre><!DOCTYPE HTML><html lang="en"><title>Hello</title><body class="demo"><p>Welcome to this example.</pre>
+
+ </div>
+
+
<h5 id="element-restrictions">Restrictions on content models</h5>
<p>For historical reasons, certain elements have extra restrictions beyond even the restrictions
More information about the Commit-Watchers
mailing list