NHS Designs
Web Design

HTML 11: Linebreaks and lists

Line Breaks

line breaks

What if you had an element whose only job was to give you a line break when you need one?

Wouldn't the be nice? You'd actually be able to make the browser pay attention and insert some carriage returns for a change.

Turns out there is an element, the <br> element, just for that purpose. Here's how you use it:

<h2>July 14, 2005</h2>

   I saw some Burma Shave style signs on the side
   of the road today:


      Passing cars, <br>
      When you can't see, <br>
      May get you, <br>
      A glipse, <br>
      Of eternity. <br>


   I definitely won't be passing any cars.


Exercise 1

  1. Go ahead and add the <br> elements to Tony's index.html file.
  2. Save the file.
  3. Give it a test drive.


br doesn't have any content

Exactly, it doesn't have any content.

The <br> element is an element that doesn't have any content. Why? Because it's just meant to be a line break, nothing else. So, when an element doesn't have any real content by design, we just use short hand to represent the element and it ends up looking <br>.

After all, if we didn't have this shorthand, you'd be writing <br> </br> every time you needed a line break, and how much sense does that make?

<br> isn't the only element like this. there are others, and we have a name for them: empty elements. In fact, we've already seen another empty element, the <img> element. We'll be coming back to look at the <img> element in detail in a couple of weeks.

Keep in mind, the reason for the shorthand isn't laziness so much as it is efficiency. It's more efficient to represent empty elements this way (efficient in typing, in the number of characters that end up on the page, and so on.) In fact, after reading HTML for a while, you'll find that it is easier on your eyes too.

br element


Why Is <br> Called an "Empty" Element?

Because it has no content, as in element = opening tag + content + closing tag. So, it's empty because there's no content.

Think about an element like <h1> (or <p> or <a>.) The whole point of the element is to tag some content, like"

<h1>Don't wait, order now</h1>

With the <br> element, the point is just to insert a line break into your HTML. There is no content you are trying to mark up, so it's empty. Since it's empty, we don't need all the extra brackets and markup, so we just shorten it into a more convenient form.

Remember: Elements that don't have any HTML content by design are called empty elements. When you need to use an empty element, like <br> or <img>, you only use an opening tag.


Meanwhile, Back at Tony's Site...

You've come a long way already: you've designed and created Tony's site, you've met a few new elements, and you've learned a few thinsg about elements that most people creating pages on the Web don't even know (like block and inline elements, which are really going to come in handy in later lessons.)

But you're not done yet. We can take Tony's site from good to great by looking for a few more opportunities to add some markup.

Like what? How about lists? Check this out:

interesting places

Wouldn't it be great if we could mark up this text so the browser knows this text is a list? Then the browser could display the list items in a more useful way. Something like this:

ordered list


Why Not Use <p> for Lists?

It wouldn't be hard to make a list using the <p> element. It would end up looking something like this:

1. Red Segway
2. Blue Segway

But there are lots of reasons not to.

You should be sensing a common theme by now. You always want to choose the HTML element that is closest in meaning to the structure of your content. If this is a list, let's use a list element. Doing so gives the browser and you (as you'll see later on) the most power and flexibility to display the content in a useful manner.

  • HTML has an element for lists. If you use that, then the browser knows the text is a list, and can display it in the best way possible.
  • The paragraph element is really meant for paragraphs of text, not lists.
  • It probably wouldn't look much like a list, just a bunch of numbered paragraphs.
  • If you wanted to change the order of the list, or insert a new item, you'd have to renumber them all. That would suck.


Constructing HTML Lists in Two Easy Steps

Creating an HTML list requires two elements that, when used together, form the list. The first element is used to mark up each list item. The second determines what kind of list you're creating: ordered or unordered.

Step One: Put each list item in an <li> element.

To create a list, you put each list item in its own <li> element, which means enclosing the content in an opening <li> tag and a closing <li> tag. As with any other HTML element, the content between the tags can be as short or as long as you like and broken over multiple lines.

Here's a fragment of Tony's journal. Locate this HTML in your "index.html" file for Tony's journal.

<h2>August 20, 2005</h2>

Well I made it 1200 miles already, and I passed through some interesting places on the way:

<li>Walla Walla, WA</li>
<li>Magic City, ID</li>
<li>Bountiful, UT</li>
<li>Last Chance, CO</li>
<li>Why, AZ</li>
<li>Truth or Consequences, NM</li>

<h2>July 14, 2005</h2>

<p>I saw some Burma Shave style signs on the side of the road today:</p>

Step Two: Enclose your list items with either the <ol> or <ul> element.

If you use an <ol> element to enclose your list items, then the items will be displayed as an ordered list (with numbers in front of them.)

If you use <ul>, the list will be displayed as an unordered list (with bullet points in front of them.)

Here's how you enclose your items in an <ol> element:

<h2>August 20, 2005</h2>

Well I made it 1200 miles already, and I passed through some interesting places on the way:

<li>Walla Walla, WA</li>
<li>Magic City, ID</li>
<li>Bountiful, UT</li>
<li>Last Chance, CO</li>
<li>Why, AZ</li>
<li>Truth or Consequences, NM</li>

<h2>July 14, 2005</h2>

<p>I saw some Burma Shave style signs on the side of the road today:</p>


Exercise 2

In your index.html file for Tony's journal, look for the list of cities for August 20. Make these edits:

  1. Put each city/state onto its own line within the code.
  2. Put a <li> tag before, and a </li> tag after, each city/state.
  3. Put an <ol> tag before all of the cities listed, and a </ol> tag after all of the cities. Be sure to put these <ol> tags outside of the <li> tags.
  4. Save the file and test the page in a browser.



Here's another list from Tony's journal: cell phone, iPod, digital camera, and a protein bar. You'll find it in his June 2nd entry. This is an unordered list of items. That means they can be displayed in any order because there is no sequence of events or steps.

The HTML for this entry is typed below.

  1. First, go ahead and change the code format for June 2nd in your index.html file to look like this:

<h2>June 2, 2005</h2>
<img src="images/segway1.jpg">
<p>My first day of the trip! I can't believe I finally got everything packed and ready to go. Because I'm on a Segway, I wasn't able to bring a whole lot with me:

digital camera
and a protein bar

Just the essentials. As Lao Tzu would have said, <q>A journey of a thousand miles begins with one Segway.</q></p>

  1. Now add the HTML to change the items into an HTML unordered list (remember, you use <ul> for unordered lists.)
  2. Save your file and test the page in a browser.
  3. Turn in your journal folder with the updated index.html.


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

resources · copyright information · Website designed by
Order a Custom, Watercolor Pet Portrait at PetsByDawn.com