HTML 10: Inline and block elements
Looooong Quotes
Now you know how to do short quotes, let's tackle long ones. Tony's given us a long quote with the Burma Shave jingle.
In his journal Tony put the Burma Shave quote right inside his paragraph, but wouldn't it be better if we pulled this quote into a "block" of its own, like this?
I saw some Burma Shave style signs on the side of the road today:
Passing cars,
When you can't see,
May get you,
A glipse,
Of eternity.I definitely won't be passing any cars.
That's where the <blockquote> element comes in. Unlike the <q> element, which is meant for short quotes that are part of an existing paragraph, the <blockquote> element is menat for longer quotes that need to be displayed on their own.
Exercise 2
Let's get a <blockquote> into Tony's online journal.
- Open index.html in Notepad and locate the July 14th entry. Rework the paragraph to look like this:
<h2>July 14, 2005</h2>
<p>
I saw some Burma Shave style signs on the side
of the road today:
</p>
<blockquote>
<p>
Passing cars,
When you can't see,
May get you,
A glipse,
Of eternity.
</p>
</blockquote>
<p>
I definitely won't be passing any cars.
</p>
- Time for another test drive. Open index.html in a browser and take a look at the results of your work.
<blockquote> creates a separate block (like <p> does), plus it indents the text a bit to make it look more like a quote. Just what we wanted...
But our quote isn't looking quite like we wanted because all the lines are running together. We really wanted them on different lines. We'll come back to that in the next lesson.
The Truth Behind the <q> and <blockquote > Elements
Okay, it's time to 'fess up. <blockquote> and <q> are actually different kinds of elements. The <blockquote> element is a block element and the <q> element is an inline element.
What's the difference?
Block elements are always displayed as if the have a line break before and after them.
Inline elements appear "in line" within the flow of the text of your page.
Remember: block elements stand on their own; inline elements go with the flow.
Source: "Head First HTML: with CSS & XHTML" by Elisabeth Freeman and Eric Freeman
