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.
On the Internet, everyone loves lists. They're short, they're attractive, and they make it easy to separate the ideas.
- they're short
- they're attractive
- they make it easy to separate the ideas
Ordered and Unordered Lists
There are two kinds of lists.
(Okay, maybe you need at least three items to make a list.)
Ordered lists are numbered, like on a test:
- What is the capital of America?
- What is the capital of "a"?
- 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:
- 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>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> <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> <li>Lions</li> <li>Tigers</li> <li>Bears</li> <li>Don't say it.</li> </ol>
That gives us:
- Don't say it.
Notice how you didn't have to touch the list items. When you wrap them
</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
<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
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.
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:
Jane Crofut<br /> The Crofut Farm<br /> Grover's Corners, NH<br />
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
<br />. That ending slash reminds you that it's closing
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
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.