Blockquote: Then and Now
by Kevin Yank
As The Ultimate HTML Reference author Ian Lloyd puts it, "blockquote has been around a long time, but it hasn’t aged a day." But while the effect of the tag in today’s browsers is virtually unchanged from when it was first introduced in the Web’s earliest browsers, the way we use it has progressed dramatically.
blockquote, of course, is meant to mark a "block quote"—a verbatim reproduction of content originally published or presented elsewhere, presented as a block, apart from the surrounding content. Belying this important purpose, the element’s default visual presentation is quite simple: browsers simply leave left and right margins of about 36 pixels to either side of the element.
Early on in the Web’s history, blockquote was largely ignored. In a time when HTML elements were routinely misused to achieve visual effects, blockquote was seen as the identical twin of dd, since they both have the same visual effect, and because is shorter to type than , that’s what designers used.
Designers who took pride in the quality of their code quickly found HTML validators (like the W3C’s) didn’t appreciate them using dd for this. dd elements belong inside a definition list (dl), after all. A blockquote, on the other hand, can go anywhere a block element is welcome, so gradually it became the element of choice for producing indentend content.
The more indented a designer wanted content to appear, the more blockquote elements he would wrap it in. This led to some pretty monstrous code, particularly when generated by WYSIWYG authoring tools:
by Kevin Yank
As The Ultimate HTML Reference author Ian Lloyd puts it, "blockquote has been around a long time, but it hasn’t aged a day." But while the effect of the tag in today’s browsers is virtually unchanged from when it was first introduced in the Web’s earliest browsers, the way we use it has progressed dramatically.
blockquote, of course, is meant to mark a "block quote"—a verbatim reproduction of content originally published or presented elsewhere, presented as a block, apart from the surrounding content. Belying this important purpose, the element’s default visual presentation is quite simple: browsers simply leave left and right margins of about 36 pixels to either side of the element.
Early on in the Web’s history, blockquote was largely ignored. In a time when HTML elements were routinely misused to achieve visual effects, blockquote was seen as the identical twin of dd, since they both have the same visual effect, and because is shorter to type than , that’s what designers used.
Designers who took pride in the quality of their code quickly found HTML validators (like the W3C’s) didn’t appreciate them using dd for this. dd elements belong inside a definition list (dl), after all. A blockquote, on the other hand, can go anywhere a block element is welcome, so gradually it became the element of choice for producing indentend content.
The more indented a designer wanted content to appear, the more blockquote elements he would wrap it in. This led to some pretty monstrous code, particularly when generated by WYSIWYG authoring tools:
A block with breathing room!Of course, today most web designers understand the value of semantically meaningful code. This, and the fact that CSS can be used easily to apply the exact same formatting that blockquote elements get by default, has seen correct use of blockquote rise to dominate in recent years.
Meanwhile, the semantics provided by blockquote are more relevant than ever. Blogs continually quote other blogs and sites, and the blockquote element is perfectly suited to marking up such quotations.
Read on to discover some of the blockquote element’s hidden subtleties, and how it could be used to reveal a web within the Web: a web of attribution.
Meanwhile, the semantics provided by blockquote are more relevant than ever. Blogs continually quote other blogs and sites, and the blockquote element is perfectly suited to marking up such quotations.
Read on to discover some of the blockquote element’s hidden subtleties, and how it could be used to reveal a web within the Web: a web of attribution.
