anchor.diff:                Vivamus pulvinar ligula eget mi tincidunt, eget faucibus justo laoreet.
                 In sapien lacus, egestas faucibus laoreet eu, tempor sit amet lorem.
                 Sed luctus congue tortor a scelerisque.
  -            </p>
  -            <h3>Heading 3</h3>
  -            <p lang="la">
  +            h3 Heading 3
  +            p(lang="la").
                 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                 Nunc sit amet scelerisque lectus. Cras cursus sed dui quis convallis.
                 Quisque id justo elit.
  
positive.code:               }
                <span class="c__Obj">Util</span>.<span class="c__Cmd">extend(<span class="c__Arg"><span class="c__Obj">TestSubject</span>, <span class="c__Obj">Person</span></span>)</span>; <small>// extends `TestSubject` from `Person`</small>
                <span class="c__Kwd">var</span> you = <span class="c__Opr">new</span> <span class="c__Cmd">TestSubject(<span class="c__Arg"><span class="c__Str">'Chell'</span>, <span class="c__Cst">true</span></span>)</span>; <small>// creates an instance of `TestSubject`</small>
              </pre>
            </figure>
          </section>
          <section id="lists">
            <h3>Lists</h3>
            <p>The following is an <code>ol</code>.</p>
            <figure>
            <ol>
              <li>ol &gt; li</li>
              <li>ol &gt; li</li>
              <li>ol &gt; li</li>
            </ol>
            </figure>
            <p>The following is a <code>ul</code>.</p>
            <figure>
            <ul>
              <li>ul &gt; li</li>
              <li>ul &gt; li</li>
              <li>ul &gt; li</li>
            </ul>
            </figure>
            <p>The <code>dl</code> below has five groups:</p>
            <ol>
              <li>The first  group has one <code>dt</code> and one <code>dd</code>.</li>
              <li>The second group has two <code>dt</code>s and one <code>dd</code>.</li>
              <li>The third  group has one <code>dt</code> and two <code>dd</code>s.</li>
              <li>The fourth group has one <code>dt</code> and one <code>dd</code>, with its <code>dt</code> containing a <code>ul</code> with two <code>li</code>s.</li>
              <li>The fifth  group has one <code>dt</code> and one <code>dd</code>, with its <code>dd</code> containing a <code>ul</code> with two <code>li</code>s.</li>
            </ol>
            <figure>
            <dl>
              <dt>dl &gt; dt</dt>
              <dd>dl &gt; dd</dd>
              <dt>dl &gt; dt</dt>
              <dt>dl &gt; dt</dt>
              <dd>dl &gt; dd</dd>
              <dt>dl &gt; dt</dt>
              <dd>dl &gt; dd</dd>
              <dd>dl &gt; dd</dd>
              <dt>
                <ul>
                  <li>dl &gt; dt &gt;&gt; li</li>
                  <li>dl &gt; dt &gt;&gt; li</li>
                </ul>
              </dt>
              <dd>dl &gt; dd</dd>
              <dt>dl &gt; dt</dt>
              <dd>
                <ul>
                  <li>dl &gt; dd &gt;&gt; li</li>
                  <li>dl &gt; dd &gt;&gt; li</li>
                </ul>
              </dd>
            </dl>
            </figure>
          </section>
          <section id="tables">
            <h3>Tables</h3>
            <p>An unclassed table is shown below.</p>
            <figure>
            <table>
              <caption><strong>This is a <code>caption &gt; strong</code>.</strong>
                It usually contains the table&rsquo;s title
                (<i lang="la"><abbr title="exampli gratia">e.g.</abbr></i>, <i>Table&nbsp;1</i>).
                This is the rest of the <code>table &gt; caption</code>.</caption>
              <thead>
                <tr>
                  <th>Header Row 1 Heading 1</th>
                  <th>Header Row 1 Heading 2</th>
                  <th>Header Row 1 Heading 3</th>
                </tr>
                <tr>
                  <td>Header Row 2 Cell 1</td>
                  <td>Header Row 2 Cell 2</td>
                  <td>Header Row 2 Cell 3</td>
                </tr>
              </thead>
              <tfoot>
                <tr>
                  <th>Footer Row 1 Heading 1</th>
                  <th>Footer Row 1 Heading 2</th>
                  <th>Footer Row 1 Heading 3</th>
                </tr>
                <tr>
                  <td>Footer Row 2 Cell 1</td>
                  <td>Footer Row 2 Cell 2</td>
                  <td>Footer Row 2 Cell 3</td>
                </tr>
              </tfoot>
              <tbody>
                <tr>
                  <td>Body Row 1 Cell 1</td>
                  <td>Body Row 1 Cell 2</td>
                  <td>Body Row 1 Cell 3</td>
                </tr>
                <tr>
                  <td>Body Row 2 Cell 1</td>
                  <td>Body Row 2 Cell 2</td>
                  <td>Body Row 2 Cell 3</td>
                </tr>
                <tr>
                  <td>Body Row 3 Cell 1</td>
                  <td>Body Row 3 Cell 2</td>
                  <td>Body Row 3 Cell 3</td>
                </tr>
                <tr>
                  <td>Body Row 4 Cell 1</td>
                  <td>Body Row 4 Cell 2</td>
                  <td>Body Row 4 Cell 3</td>
                </tr>
                <tr>
                  <td>Body Row 5 Cell 1</td>
                  <td>Body Row 5 Cell 2</td>
                  <td>Body Row 5 Cell 3</td>
                </tr>
              </tbody>
            </table>
            </figure>
          </section>
        section#text-level.
          <h2>Text-Level Semantics</h2>
          <p>The primary method of marking up text-level semantics should be
            traditional punctuation. After that, use HTML Elements. <a
            href="../../blog/semantic-punctuation.html">Read more on using traditional punctuation
            to indicate text-level semantics.</a></p>
          <section id="links">
            <h3>Hyperlinks</h3>
            <ul>
              <li><a>a</a></li>
              <li><a href="#links">a[href]</a></li>
              <li><a rel="external">a[rel=&quot;external&quot;]</a></li>
              <li><a href="http://www.example.com/" rel="external">a[href][rel=&quot;external&quot;]</a></li>
            </ul>
          </section>
          <section id="stress">
            <h3>Stressed Text</h3>
            <dl class="o-FlexContainer">
              <dt class="u-w_p3"><code>em</code></dt>      <dd class="u-w_p3c"><em>emphasized text</em></dd>
              <dt class="u-w_p3"><code>strong</code></dt>  <dd class="u-w_p3c"><strong>important text</strong></dd>
              <dt class="u-w_p3"><code>i</code></dt>       <dd class="u-w_p3c"><i>alternate voice (scare quotes, mentions, <i lang="la"><abbr title="et cetera">etc.</abbr></i>)</i></dd>
              <dt class="u-w_p3"><code>i[lang]</code></dt> <dd class="u-w_p3c"><i lang="en">common expression or term in a foreign language</i></dd>
              <dt class="u-w_p3"><code>mark</code></dt>    <dd class="u-w_p3c"><mark>relevant in a certain context</mark></dd>
              <dt class="u-w_p3"><code>u</code></dt>       <dd class="u-w_p3c"><u>in an example, text to which attention should be brought</u></dd>
              <dt class="u-w_p3"><code>small</code></dt>   <dd class="u-w_p3c"><small>side comments</small></dd>
              <dt class="u-w_p3"><code>s</code></dt>       <dd class="u-w_p3c"><s>text shown to be no longer relevant</s></dd>
            </dl>
          </section>
          <section id="documentation">
            <h3>Documentation</h3>
            <dl class="o-FlexContainer">
              <dt class="u-w_p3"><code>ins</code></dt>    <dd class="u-w_p3c"><ins>text inserted into a document</ins></dd>
              <dt class="u-w_p3"><code>del</code></dt>    <dd class="u-w_p3c"><del>text deleted from a document</del></dd>
              <dt class="u-w_p3"><code>dfn</code></dt>    <dd class="u-w_p3c"><dfn>definining instance of a term</dfn></dd>
              <dt class="u-w_p3"><code>b</code></dt>      <dd class="u-w_p3c"><b>keyword or technical term</b></dd>
              <dt class="u-w_p3"><code>var</code></dt>    <dd class="u-w_p3c"><var>variable</var></dd>
              <dt class="u-w_p3"><code>q</code></dt>      <dd class="u-w_p3c"><q>quoted material</q> (fictional or non-fictional)</dd>
              <dt class="u-w_p3"><code>cite</code></dt>   <dd class="u-w_p3c"><cite>reference to a work or part of a work</cite></dd>
              <dt class="u-w_p3"><code>sup</code></dt>    <dd class="u-w_p3c"><sup>superscript</sup></dd>
              <dt class="u-w_p3"><code>sub</code></dt>    <dd class="u-w_p3c"><sub>subscript</sub></dd>
            </dl>
          </section>
          <section id="data">
            <h3>Data</h3>
            <dl class="o-FlexContainer">
              <dt class="u-w_p3"><code>abbr[title]</code></dt>  <dd class="u-w_p3c"><abbr title="">abbreviation</abbr></dd>
              <dt class="u-w_p3"><code>data</code></dt>         <dd class="u-w_p3c"><data>machine-readable data</data></dd>
              <dt class="u-w_p3"><code>time</code></dt>         <dd class="u-w_p3c"><time>a date or time</time></dd>
              <dt class="u-w_p3"><code>code</code></dt>         <dd class="u-w_p3c"><code>a fragment of code</code></dd>
              <dt class="u-w_p3"><code>kbd</code></dt>          <dd class="u-w_p3c"><kbd>user input</kbd></dd>
              <dt class="u-w_p3"><code>kbd &gt; kbd</code></dt> <dd class="u-w_p3c"><kbd>a <kbd>button</kbd> or <kbd>key</kbd> on a physical device</kbd></dd>
              <dt class="u-w_p3"><code>samp</code></dt>         <dd class="u-w_p3c"><samp>sample computer output</samp></dd>
            </dl>
          </section>
      nav.Bc
        ol.Anc
          li: a.Crumb(rel="top"    href="../../index.html   ") Home
  
negative.code:               In quis lectus in lectus interdum laoreet eu quis quam.
                Fusce auctor posuere purus, quis semper libero dignissim euismod.
                Curabitur commodo mauris a sapien vulputate, eget pharetra urna facilisis.
              h5 Heading 5
              p(lang="la").
                Donec finibus ut lectus finibus pellentesque.
                Nulla euismod feugiat nulla nec posuere.
                Sed ac est id sem sagittis rhoncus eu ac neque.
  