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 Dream-In-Code!</li> <li>At Dream-In-Code, we have tutorials for most modern programming languages</li> <li>Go Dream-In-Code!</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 Dream-In-Code!</li> <li>At Dream-In-Code, we have tutorials for most modern programming languages</li> <li>Go Dream-In-Code!</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 Dream-In-Code!</li> <li>At Dream-In-Code, we have tutorials for most modern programming languages</li> <li>Go Dream-In-Code!</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.