Learning Resources

blockquote Tag for Quoting

The HTML blockquote is perfect for making a passage of text stand out from the normal body of text.

It has to be used with some caution though, as it can overlap CSS positioned content due to incorrect browser rendering. For example, the icon box showing which browser's support the blockquote tag is a division floated to the right side. Before adding this extra paragraph to move the blockquote down the page, the following blockquote overlapped the icon box.


Without any CSS formatting the blockquoted text will render a little something like this . . . in your browser. Other browsers may render it slightly differently. As you can see, it basically has a margin all the way around it.

Using CSS to style the blockquote you can add a border, add a background color or image, surround your blockquote with images of quotation marks, change the font size, font color and more. Here's how a blockquote is coded:

your blockquote text here