HTML 11: Linebreaks and lists
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:
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:
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:
<p>
1. Red Segway
</p>
<p>
2. Blue Segway
</p>
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>
<p>
Well I made it 1200 miles already, and I passed through some interesting places on the way:
</p>
<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>
<p>
Well I made it 1200 miles already, and I passed through some interesting places on the way:
</p>
<ol>
<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>
</ol>
<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:
- Put each city/state onto it's own line within the code.
- Put a <li> tag before, and a </li> tag after, each city/state.
- 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.
- Save the file and test the page in a browser.
Source: "Head First HTML: with CSS & XHTML" by Elisabeth Freeman and Eric Freeman
