HTML Standard Tracker

Filter

File a bug

SVNBugCommentTime (UTC)
3804<hr> and <span> examples.2009-09-11 04:35
@@ -14980,20 +14980,53 @@ To move the error from the markup to the rhyming.&lt;/p&gt;</pre>
    <dd>
     <pre class="idl">interface <dfn>HTMLHRElement</dfn> : <span>HTMLElement</span> {};</pre>
    </dd>
   </dl>
 
   <p>The <code>hr</code> element <span>represents</span> a
   <span>paragraph</span>-level thematic break, e.g. a scene change in
   a story, or a transition to another topic within a section of a
   reference book.</p>
 
+  <div class="example">
+
+   <p>The following extract from <cite>Pandora's Star</cite> by Peter
+   F. Hamilton shows two paragraphs that precede a scene change and
+   the paragraph that follows it. The scene change, represented in the
+   printed book by a gap containing a solitary centered star between
+   the second and third paragraphs, is here represented using the
+   <code>hr</code> element.</p>
+
+   <!-- ISBN 1-4050-0020-1; bottom of page 14 -->
+
+   <pre lang="en-GB">&lt;p>Dudley was ninety-two, in his second life, and fast approaching
+time for another rejuvenation. Despite his body having the physical
+age of a standard fifty-year-old, the prospect of a long degrading
+campaign within academia was one he regarded with dread. For a
+supposedly advanced civilization, the Intersolar Commonwearth could be
+appallingly backward at times, not to mention cruel.&lt;/p>
+&lt;p>&lt;i>Maybe it won't be that bad&lt;/i>, he told himself. The lie was
+comforting enough to get him through the rest of the night's
+shift.&lt;/p>
+<strong>&lt;hr></strong>
+&lt;p>The Carlton AllLander drove Dudley home just after dawn. Like the
+astronomer, the vehicle was old and worn, but perfectly capable of
+doing its job. It had a cheap diesel engine, common enough on a
+semi-frontier world like Gralmond, although its drive array was a
+thoroughly modern photoneural processor. With its high suspension and
+deep-tread tyres it could plough along the dirt track to the
+observatory in all weather and seasons, including the metre-deep snow
+of Gralmond's winters.&lt;/p></pre>
+
+  </div>
+
+
 
   <h4>The <dfn><code>br</code></dfn> element</h4>
 
   <dl class="element">
    <dt>Categories</dt>
    <dd><span>Flow content</span>.</dd>
    <dd><span>Phrasing content</span>.</dd>
    <dt>Contexts in which this element may be used:</dt>
    <dd>Where <span>phrasing content</span> is expected.</dd>
    <dt>Content model:</dt>
@@ -17184,21 +17217,20 @@ flavors of ice cream to be available for purchase!&lt;/p></pre>
    &lt;mi>+&lt;/mi>
    &lt;msup>&lt;mi>c&lt;/mi>&lt;mn>2&lt;/mn>&lt;/msup>
   &lt;/msqrt>
  &lt;/math>
  &lt;legend>
   Using Pythagoras' theorem to solve for the hypotenuse &lt;var>a&lt;/var> of
   a triangle with sides &lt;var>b&lt;/var> and &lt;var>c&lt;/var>
  &lt;/legend>
 &lt;/figure></pre>
 
-
   </div>
 
 
   <h4>The <dfn><code>samp</code></dfn> element</h4>
 
   <dl class="element">
    <dt>Categories</dt>
    <dd><span>Flow content</span>.</dd>
    <dd><span>Phrasing content</span>.</dd>
    <dt>Contexts in which this element may be used:</dt>
@@ -17349,22 +17381,20 @@ For example, the 10th point has coordinate
   detailed mathematical markup is not desired. <a
   href="#refsMATHML">[MATHML]</a></p>
 
   <div class="example">
    <pre>&lt;var>E&lt;/var>=&lt;var>m&lt;/var>&lt;var>c&lt;/var>&lt;sup>2&lt;/sup></pre>
    <pre>f(&lt;var>x&lt;/var>, &lt;var>n&lt;/var>) = log&lt;sub>4&lt;/sub>&lt;var>x&lt;/var>&lt;sup>&lt;var>n&lt;/var>&lt;/sup></pre>
   </div>
 
 
 
