Exemplo 4-2. <h1>, <h2>, e outras Tags de Header.

Uso:

<h1>Primeira seção</h1>

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

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

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

<h3>Este é o cabeçalho da primeira subseção</h3>

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

<h2>Este é o heading para a segunda seção</h2>

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

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

Uso:

<h1>Primeira seção</h1>

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

<h3>Subseção</h3>

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

Exemplo 4-4. <p>

Uso:

<p>Isto é 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><p>Parágrafo 1 da definição 3.</p></dd>
</dl>

Exemplo 4-8. <pre>

Você pode usar <pre> para marcar uma mensagem de email;

<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>

Tenha em mente que o < e o & continuam sendo reconhecidos como caracteres especiais em um texto pré-formatado. É por isto que nos exemplos tivemos que utilizar &lt; ao invés de <. Para manter a consistência, o &gt; também foi utilizado no lugar do >. Fique atento para caracteres especiais que podem aparecer em textos copiados de origens não formatadas, como por exemplo, de uma mensagem de email ou do código fonte de um programa.

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. Utiliizando rowspan

Uso:

<p>Uma célula comprida e estreita na esquerda e duas 
células 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élula longa em cima, duas células abaixo.</p>

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

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

    <td>Cé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>Célula do meio a direita</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, 
enquanto <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 email 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>Maiores informações estão disponíveis no 
<a href="http://www.FreeBSD.org/">web 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>