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

Uso:

<h1>Primeira sessão</h1>

<!-- a inrodução do documento entra aqui -->

<h2>Este é o cabeçalho da primeira sessão</h2>

<!-- O conteúdo da primeira sessão entra aqui -->

<h3>Este é o cabeçalho da primeira sub-sessão</h3>

<!-- O conteúdo da primeira sub-sessão entra aqui -->

<h2>Este é o heading para a segundo sessão</h2>

<!-- O conteúdo da segunda sessão entra aqui -->

Exemplo 4-3. Má organização de elementos <hn>

Uso:

<h1>Primeira sessão</h1>

<!-- Introdução do documento -->

<h3>Sub-sessão</h3>

<!-- Isto é ruim, não foi usado <h2> -->

Exemplo 4-4. <p>

Uso:

<p><p>Isso é um
          parágrafo.  Pode conter qualquer outro elemento</p>

Exemplo 4-5. <blockquote>

Uso:

<p>Um pequeno trecho da
          constituição dos Estados Unidos:</p>

<blockquote>Nós, povo dos Estados Unidos, com o objetivo de
  fazer uma união mais perfeita, estabelecer justiça,
  garantir tranquilidade doméstica, promover uma defesa comum, promover 
  bem estar geral, assegurar as benções da
  liberdade para nós mesmos e nossa posteridade, organizamos  e
  estabelecemos essa constituição para os estados Unidos
  da América.</blockquote>

Exemplo 4-6. <ul> e <ol>

Uso:

<p>Uma lista não ordenada.  
          Os itens serão provavelmente precedidos por uma esfera
          sólida.</p>

<ul>
  <li>Primeiro item</li>

  <li>Segundo item</li>

  <li>Terceiro item</li>
</ul>

<p>Uma lista ordenada, com itens de lista com vários
parágrafos. Cada item (nota: não cada parágrafo)
será numerado.</p>

<ol>
  <li><p>Este é o primeiro item. Tem apenas um parágrafo.</p></li>

  <li><p>Este é o primeiro parágrafo do segundo item.</p>

    <p>Este é o segundo parágrafo do segundo item.</p></li>

  <li><p>Este é o primeiro e único parágrafo do terceiro item.</p></li>
</ol>

Exemplo 4-7. Listas de definição com <dl>

Uso:

<dl>
  <dt>Termo 1</dt>

  <dd><p>Parágrafo 1 da definição 1.</p>

    <p>Parágrafo 2 da definição 1.</p></dd>

  <dt>Termo 2</dt>

  <dd><p>Parágrafo 1 da definição 2.</p></dd>

  <dt>Termo 3</dt>

  <dd>Parágrafo 1 da definição 3.  Note que  
  o elemento <p> não é necessário para o caso
  de um único parágrafo.</dd>
</dl>

Exemplo 4-8. <pre>

Você pode usar <pre> para marcar uma mensagem de e-mail;

<pre>  From: nik@FreeBSD.org
  To: freebsd-doc@FreeBSD.org
  Subject: New documentation available

  There is a new copy of my primer for contributors to the FreeBSD
  Documentation Project available at

    <URL:http://people.FreeBSD.org/~nik/primer/index.html>

  Comments appreciated.

  N</pre>

Exemplo 4-9. Uso simples de <table>

Uso:

<p>Esta é uma simples tabela 
          2x2.</p>

<table>
  <tr>
    <td>Célula esquerda superior</td>

    <td>Célula direita superior</td>
  </tr>

  <tr>
    <td>Célula esquerda inferior</td>

    <td>Célula direita inferior</td>
  </tr>
</table>

Exemplo 4-10. Usando rowspan

Uso:

<p>Uma célula comprida e estreita
          na esquerda e duas célula pequenas à direita.</p>

<table>
  <tr>
    <td rowspan="2">Comprida e estreita</td>
  </tr>

  <tr>
    <td>Célula superior</td>

    <td>Célula inferior</td>
  </tr>
</table>

Exemplo 4-11. Usando colspan

Uso:

<p>Uma c&eacute;lula longa em cima, duas 
          c&eacute;lulas abaixo.</p>

<table>
  <tr>
    <td colspan="2">C&eacute;lula superior</td>
  </tr>

  <tr>
    <td>C&eacute;lula inferior esquerda</td>

    <td>C&eacute;lula inferior direita</td>
  </tr>
</table>

Exemplo 4-12. Usando rowspan e colspan juntos

Uso:

<p>Numa tabela 3x3, o bloco superior
          esquerdo é um conjunto 2x2 fundidos em um. As outras
          células são normais.</p>

<table>
  <tr>
    <td colspan="2" rowspan="2">Célula esquerda superior grande</td>

    <td>Célula direita superior</td>
  </tr>

  <tr>
    <!-- Como a célula grande à esquerda funde-se com esta linha,
         o primeiro <td> ocorrerá à a sua direita. -->
    <td>Middle right cell</td>
  </tr>

  <tr>
    <td>Célula inferior esquerda</td>

    <td>Célula inferior central</td>

    <td>Célula inferior direita</td>
  </tr>
</table>

Exemplo 4-13. <em> e <strong>

Uso:

<p><em>Este</em> foi enfatizado
            enquanto <strong>este</strong> foi fortemente enfatizado.</p>
          

Exemplo 4-14. <b> e <i>

<p><b>Este</b> esta em negrito, 
            enaquanto <i>este</i> está em itálico.</p>
          

Exemplo 4-15. <tt>

Uso:

<p> Este documento foi originalmente por
  Nik Clayton, que pode ser encontrado por e-mail em
  <tt>nik@FreeBSD.org</tt>.</p>

Exemplo 4-16. <big>, <small>, e <font>

Todos os fragmentos fazem a mesma coisa.

<p>Este texto é <small>ligeiramente
          menor</small>. Mas este texto é <big>ligeiramente maior</big>.
          </p>

<p>Este texto é <font size="-1">ligeiramente menor</font>. Mas este texto 
é <font size="+1">ligeiramente maior</font.</p>

<p>Este texto é <font size="2">ligeiramente menor</font>.  Mas este texto 
é <font size="4">ligeiramente maior</font>.</p>

Exemplo 4-17. Usando <a href="...">

Uso:

<p>Mais informação disponível no
          <a href="http://www.FreeBSD.org/">site do FreeBSD</a>.</p>

Exemplo 4-18. Usando <a name="...">

Uso:

<p><a name="para1">Este</a> parágrafo pode ser referenciado
          em outros links com o nome<tt>para1</tt>.</p>

Exemplo 4-19. Link para uma determinada parte de outro documento

Suponha que o exemplo para1 esteja em um documento chamado foo.html.

<p>Mais informação no <a href="foo.html#para1">primeiro 
          parágrafo</a> de <tt>foo.html</tt>.</p>
          

Exemplo 4-20. Links para determinada parte do mesmo documento

Suponha que o exemplo para1 esteja neste documento

<p>Mais informação no <a href="#para1">primeiro 
          parágrafo</a> deste documento.</p>