HTML Blockquote Basics
By Stephen Bucaro
You have probably seen webpages that display a quote from the article, but taken out
of the flow of the article text. This is a page design technique borrowed from
printed magazines, and if done properly it can make your article look more professional.
One important thing a blockquote does is break up the monotony of paragraphs of text
on a webpage, and that's important for viewer eye relief.
A basic blockquote is easy to create, just place the quote text within <blockquote>
</blockquote> tags, as shown below.
<blockquote>A basic blockquote is easy to create</blockquote>
a basic blockquote is easy to create
Note that the blockquote is an html block level element, which means that it
contains an embedded carriage-return line-feed immediately before the opening <blockquote>
tag and immediately after the closing </blockquote> tag. The blockquote is unique
because unlike other block level elements, it places some margin before and after the
blockquote, in other words, the blockquote will be displayed narrower than paragraphs
in the same column.
Although the focus of this article is about html, here's a few style tricks that
are easy to code and that you might find useful. By adding the style attribute to the
<blockquote> tag you can define a border to display around the quote. Note
that if you add a border, you'll also need to specify some padding between the border
and the text.
<blockquote style="border:solid blue 2px; padding:4px;">
The blockquote is an html "block" level element, which means it contains an embedded
carriage return before and after.
</blockquote>
The blockquote is an html "block" level element, which means it contains an embedded
carriage return before and after.
Using the style attribute, you can also define a specific font and text color. Note
that this method of applying style is called inline style because the style rules
are defined in the html element's tag. This is a very easy way to apply style.
<blockquote style="font-family:Courier; font-size:14px; color:green;">
The blockquote is an html "block" level element, which means it contains an embedded
carriage return before and after.
The html blockquote element is easy to use and can be used break up the monotony of
paragraphs of text and give your webpage a more professional look.
More HTML Code:
• HTML DIV Basics
• HTML Linking Basics
•
• HTML5 Spinbox Control
• Checkbox Basics
• HTML5 Slider Control
• HTML Numbered or Ordered List
• HTML noscript Tag
• Using col and colgroup to Apply Attributes to a Table Column
• Webpage DOCTYPE Declarations Explained
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
Follow @Stephen Bucaro
General Web Design
