Servage Magazine

We’ve covered paragraphs, headings, and lists, but there are a few more special text elements to add to your HTML toolbox that don’t fit into a neat category. One thing these elements do have in common is that they are considered “grouping content” in the HTML5 spec. The other thing they share is that browsers typically display them as block elements by default.

Long quotations

<blockquote>...</blockquote>
A lengthy, block-level quotation

If you have a long quotation, a testimonial, or a section of copy from another source, you should mark it up as a blockquote element. It is recommended that content within blockquote elements be contained in other elements, such as paragraphs, headings, or lists, as shown in this example.

<p>Renowned type designer, Mathew Davis, has this to say about his profession:</p>
<blockquote>
<p>Our alphabet hasn't changed in eons; there isn't much latitude in what a designer can         do with the individual letters.</p>
<p>Much like a piece of classical music, the score is written down – it's not something that is tampered with – and yet, eachconductor interprets that score differently. There is tension inthe interpretation.</p>
</blockquote>

The output is shown below.

Preformatted text

<pre>...</pre>
Preformatted text

Browsers ignore whitespace such as line returns and character spaces in the source document. But in some types of information, such as code examples or poetry, the whitespace is important for conveying meaning. For these purposes, there is the preformatted text (pre) element. It is a unique element in that it is displayed exactly as it is typed—including all the carriage returns and multiple character spaces. By default, preformatted text is also displayed in a constant-width font (one in which all the characters are the same width, also called monospace), such as Courier.

The pre element in this example displays as shown in the output. The second part of the figure shows the same content marked up as a paragraph (p) element for comparison.

<pre>
This is                  an                           example of                         
              text with 
                                              a lot of 
                                              curious
                                              whitespace.
</pre>

The output is displayed below.

Figures

<figure>...</figure>
Contact information
<figcaption>...</figcaption>
Contact information

The figure element is used for content that illustrates or supports some point in the text. A figure may contain an image, a video, a code snippet, text, or even a table—pretty much anything that can go in the flow of web content—and should be treated and referenced as a self-contained unit. That means if a figure is removed from its original placement in the main flow (to a sidebar or appendix, for example), both the figure and the main flow should continue to make sense.

Although it is possible to simply drop an image into text, wrapping it in figure tags makes its purpose explicitly clear. It also allows you to apply special styles to figures but not to other images on the page.

<figure>
<img src="piechart.png" alt="chart showing fonts on mobile devices">
</figure>

A caption can be attached to the figure using the optional figcaption element above or below the figure content.

<figure>
<pre><code>
body {
background-color: #000;
color: red;
}
</code></pre>
<figcaption>
Sample CSS rule.
</figcaption>
</figure>

NOTE:

The figure and figcaption elements are not supported in Internet Explorer versions 8 and earlier.