Blockquotes and XHTML StrictBlockquotes and XHTML Strict

Posted April 11th, 2009 in HTML and CSS

Jeffrey Way posted an interesting tutorial about CSS Shapes at Nettuts and wrote an observation about the <blockquote> tag at the end of the post: "Did you know that, if you want your document to validate, you can't place text directly into a blockquote? It needs to be nested within a parent element." So I decided to check it out with this post of my own using the W3C validator to check the results of my tests.

What's a blockquote?

A blockquote is text placed between an opening <blockquote> and closing </blockquote> tag and is intended to show a block of text, usually some sort of quotation, indented in the web browser.

Here's an example, using your web browser's default formatting:

This text is in a blockquote.

Validation

To test out what Jeffrey had posted I created a blank HTML document in Dreamweaver and added a blockquote with some text and no other styling tags. The content of the <body> looked like this:

<blockquote>
  This is a blockquote.
</blockquote>

By default, DW made the DOCTYPE this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

I tested it using the W3C validation service and it validated. I tried changing it to HTML 4.01 Strict and it still validated. I changed the DOCTYPE to XHTML transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

and it still validated. It wasn't until I tried using the XHTML 1.0 Strict and XHTML 1.1 DOCTYPES that it failed validation with the following error messages:

Line 12, Column 1: character data is not allowed here
This is a blockquote.

Line 13, Column 13: end tag for "blockquote" which is not finished
</blockquote>

Solution

So it's only a problem if the document is using an XHTML 1.0 Strict or XHTML 1.1 doctype. And then all you need to do to make it validate is to then put your content in a container such as <div> or <p> and then anything goes.

So this would validate:

<blockquote><div>
This is a blockquote.
</div></blockquote>

Jeffrey noted that the span was not liked by the validator, but as long as the span is inside another container, such as the <div> in the above example, it will validate just fine.

Conclusion

Maybe you don't care about validation and maybe you do. Either way, it seems a little odd to me that you must have a container tag for your content inside the blockquote, which surely is already a container?!

Related posts:

Comments

blog comments powered by Disqus