Example 4-2. <h1>, <h2>, etc.

Use:

    <h1>First section</h1>
    
    <!-- Document introduction goes here -->
    
    <h2>This is the heading for the first section</h2>
    
    <!-- Content for the first section goes here -->
    
    <h3>This is the heading for the first sub-section</h3>
    
    <!-- Content for the first sub-section goes here -->
    
    <h2>This is the heading for the second section</h2>
    
    <!-- Content for the second section goes here -->

Example 4-3. Bad ordering of <hn> elements

Use:

    <h1>First section</h1>
    
    <!-- Document introduction -->
    
    <h3>Sub-section</h3>
    
    <!-- This is bad, <h2> has been left out -->

Example 4-4. <p>

Use:

    <p>This is a paragraph.  It can contain just about any
      other element.</p>

Example 4-5. <blockquote>

Use:

    <p>A small excerpt from the US Constitution:</p>
    
    <blockquote>We the People of the United States, in Order to form
      a more perfect Union, establish Justice, insure domestic
      Tranquility, provide for the common defence, promote the general
      Welfare, and secure the Blessings of Liberty to ourselves and our
      Posterity, do ordain and establish this Constitution for the
      United States of America.</blockquote>

Example 4-6. <ul> and <ol>

Use:

    <p>An unordered list.  Listitems will probably be
      preceeded by bullets.</p>
    
    <ul>
      <li>First item</li>
    
      <li>Second item</li>
    
      <li>Third item</li>
    </ul>
    
    <p>An ordered list, with list items consisting of multiple
      paragraphs.  Each item (note: not each paragraph) will be
      numbered.</p>
    
    <ol>
      <li><p>This is the first item.  It only has one paragraph.</p></li>
    
      <li><p>This is the first paragraph of the second item.</p>
    
        <p>This is the second paragraph of the second item.</p></li>
    
      <li><p>This is the first and only paragraph of the third
        item.</p></li>
    </ol>

Example 4-7. Definition lists with <dl>

Use:

    <dl>
      <dt>Term 1</dt>
    
      <dd><p>Paragraph 1 of definition 1.</p></dd>
    
        <p>Paragraph 2 of definition 1.</p></dd>
    
      <dt>Term 2</dt>
    
      <dd><p>Paragraph 1 of definition 2.</p></dd>
    
      <dt>Term 3</dt>
    
      <dd>Paragraph 1 of definition 3.  Note that the &lt;p&gt;
        element is not required in the single paragraph case.</dd>
    </dl>

Example 4-8. <pre>

You could use <pre> to mark up an e-mail message;

    <pre>  From: [email protected]
      To: [email protected]
      Subject: New documentation available
    
      There's a new copy of my primer for contributers to the FreeBSD
      Documentation Project available at
    
        <URL:http://people.FreeBSD.org/~nik/primer/index.html>
    
      Comments appreciated.
    
      N</pre>

Example 4-9. Simple use of <table>

Use:

    <p>This is a simple 2x2 table.</p>
    
    <table>
      <tr>
        <td>Top left cell</td>
    
        <td>Top right cell</td>
      </tr>
    
      <tr>
        <td>Bottom left cell</td>
    
        <td>Bottom right cell</td>
      </tr>
    </table>

Example 4-10. Using rowspan

Use:

    <p>One tall thin cell on the left, two short cells next to
      it on the right.</p>
    
    <table>
      <tr>
        <td rowspan="2">Long and thin</td>
      </tr>
    
      <tr>
        <td>Top cell</td>
    
        <td>Bottom cell</td>
      </tr>
    </table>

Example 4-11. Using colspan

Use:

    <p>One long cell on top, two short cells below it.</p>
    
    <table>
      <tr>
        <td colspan="2">Top cell</td>
      </tr>
    
      <tr>
        <td>Bottom left cell</td>
    
        <td>Bottom right cell</td>
      </tr>
    </table>

Example 4-12. Using rowspan and colspan together

Use:

    <p>On a 3x3 grid, the top left block is a 2x2 set of
      cells merged in to one.  The other cells are normal.</p>
    
    <table>
      <tr>
        <td colspan="2" rowspan="2">Top left large cell</td>
    
        <td>Top right cell</td>
      </tr>
    
      <tr>
        <!-- Because the large cell on the left merges in to
             this row, the first <td> will occur on its
             right -->
            
        <td>Middle right cell</td>
      </tr>
    
      <tr>
        <td>Bottom left cell</td>
    
        <td>Bottom middle cell</td>
    
        <td>Bottom right cell</td>
      </tr>
    </table>

Example 4-13. <em> and <strong>

Use:

    <p><em>This</em> has been emphasised, while
      <strong>this</strong> has been strongly emphasised.</p>

Example 4-14. <b> and <i>

    <p><b>This</b> is in bold, while <i>this</i> is
      in italics.</p>

Example 4-15. <tt>

Use:

    <p>This document was originally written by
      Nik Clayton, who can be reached by e-mail as
      <tt>[email protected]</tt>.</p>

Example 4-16. <big>, <small>, and <font>

The following fragments all do the same thing.

    <p>This text is <small>slightly smaller</small>.  But
      this text is <big>slightly bigger</big>.</p>
    
    <p>This text is <font size="-1">slightly smaller</font>.  But
      this text is <font size="+1">slightly bigger</font.</p>
    
    <p>This text is <font size="2">slightly smaller</font>.  But
      this text is <font size="4">slightly bigger</font>.</p>

Example 4-17. Using <a href="...">

Use:

    <p>More information is available at the
      <a href="http://www.FreeBSD.org/">FreeBSD web site</a>.</p>

Example 4-18. Using <a name="...">

Use:

    <p><a name="para1">This</a> paragraph can be referenced
      in other links with the name <tt>para1</tt>.</p>

Example 4-19. Linking to a named part of another document

Assume that the para1 example resides in a document called foo.html.

    <p>More information can be found in the
      <a href="foo.html#para1">first paragraph</a> of
      <tt>foo.html</tt>.</p>

Example 4-20. Linking to a named part of the same document

Assume that the para1 example resides in this document

    <p>More information can be found in the
      <a href="#para1">first paragraph</a> of this
      document.</p>