Writing HTML | About | FAQ | Alumni | References | Tags | Lessons | back | next |

13. You Can Blockquote Me on That!

"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

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

Lesson

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>

---

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

---

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.

1. Open the HTML file, index.html in your text editor.
2. 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!

3. Save and Reload the HTML file.

Check Your Work

Review

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

Independent Practice

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

Coming Next....

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

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