Skip to content

Commit

Permalink
[e] (0) Add a bunch of examples to the tag omission section.
Browse files Browse the repository at this point in the history 
Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=24358
Affected topics: HTML Syntax and Parsing

git-svn-id: http://svn.whatwg.org/webapps@8431 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Jan 28, 2014
1 parent 9645a84 commit d2d39fd
Show file tree
Hide file tree
Showing 3 changed files with 710 additions and 0 deletions.
236 changes: 236 additions & 0 deletions complete.html
View file
Expand Up @@ -84739,6 +84739,78 @@ <h5 id=optional-tags><span class=secno>12.1.2.4 </span>Optional tags</h5>
<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="">&lt;html&gt;</code>"
tag:</p>

<pre>&lt;!DOCTYPE HTML&gt;
<strong>&lt;html&gt;</strong>
&lt;head&gt;
&lt;title&gt;Hello&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Welcome to this example.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

<p>Doing so would make the document look like this:</p>

<pre>&lt;!DOCTYPE HTML&gt;

&lt;head&gt;
&lt;title&gt;Hello&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Welcome to this example.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</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>&lt;!DOCTYPE HTML&gt;&lt;head&gt;
&lt;title&gt;Hello&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Welcome to this example.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</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>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
<strong>&lt;!-- where is this comment in the DOM? --&gt;</strong>
&lt;head&gt;
&lt;title&gt;Hello&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Welcome to this example.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

<p>With the tag removed, the document actually turns into the same as this:</p>

<pre>&lt;!DOCTYPE HTML&gt;
&lt;!-- where is this comment in the DOM? --&gt;
<small>&lt;html&gt;</small>
&lt;head&gt;
&lt;title&gt;Hello&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Welcome to this example.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</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>
Expand All @@ -84765,6 +84837,50 @@ <h5 id=optional-tags><span class=secno>12.1.2.4 </span>Optional tags</h5>
<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>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;<strong>
</strong>&lt;head&gt;<strong>
</strong>&lt;title&gt;Hello&lt;/title&gt;<strong>
</strong>&lt;/head&gt;<strong>
</strong>&lt;body&gt;<strong>
</strong>&lt;p&gt;Welcome to this example.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</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>&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;Hello&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;Welcome to this example.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>

<p>Then we can omit a number of tags without affecting the DOM:</p>

<pre>&lt;!DOCTYPE HTML&gt;&lt;title&gt;Hello&lt;/title&gt;&lt;p&gt;Welcome to this example.&lt;/p&gt;</pre>

<p>At that point, we can also add some white space back:</p>

<pre>&lt;!DOCTYPE HTML&gt;
&lt;title&gt;Hello&lt;/title&gt;
&lt;p&gt;Welcome to this example.&lt;/p&gt;</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>&lt;!DOCTYPE HTML&gt;
<small>&lt;html&gt;&lt;head&gt;</small>&lt;title&gt;Hello&lt;/title&gt;
<small>&lt;/head&gt;&lt;body&gt;</small>&lt;p&gt;Welcome to this example.&lt;/p&gt;<small>&lt;/body&gt;&lt;/html&gt;</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
Expand All @@ -84791,6 +84907,14 @@ <h5 id=optional-tags><span class=secno>12.1.2.4 </span>Optional tags</h5>
<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>&lt;!DOCTYPE HTML&gt;&lt;title&gt;Hello&lt;/title&gt;&lt;p&gt;Welcome to this example.<small>&lt;/p&gt;</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,
Expand Down Expand Up @@ -84872,9 +84996,121 @@ <h5 id=optional-tags><span class=secno>12.1.2.4 </span>Optional tags</h5>
<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>&lt;table&gt;
&lt;caption&gt;37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)&lt;/caption&gt;
&lt;colgroup&gt;&lt;col&gt;&lt;col&gt;&lt;col&gt;&lt;/colgroup&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Function&lt;/th&gt;
&lt;th&gt;Control Unit&lt;/th&gt;
&lt;th&gt;Central Station&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Headlights&lt;/td&gt;
&lt;td&gt;&#x2714;&lt;/td&gt;
&lt;td&gt;&#x2714;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Interior Lights&lt;/td&gt;
&lt;td&gt;&#x2714;&lt;/td&gt;
&lt;td&gt;&#x2714;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Electric locomotive operating sounds&lt;/td&gt;
&lt;td&gt;&#x2714;&lt;/td&gt;
&lt;td&gt;&#x2714;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Engineer's cab lighting&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&#x2714;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Station Announcements - Swiss&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&#x2714;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;</pre>

<p>The exact same table, modulo some white space differences, could be marked up as follows:</p>

<pre>&lt;table&gt;
&lt;caption&gt;37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)
&lt;colgroup&gt;&lt;col&gt;&lt;col&gt;&lt;col&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Function
&lt;th&gt;Control Unit
&lt;th&gt;Central Station
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Headlights
&lt;td&gt;&#x2714;
&lt;td&gt;&#x2714;
&lt;tr&gt;
&lt;td&gt;Interior Lights
&lt;td&gt;&#x2714;
&lt;td&gt;&#x2714;
&lt;tr&gt;
&lt;td&gt;Electric locomotive operating sounds
&lt;td&gt;&#x2714;
&lt;td&gt;&#x2714;
&lt;tr&gt;
&lt;td&gt;Engineer's cab lighting
&lt;td&gt;
&lt;td&gt;&#x2714;
&lt;tr&gt;
&lt;td&gt;Station Announcements - Swiss
&lt;td&gt;
&lt;td&gt;&#x2714;
&lt;/table&gt;</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>&lt;table&gt;
&lt;caption&gt;37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)
&lt;colgroup&gt;&lt;col&gt;&lt;col&gt;&lt;col&gt;
&lt;thead&gt;
&lt;tr&gt; &lt;th&gt;Function &lt;th&gt;Control Unit &lt;th&gt;Central Station
&lt;tbody&gt;
&lt;tr&gt; &lt;td&gt;Headlights &lt;td&gt;&#x2714; &lt;td&gt;&#x2714;
&lt;tr&gt; &lt;td&gt;Interior Lights &lt;td&gt;&#x2714; &lt;td&gt;&#x2714;
&lt;tr&gt; &lt;td&gt;Electric locomotive operating sounds &lt;td&gt;&#x2714; &lt;td&gt;&#x2714;
&lt;tr&gt; &lt;td&gt;Engineer's cab lighting &lt;td&gt; &lt;td&gt;&#x2714;
&lt;tr&gt; &lt;td&gt;Station Announcements - Swiss &lt;td&gt; &lt;td&gt;&#x2714;
&lt;/table&gt;</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>&lt;!DOCTYPE HTML&gt;&lt;title&gt;Hello&lt;/title&gt;&lt;p&gt;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>&lt;!DOCTYPE HTML&gt;&lt;html lang="en"&gt;&lt;title&gt;Hello&lt;/title&gt;&lt;body class="demo"&gt;&lt;p&gt;Welcome to this example.</pre>

</div>


<h5 id=element-restrictions><span class=secno>12.1.2.5 </span>Restrictions on content models</h5>

Expand Down

0 comments on commit d2d39fd

Please sign in to comment.