Text: Abbreviations, Quotations, and Code

The basics of defining text using paragraphs (as well as emphasis and line breaks) and headings was covered in the HTML Beginner Tutorial. And for the same reason we use p and h1, h2, etc, there are a number of other tags we should also use to specifically represent other text-types, such as abbreviations, quotations, and computer code.

Abbreviations

abbr is used to markup an abbreviation, a shortened form of a word or phrase.

The expanded phrase that the abbreviation represents can be defined in the value of the title attribute. This is optional but recommended.


<p>This web site is about <abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr>.</p>

Quotations

blockquote and q are used for quotations. blockquote is generally used for standalone often multi-line quotations whereas q is used for shorter, in-line quotations.

If the source of the quotation can be found on the Web, the cite attribute can be used to point to its origin.


<p>So I asked Bob about quotations on the Web and he said <q>I know as much about quotations as I do about pigeon fancying</q>. Luckily, I found HTML Dog and it said:</p>

<blockquote cite="http://www.htmldog.com/guides/html/intermediate/text/">
    <p>blockquote and q are used for quotations. blockquote is generally used for standalone often multi-line quotations whereas q is used for shorter, in-line quotations.</p>
</blockquote>

Blockquotes work very nicely with the HTML5 elements figure and figcaption, enabling a nice, semantic way to group a quotation with a citation:


<figure>
    <blockquote>[Big old quotation about evolution]</blockquote>
    <figcaption>Charles Darwin</figcaption>
</figure>

But let’s not get carried away with that here - see the article about Sectioning for more.

Citations

Just to make things nice and confusing, as well as a cite attribute, there is also a cite tag. This can be used to define the title of a work, such as a book.


<p>According to <cite>the Bible</cite>, after six days God said <q>screw this for a lark, I'm having a nap</q>.</p>

Code

code is used to represent any form of computer code. Further, var can be used for variables (which could be a variable in anything, not just in code - it could be a variable in an equation, for example), samp for sample output, and kbd (keyboard) for user input.


<p>If you add the line <code><var>givevaderachuckle</var> = true;</code> to the <code>destroy_planet</code> subroutine and then type <kbd>ilovejabba</kbd> into the console, the big bad green Death Star laser will etch <samp>Slug Lover!</samp> on the planet's surface.</p>

Preformatted text

pre is preformatted text and is unusual in HTML tags that it takes notice of every character in it, including the white space (whereas other elements will ignore a consecutive space or a line-break, for example). It is most commonly used for blocks of code, where spacing, such as indentations, can be relevant.


<pre><code>
&lt;div id="intro"&gt;
    &lt;h1&gt;Some heading&lt;/h1&gt;
    &lt;p&gt;Some paragraph paragraph thing thing thingy.&lt;/p&gt;
&lt;/div&gt;
</code></pre>