4.4. Block Elements
Prev | Chapter 4. XHTML Markup | Next

## 4.4. Block Elements

### 4.4.1. Headings

XHTML has tags to denote headings in the document at up to six different levels.

The largest and most prominent heading is `h1`, then `h2`, continuing down to `h6`.

The element's content is the text of the heading.

Example 4.2. `h1`, `h2`, and Other Header Tags

Usage:

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

Generally, an XHTML page should have one first level heading (`h1`). This can contain many second level headings (`h2`), which can in turn contain many third level headings. Each `h`n`` element should have the same element, but one further up the hierarchy, preceding it. Leaving gaps in the numbering is to be avoided.

Example 4.3. Bad Ordering of `h`n`` Elements

Usage:

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

### 4.4.2. Paragraphs

XHTML supports a single paragraph element, `p`.

Example 4.4. `p`

Usage:

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

### 4.4.3. Block Quotations

A block quotation is an extended quotation from another document that should not appear within the current paragraph.

Example 4.5. `blockquote`

Usage:

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

### 4.4.4. Lists

XHTML can present the user with three types of lists: ordered, unordered, and definition.

Typically, each entry in an ordered list will be numbered, while each entry in an unordered list will be preceded by a bullet point. Definition lists are composed of two sections for each entry. The first section is the term being defined, and the second section is the definition of the term.

Ordered lists are indicated by the `ol` element, unordered lists by the `ul` element, and definition lists by the `dl` element.

Ordered and unordered lists contain listitems, indicated by the `li` element. A listitem can contain textual content, or it may be further wrapped in one or more `p` elements.

Definition lists contain definition terms (`dt`) and definition descriptions (`dd`). A definition term can only contain inline elements. A definition description can contain other block elements.

Example 4.6. `ul` and `ol`

Usage:

<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>
Example 4.7. Definition Lists with `dl`

Usage:

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

### 4.4.5. Pre-formatted Text

Pre-formatted text can be shown to the user exactly as it is in the file. Typically, this means that the text is shown in a fixed font, multiple spaces are not merged into one, and line breaks in the text are significant.

In order to do this, wrap the content in the `pre` element.

Example 4.8. `pre`

For example, the `pre` tags could be used to mark up an email message:

<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:http://people.FreeBSD.org/~nik/primer/index.html&gt; Comments appreciated. N</pre>

Keep in mind that `<` and `&` still are recognized as special characters in pre-formatted text. This is why the example shown had to use `&lt;` instead of `<`. For consistency, `&gt;` was used in place of `>`, too. Watch out for the special characters that may appear in text copied from a plain-text source, like an email message or program code.

### 4.4.6. Tables

Mark up tabular information using the `table` element. A table consists of one or more table rows (`tr`), each containing one or more cells of table data (`td`). Each cell can contain other block elements, such as paragraphs or lists. It can also contain another table (this nesting can repeat indefinitely). If the cell only contains one paragraph then the `p`element is not needed.

Example 4.9. Simple Use of `table`

Usage:

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

A cell can span multiple rows and columns. To indicate this, add the `rowspan` and/or `colspan` attributes, with values indicating the number of rows or columns that should be spanned.

Example 4.10. Using `rowspan`

Usage:

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

Usage:

<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

Usage:

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

Prev | Up | Next
4.3. Sectional Elements | Home | 4.5. In-line Elements

This, and other documents, can be downloaded from http://ftp.FreeBSD.org/pub/FreeBSD/doc/

For questions about FreeBSD, read the documentation before contacting <questions@FreeBSD.org>.
For questions about this documentation, e-mail <doc@FreeBSD.org>.