NHS Designs
Web Design

HTML 10: Inline and block elements

Adding Some New Elements

You have the basic elements of HTML down. You've gone from a hand-written journal to an online version in just a few steps using the basic HTML elements <h1>, <h2>, <p>, and <img>.

Now we're going to s-t-r-e-t-c-h your brain a little and add a few more common elements. Let's take a look at Tony's journal and see where we can spruce things up a bit.

Check this out: Tony has a little quote stuck at the end of his first post. It's his remixed version of a Lao Tzu quote: A journey of a thousand miles begins with one Segway.

quote element

HTML has an element, <q>, for just that kind of thing. Let's take a look.


Meet the <q> Element

Got a short quote in your HTML? The <q> element is just what you need. Here's a little test to show you how it works:

      <title>Quote Test drive</title>
         You never know when you'll need a good quote.          How about <q>To be or not to be</q> or          <q>Wherever you go, there you are</q>.

Test drive this code.

  1. Start a new file in Notepad and call it "quote.html".
  2. Copy and paste the code you see above.
  3. Save the file.
  4. Test quote.html in two or three different kinds of browsers.

What has the browser done with the quotes?

Warning: some older browsers, including Internet Explorer 6, do not display double quotes around the content in the <q> element. This is unfortunate, because if you add your own double quotes, some browsers will display TWO sets of quotes. The only way to solve this problem is to use CSS to add some visual style to your quotes, such as italics. I'll show you to add italics with CSS in a few weeks.

making things more complicated

No. We're trying to make things more structured and meaningful.

There are lots of reasons people use double quotes in text, but when we use <q> that means something specific - it means the text of an actual quote (in Tony's case, a "remixed" quote).

See! Using double quotes doesn't make something an actual quote.

In other words what we've done is to add some additional meaning by marking up the quote. Before we added the <q> element, the browser just knew it has a paragraph of text with a few double quote characters in it. Now, because we are using the <q> element, the browser knows that some of the text is a real quote.

So what? Well, now that the browser knows this is a quote it can display it in the best way possible. Some browsers will display the double quotes around the text, some won't, and in instances where browsers are using non-English languages, other methodsexternal link might be used. And don't forget mobile devices, like cell phones, or audio HTML browsers for the visually impaired. It's also useful in other situations, such as a search engine that scours the Web looking for Web pages for quotes. Structure and meaning in your pages are Good Things.

One of the best reasons (as you'll see when we get back to presentation and CSS later on) is that you'll be able to style quotes to look just the way you want. Suppose you want quoted text to be displayed in italics and colored gray? If you've added the <q> element to structure the quoted content in your Web pages, you'll be able to do just that.


Exercise 1

  1. Open up index.html for Tony's Journal.
  2. Find his Lao Tzu quote and surround it with the <q> element.
  3. Give the page a test drive.


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.

long quote

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.

tool lady


Exercise 2

Let's get a <blockquote> into Tony's online journal.

  1. Open index.html in Notepad and locate the July 14th entry. Rework the paragraph to look like this:

<h2>July 14, 2005</h2>

   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.

  1. 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.

block element

inline element


Remember: block elements stand on their own; inline elements go with the flow.



  1. Turn in your journal folder
  2. On a sheet of paper, answer the following questions:
    1. Name two reasons why we should use a <q> element for a real quote rather than simply use the " " characters on our keyboards.
    2. List two of the browsers you tested the <q> element in. For each browser, how was the text inside the <q> element displayed?
    3. How is text inside a <blockquote> element displayed?
    4. What are two differences between the <q> and <blockquote> elements?
    5. What does "block element" mean? Give an example of one.
    6. What does "inline element" mean? Give an example of one.


Source: "Head First HTML with CSS & XHTML" by Elisabeth Freeman and Eric Freeman

resources · copyright information · Natomas High School Design Department