Blockquotes 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.
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>
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.
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?!
- How to do a strikethrough with CSS (Saturday, June 13th 2009)
- Using the <label> tag for HTML forms (Saturday, April 25th 2009)
- Using CSS letter-spacing to space out titles (Saturday, April 18th 2009)
- Multiple CSS classes for a single element (Saturday, March 21st 2009)
- How to make a font italic with CSS (Saturday, February 21st 2009)