Web Design Tutorials
- Make A Simple Page
- Make A Simple List
- Make A Link
- Make An Email Link
- Embed An Image
- Embed A Flash Movie
- Make A Table
- Hide Content
- Error Check Your Page
In This Tutorial, I Show You How To Make A List For Your Web Page
Maybe you've heard that people don't read web pages, they scan them. Because of this, lists are very practical . You see them all over the web. Sometimes you may not even realize that the text you are looking at is a list.
With XHTML (or HTML), there are three kinds of lists. I'm tackling unordered and ordered lists here because they're so similar. (The third kind is a definition list used mostly for glossaries).
An unordered list is a list where the order of the items is not relevant. Like this:
- New York
- Albany
- Buffalo
Let's Break This Down
The XHTML for this list uses two tags, ul and li. The ul stands for "unordered" and the li means "list item." It could not be more straightforward.
To start the list , I use the <ul> tag and, as you'll see, the entire list ends with
</ul>. I use <li> and </li> to enclose each list item (such as New York).
Like this:
Code View
<ul>New York
<li></li>Albany
<li></li>Buffalo
<li></li>
</ul>
Here's how that simple, unordered list looks in your browser:
Browser View
- New York
- Albany
- Buffalo
Go Ahead, Try It Yourself
Copy and paste the above list code in the box below or feel free to write your own code. Then click the "GIVE IT A TRY" box and check it out.
Test Your Code In This Box - The Code Tester
Want To Learn More?
You're at the right place because I will teach you this and much more, one-on-one, in my online web design Workshop, Introduction To XHTML And CSS. Now here's the good news. You can start right now!!
What About Making An Ordered List
Oh yeah. I almost forgot.
Suppose I wanted to list the first five U.S. Presidents. Here's the XHTML for an ordered list.
Code View
<ol>George Washington
<li></li>John Adams
<li></li>Thomas Jefferson
<li></li>James Madison
<li></li>James Monroe
<li></li>
</ol>
Looks the same as an unordered list, but this time I used <ol> - ordered list - instead of <ul> as I did in the previous example.
Browser View
- George Washington
- John Adams
- Thomas Jefferson
- James Madison
- James Monroe
In this example, it's the <ol> tag which creates the numbers 1 - 5. It saves me from having to type in the numbers, plus it's the right way to do a list whose items have an order that is relevant.