13. You Can Blockquote Me on That!

Yet another simple HTML tag for re-arranging your text:

"What is going on here?" asked the <blockquote> tag to the <p> and <br> tags. They replied, "We are not sure, but you are very different from us!"

Objectives

After this lesson you will be able to:

Insert a block of text that is indented from the body text
Apply style tags within blockquote text

Lesson

Note: If you do not have the working documents from the previous lessons, download a copy now.

In traditional writing, quotations of three or more sentences are set off from the main text as an indented block of text. HTML also includes this capability via the <blockquote>....</blockquote> tag:


<blockquote>
"This is a long quotation from a very famous person. Since it is so long
and interesting, it should really be set off from the rest of the text.
This indicates clearly that the quote is from someone other than the writer."
</blockquote>

which yields:

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

"This is a long quotation from a very famous person. Since it is so long and interesting, it should really be set off from the rest of the text. This indicates clearly that the quote is from someone other than the writer."

Note that we can apply any and all HTML we have learned so far inside of the <blockquote> tags, such as this example:

<blockquote>
<H2>A Manifesto</H2>
This is a <B>long</B> quotation from a 
<A HREF="http://www.mcli.dist.maricopa.edu/alan/">
very famous person</A>. 
Since it is so long and interesting, it should really be
<pre>     set off</pre>
from the rest of the text.
<p>
<I>This indicates</I>:
<ul> 
<li>clearly that 
<li>the quote is from 
<li>someone other than the writer.
</ul>
</blockquote>

which yields the following:

A Manifesto
This is a long quotation from a very famous person. Since it is so long and interesting, it should really be
    set off
from the rest of the text.
This indicates:

clearly that

the quote is from

someone other than the writer.

Let's add a blockquote to the introduction of our Volcano web page. We will use blockquote from the Roman naturalist, Pliny, who witnessed the eruption of the volcano Vesuvius in 79 A.D.

Open the HTML file, index.html in your text editor.
Under the <h1>Volcano Web</h1> heading, add the following:
```
  <BLOCKQUOTE>
  <B><I>
  "Nature raves savagely, threatening the lands"
  </I></B><br>
   -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm">
  Pliny the Elder</A>, who died of asphyxiation after 
  observing the destruction of Pompeii by the
  79 A.D. eruption of Mount Vesuvius.
  </BLOCKQUOTE>
```
NOTE: See how we have used a combination of the bold and italic style tags (see Lesson 5) to highlight the quote. The citation is forced to a new line with the <br> tag (see Lesson 4). We have also hyper linked "Pliny the Elder" to another web site that contains more information about Pliny and his observations.

See also how the <blockquote> tag forces a paragraph break above and below the block of text.

And finally, these NOTES (like this one) we have used through the tutorial have made use of the <blockquote> tag!
Save and Reload the HTML file.

Check Your Work

Compare your web page with a sample of how this document should appear. If your document was different from the sample, review the text you entered in the text editor.

Review

Review topics for this lesson:

What does the <blockquote> tag do?
Why don't you need a <p> tag before a blockquote?

Independent Practice

Experiment with the <blockquote> tag in your own web page. Do not just think in terms of using it only for quotations. The tag can be effective for adding some variety to your web page layout. The <blockquote> tag is one way to avoid having many pages full worth of plain text paragraphs.

Some developers will use two or three (or more) nested <blockquote> tags to create an effect of wider margins. For example,

<BLOCKQUOTE>
  <BLOCKQUOTE>
    <BLOCKQUOTE>"Oh, for more tags," he lamented.
      <p>Replied she, "Remember, dear, that while HTML may
      be limited in terms of control 
      over page layout, there is a great 
      deal of potential in the creative use 
      of the number of tags."
    </BLOCKQUOTE>
  </BLOCKQUOTE>
</BLOCKQUOTE>

produces:

"Oh, for more tags," he lamented.
Replied she, "Remember, dear, that while HTML may be limited in terms of control over page layout, there is a great deal of potential in the creative use of the number of tags."

If had just used one set of <BLOCKQUOTE> ... </BLOCKQUOTE> tags, we would have seen:

"Oh, for more tags," he lamented.
Replied she, "Remember, dear, that while HTML may be limited in terms of control over page layout, there is a great deal of potential in the creative use of the number of tags."

You cannot predict the exact amount of spacing this will provide on the sides of the pages, but it is an easy and effective variation for presenting text.

Coming Next....

Divide a single web page into logical, connected "chunks"...

GO TO.... | Lesson Index | previous: "Address Footers and E-Mail Links" | next: "Lumping v.s. Splitting" |

Writing HTML: Lesson 13: Blockquotes
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

URL: http://www.mcli.dist.maricopa.edu/tut/tut13.html