Use only block-level elements in blockquotes
Something I see quite a bit of around the Web is the blockquote element being slightly abused. No, I’m not talking about using it just to indent text (which I actually don’t see a lot of, despite some people claiming that to be a widespread issue), but about when
blockquote elements have inline content such as text.
What, no text? That’s right, the
blockquote element is not allowed to have text or inline elements as direct descendants. Only block-level (and in HTML 4.01 Strict,
script) elements are allowed unless you use a Transitional Doctype, in which case both block-level and inline elements are allowed. But there are plenty of sites that use a Strict Doctype and still have
blockquote elements that contain inline elements.
So to make sure your blockquotes are valid regardless of the Doctype being Strict or Transitional, always use block-level content inside
<p>This is a quoted paragraph of text, wrapped inside a <code>p</code> element, which is valid in both Strict and Transitional Doctypes.</p>
Since I use a strict Doctype on this site (HTML 4.01 Strict), I sometimes get invalid code when visitors use
blockquote elements in comments. Most people get it right since they use Markdown syntax, which automatically creates correct blockquotes. However, some enter the text they want to quote directly inside
blockquote elements, like this:
This is a quoted paragraph of text, directly inside a <code>blockquote</code> element, which makes this quote valid only in Transitional Doctypes.
And unfortunately that slips past Markdown and leads to the page becoming invalid. Actually I am a little surprised to see some people use the
blockquote element this way. Are you still using transitional Doctypes or has it been a while since you used the HTML validator? ;-)
So, to help ensure validity, please use block-level elements inside blockquotes whenever you post a comment on a blog or a forum that allows HTML.
- Previous post: O’Reilly sites implement ReadSpeaker voice technology
- Next post: WCAG 2.0 Working Draft updated
Subscribe / follow
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost