Quotes, Citation and CSS

Everybody likes a good quote, whether it be a monologue from Hamlet or a particularly pithy piece of your own work.

From a design point of view, quotes are a handy for breaking up your web content and highlighting useful parts of our document. They are essential for any webpage that is using material quoted from elsewhere, such as a weblog. Fortunately (X)HTML provides a number of tags to help mark-up our quoted content correctly.

In this tutorial we're going to look at quotes, and how you can use the correct markup for them in (X)HTML, and how you can style this markup with CSS so that it's semantically valid AND nice to look at.

$2.89
- OR -

Overview

The Technical Bit

Back in the old millennium, the <blockquote> tag was heavily misused to indent text. These holdovers from the bad old days still exist in our favourite web development environment; if you hit the indent buttom in Dreamweaver MX 2004's Insert Panel, you'll notice that it uses blockquotes to indent:

<blockquote>
<blockquote>
    <blockquote>
      <p>My wrongly indented text </p>
    </blockquote>
</blockquote>
</blockquote>

Matt Machell

Matt MachellA man of many talents, Matt has been a web designer, technical editor, and jewellery picker. He is currently on contract for the Birmingham City University, producing pages for research centres.

He has tech-edited a dozen books on web design and development for glasshaus, Apress and Sitepoint.

He likes music with loud guitars and games with obscure rules.

His website can be found at: http://www.eclecticdreams.com

He lives in Birmingham with his girlfriend, Frances, and a horde of spider plants.

See All Postings From Matt Machell >>

Reviews

Be the first to write a review

You must me logged in to write a review.