HTML - Lists (A Beginner's Guide)

[RandomlyKnighted]

We use lists everyday in everything from reading recipes in a cookbook to typing them into the computer when we're coding. Today, I'm going to show you tell you about the 3 basic lists in HTML.

In HTML, you have 3 basic types of lists. You have an ordered list, an unordered list, and a definition list. An ordered list is basically a numbered list. Do you remember when you were little and your teacher told you to number your paper from one to ten? Well everytime you did that you were making an ordered list. In HTML, when we make an ordered list we open it with the <ol> tag and close it with the </ol> tag. The numbers and line breaks will automatically show up where you put the <li> tag.

Here's an example:


<ol>
<li>We love Programming for N00bs!</li>
<li>At Programming for N00bs, we have tutorials for most modern programming languages</li>
<li>Go Programming for N00bs!</li>
<ol>


The next type of list is an unordered list. We all remember those high school days where we had to give that 5 page research paper and we had to give reasons for why we chose that particular side of the situation. Usually when we typed those reasons we did it in a bulleted list. Well guess what, you were making an unordered list! An unordered list begins with the <ul> tag and closes with the </ul> tag. Each item in the list still uses the <li> and </li> tags.

Here's an example:


<ul>
<li>We love Programming for N00bs!</li>
<li>At Programming for N00bs, we have tutorials for most modern programming languages</li>
<li>Go Programming for N00bs!</li>
</ul>


One of the great things about the unordered list is you can even make it so that there are no bullets. When coding, there will be some situations where you might need this so why not learn it now. Look at the code below and you'll see where and how to do it.


<ul style="list-style: none; ">
<li>We love Programming for N00bs!</li>
<li>At Programming for N00bs, we have tutorials for most modern programming languages</li>
<li>Go Programming for N00bs!</li>
</ul>



That's all you have to do to make an unordered list without bullets.

Finally, we have the definition list. The example I want to give for the definition list is simply a dictionary. Grab a dictionary and usually they will be set up using this same kind of list. For a definition list, you open it with the <dl> tag and end it with the </dl> tag. Then in front of the word to be defined you will use the <dt> tag and then in front of the definition you will use the <dd> tag.

Here's my example for the definition list:


<dl>
<dt>Simple</dt>
<dd>Easy to understand</dd>
<dd>plain</dd>
<dd>not complicated</dd>
</dl>


I hope that my tutorial has helped someone understand lists a little bit better.

EDIT: This tutorial was updated to change the name of the forum in the examples to Programming for N00bs.

[CodeNinja]

A few screen shots with the result of this code would be a nice addition. Nice tutorial though.

[RandomlyKnighted]

I didn't think it was necessary because when the user saves the file they can just double click on their html file and it will pull it up where you can see it.

For those new web developers who don't know a whole lot here's a good tip. If you develop using Notepad++ open the file while you're working on it and every time you want to see a change just save your file and go back to your browser (without closing Notepad++) and refresh the page. You should now see your changes and you never have to close Notepad++ or your browser. Now every time you want to see a change just follow those same steps and you can see how it looks as you work.

Thanks for the compliment.