Applying the blockquote Element

Applying the <blockquote> Element

The <blockquote> element is often used to indent text. However, it should not be used for this purpose. It should only be used to mark up long quotations that consist of block level content.

For this lesson, you will need a quotation and a source or author for the quotation. These two items will be marked up as paragraphs and then placed inside a <blockquote>. The paragraph that contains the source information will be given a source class. A class is used in this case because you might want to have more than one <blockquote> on a page.

Additional information about the source, such as a web address, can be added to the <blockquote> using the cite attribute as shown in Listing 13.1.

Listing 13.1. HTML Code Containing the Markup for a Quotation

<blockquote cite="http://www.sitename.com/quote/smith.htm">     <p>         Lorem ipsum dolor...     </p>     <p >         John Smith     </p> </blockquote> 

Semantically Correct Markup and Block Quotes

Semantically correct markup is about understanding HTML elements and what they mean. It is also about using these elements to give meaning to the content they contain.

If you use semantically correct markup, your content will have meaning in a wide range of devices, including text browsers, screen readers, and hand-held devices.

If you use poor semantic markup, however, your content will either have no meaning or incorrect meaning in a wide range of devices.

An example of poor semantic markup is using a <blockquote> to indent text. The <blockquote> will change the content presentation rather than add meaning. Even worse, the indented content is given incorrect meaning.

It would be far better to indent content using CSS and save the <blockquote> for its intended purposelong quotations.

To style the <blockquote> and its content, you will use three selectors:

• The first is a type selector, used to target any instance of the <blockquote> on the page.

• The second is a descendant selector, used to target any <p> element inside a <blockquote>.

• The third is another descendant selector, used to target any <p> element that has been styled with the source class.

The selectors are shown in Listing 13.2.

Listing 13.2. CSS Code Showing the Selectors for Styling the <blockquote>

blockquote {...} blockquote p {...} blockquote p.source {...}