-
-
   <h4>The <dfn><code>i</code></dfn> element</h4>
 
   <dl class="element">
    <dt>Categories</dt>
    <dd><span>Flow content</span>.</dd>
    <dd><span>Phrasing content</span>.</dd>
    <dt>Contexts in which this element may be used:</dt>
    <dd>Where <span>phrasing content</span> is expected.</dd>
    <dt>Content model:</dt>
    <dd><span>Phrasing content</span>.</dd>
@@ -17827,20 +17857,21 @@ wormhole connection.&lt;/mark>&lt;/p></pre>
   <div>
 
   <p>If the progress bar is an indeterminate progress bar, then the
   <dfn title="dom-progress-position"><code>position</code></dfn> IDL
   attribute must return &#x2212;1. Otherwise, it must return the result of
   dividing the current value by the maximum value.</p>
 
   </div>
 
 
+
   <h4>The <dfn><code>meter</code></dfn> element</h4>
   <!-- Keep this after <progress> and NOT close to <time> -->
 
   <dl class="element">
    <dt>Categories</dt>
    <dd><span>Flow content</span>.</dd>
    <dd><span>Phrasing content</span>.</dd>
    <dt>Contexts in which this element may be used:</dt>
    <dd>Where <span>phrasing content</span> is expected.</dd>
    <dt>Content model:</dt>
@@ -18574,20 +18605,23 @@ and a height of &lt;meter>2cm&lt;/meter>.&lt;/p> &lt;!-- <strong>BAD!</strong> -
   element.</p>
 
   <p>The requirements on handling the <code>bdo</code> element for the
   bidi algorithm may be implemented indirectly through the style
   layer. For example, an HTML+CSS user agent should implement these
   requirements by implementing the CSS 'unicode-bidi' property. <a
   href="#refsCSS">[CSS]</a></p>
 
   </div>
 
+
+
+
   <h4>The <dfn><code>span</code></dfn> element</h4>
 
   <dl class="element">
    <dt>Categories</dt>
    <dd><span>Flow content</span>.</dd>
    <dd><span>Phrasing content</span>.</dd>
    <dt>Contexts in which this element may be used:</dt>
    <dd>Where <span>phrasing content</span> is expected.</dd>
    <dt>Content model:</dt>
    <dd><span>Phrasing content</span>.</dd>
@@ -18599,20 +18633,38 @@ and a height of &lt;meter>2cm&lt;/meter>.&lt;/p> &lt;!-- <strong>BAD!</strong> -
    </dd>
   </dl>
 
   <p>The <code>span</code> element doesn't mean anything on its own,
   but can be useful when used together with other attributes,
   e.g. <code title="attr-class">class</code>, <code
   title="attr-lang">lang</code>, or <code
   title="attr-dir">dir</code>. It <span>represents</span> its
   children.</p>
 
+  <div class="example">
+
+   <p>In this example, a code fragment is marked up using
+   <code>span</code> elements and <code
+   title="attr-class">class</code> attributes so that its keywords and
+   identifiers can be color-coded from CSS:</p>
+
+   <!-- extract from http://www.cs.cmu.edu/~dst/DeCSS/Gallery/vlc-dvd_css-c.txt -->
+
+   <pre>&lt;pre>&lt;code class="lang-c">&lt;span class="keyword">for&lt;/span> (&lt;span class="ident">j&lt;/span> = 0; &lt;span class="ident">j&lt;/span> &amp;lt; 256; &lt;span class="ident">j&lt;/span>++) {
+  &lt;span class="ident">i_t3&lt;/span> = (&lt;span class="ident">i_t3&lt;/span> & 0x1ffff) | (&lt;span class="ident">j&lt;/span> &amp;lt;&amp;lt; 17);
+  &lt;span class="ident">i_t6&lt;/span> = (((((((&lt;span class="ident">i_t3&lt;/span> >> 3) ^ &lt;span class="ident">i_t3&lt;/span>) >> 1) ^ &lt;span class="ident">i_t3&lt;/span>) >> 8) ^ &lt;span class="ident">i_t3&lt;/span>) >> 5) & 0xff;
+  &lt;span class="keyword">if&lt;/span> (&lt;span class="ident">i_t6&lt;/span> == &lt;span class="ident">i_t1&lt;/span>)
+    &lt;span class="keyword">break&lt;/span>;
+}&lt;/code>&lt;/pre></pre>
+
+  </div>
+
 
 
   <h4>Usage summary</h4>
 
   <p><i>This section is non-normative.</i></p>
 
   <table>
    <thead>
     <tr>
      <th>Element

|