8.4. Elementos Block

8.4.1. Cabeçalhos

XHTML tem tags para indicar títulos no documento em até seis níveis diferentes.

O maior e mais importante título é h1, depois h2, seguindo até h6.

O conteúdo do elemento é o texto do cabeçalho.

Exemplo 8.2. h1, h2 e Outras Tags de Cabeçalho

Uso:

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

Geralmente, uma página XHTML deve ter um título de primeiro nível (h1). Nela pode conter muitos títulos de segundo nível (h2), que por sua vez podem conter muitos cabeçalhos de terceiro nível. Não deixe lacunas na numeração.

8.4.2. Parágrafos

O XHTML suporta um único elemento de parágrafo, p.

Exemplo 8.3. Exemplo p

Uso:

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

8.4.3. Bloco de Citações

Um bloco de citação é uma citação estendida de outro documento que aparecerá em um parágrafo separado.

Exemplo 8.4. Exemplo blockquote

Uso:

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

8.4.4. Listas

O XHTML pode apresentar ao usuário três tipos de listas: ordenadas, desordenadas e de definição.

Entradas em uma lista ordenada serão numeradas, enquanto as entradas em uma lista não ordenada serão precedidas por marcadores. Listas de definições têm duas seções para cada entrada. A primeira seção é o termo que está sendo definido e a segunda seção é a definição.

As listas ordenadas são indicadas pelo elemento ol, listas não ordenadas pelo elemento ul e listas de definição pelo elemento dl.

As listas ordenadas e não ordenadas contêm listitens, indicadas pelo elemento li. Um listitem pode conter conteúdo textual ou pode ser envoltos em um ou mais elementos p.

As listas de definições contêm termos de definição (dt) e descrições de definição (dd). Um termo de definição pode conter apenas elementos in-line. Uma descrição de definição pode conter outros elementos de bloco.

Exemplo 8.5. Exemplo ul and ol

Uso:

<p>An unordered list.  Listitems will probably be
  preceded 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>

Exemplo 8.6. Listas de Definição com dl

Uso:

<dl>
  <dt>Term 1</dt>

  <dd><p>Paragraph 1 of definition 1.</p>

    <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><p>Paragraph 1 of definition 3.</p></dd>
</dl>

8.4.5. Texto Pré-formatado

Texto pré-formatado é apresentado para o usuário exatamente como está no arquivo. O texto é mostrado em uma fonte fixa. Vários espaços e quebras de linha são mostrados exatamente como estão no arquivo.

Deixe o texto pré-formatado no elemento pre.

Exemplo 8.7. Exemplo pre

Por exemplo, as tags pre podem ser usadas 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

    &lt;URL:https://people.FreeBSD.org/~nik/primer/index.html&gt;

  Comments appreciated.

  N</pre>

Tenha em mente que < e & ainda são reconhecidos como caracteres especiais no texto pré-formatado. É por isso que o exemplo mostrado teve que usar &lt; em vez de <. Para consistência, o &gt; também foi usado no lugar de >. Fique atento com os caracteres especiais que podem aparecer no texto copiado de uma fonte de texto simples, como uma mensagem de e-mail ou código de programa.


8.4.6. Tabelas

Marque as informações tabulares usando o elemento table. Uma tabela consiste em uma ou mais linhas da tabela (tr), cada uma contendo uma ou mais células de dados da tabela (td). Cada célula pode conter outros elementos de bloco, como parágrafos ou listas. Também pode conter outra tabela (esse aninhamento pode repetir indefinidamente). Se a célula contiver apenas um parágrafo, o elemento p não será necessário.

Exemplo 8.8. Uso Simples de table

Uso:

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

Uma célula pode abranger várias linhas e colunas adicionando os atributos rowspan ou colspan com valores para o número de linhas ou colunas a serem abrangido.

Exemplo 8.9. Usando rowspan

Uso:

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

Exemplo 8.10. Usando colspan

Uso:

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

Exemplo 8.11. Usando rowspan e colspan Juntos

Uso:

<p>On a 3x3 grid, the top left block is a 2x2 set of
  cells merged into 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 into
         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>

All FreeBSD documents are available for download at https://download.freebsd.org/ftp/doc/

Questions that are not answered by the documentation may be sent to <freebsd-questions@FreeBSD.org>.
Send questions about this document to <freebsd-doc@FreeBSD.org>.