1. Computing

Write in HTML: Blockquotes, Lists, and Linebreaks

Break Information Into Easier Chunks

By

Once you understand basic HTML ideas and some basic HTML tags, you can write paragraphs of prose in HTML. But not everything belongs in a paragraph. Here are some HTML tags that break information into easier chunks.

Lists

On the Internet, everyone loves lists. They're short, they're attractive, and they make it easy to separate the ideas.

No, really.

  • they're short
  • they're attractive
  • they make it easy to separate the ideas

See?

Ordered and Unordered Lists

There are two kinds of lists.

  • ordered
  • unordered

(Okay, maybe you need at least three items to make a list.)

Ordered lists are numbered, like on a test:

  1. What is the capital of America?
  2. What is the capital of "a"?
  3. Is a visit to the capital a capital idea?

You don't see numbered lists much. Usually, you see unordered lists, or what the rest of humanity calls a "bulleted" list:

  • Lions
  • Tigers
  • Bears
  • Don't say it.

The HTML tags for these two kinds of lists are similar. For either list, you wrap each list item with <li> and </li>.

<li>Lions</li>
<li>Tigers</li>
<li>Bears</li>
<li>Don't say it.</li>

But now it gets interesting. If you want an unordered (bulleted) list, you wrap the whole thing in <ul> and </ul>.

<ul>
<li>Lions</li>
<li>Tigers</li>
<li>Bears</li>
<li>Don't say it.</li>
</ul>

Tags within tags! Oh my!

If you want the same list to be ordered (numbered), you change the outer tags to <ol> and </ol>.

<ol>
<li>Lions</li>
<li>Tigers</li>
<li>Bears</li>
<li>Don't say it.</li>
</ol>

That gives us:

  1. Lions
  2. Tigers
  3. Bears
  4. Don't say it.

Notice how you didn't have to touch the list items. When you wrap them in <ol> and </ol>, they get numbered automatically.

This also means that you can rearrange them, and they'll renumber automatically, too.

Lists are extremely useful. You can even put entire paragraphs between <li> and </li>.

Block Quotations

A <blockquote> tag pulls one or more paragraphs into a separate "box". They're an easy way to set off some text.

<blockquote>
    <p>Even a boring quote looks a little better in a blockquote.</p>
    <p>Multiple paragraphs are okay, too.</p>
</blockquote>

That gives us:

Even a boring quote looks a little better in a blockquote.

Multiple paragraphs are okay, too.

If you've been reading my other articles on basic HTML, now you know how I've been setting off the examples. I wrap them in <blockquote> and </blockquote>.

White Space Helps Your Readers

White space helps your readers. Part of why lists and block quotations are so useful is the white space they add around important points.

Even ordinary paragraphs get white space above and below them. This is different from print, where paragraphs are indented.

Line Breaks

Usually, this extra white space between paragraphs is great. But what if you only want a line break, without the space? Like in an address?

On those rare occasions, you use the line break tag: <br />

Jane Crofut<br />
The Crofut Farm<br />
Grover's Corners, NH<br />

This becomes:

Jane Crofut
The Crofut Farm
Grover's Corners, NH

This tag is unusual because it has no closing tag. It's just a line break — <br \> — that's it.

It can be written as <br>, but since it is a single tag, the correct format is <br />. That ending slash reminds you that it's closing itself.

Unwanted Line Breaks

As you may know from my article on HTML paragraphs, your CMS may insert paragraph tags automatically when you leave a blank line between paragraphs. This saves you the trouble of adding all those <p> and </p> tags.

But, your CMS may also insert <br /> tags at the end of every line. This can be a problem. Something like this:

 Here is a paragraph where I
 happened to hit ENTER pretty often
 and make short lines because I was
 writing in a small window.

can turn into this:

Here is a paragraph where I
happened to hit ENTER pretty often
and make short lines because I was
writing in a small window.

As you can see, that looks pretty weird.

The solution is to either:

  • see if you can disable line breaks while keeping paragraph breaks

  • or just be careful to keep each paragraph on a single line in your text editor

Lists, block quotations, and line breaks help you make certain kinds of information more readable.

Eventually, you'll want to include a whole other kind of info: images.

©2014 About.com. All rights reserved.