Like the names imply, the only difference between an ordered list and an unordered list, is that an ordered list will have it's items ordered by number, whereas unordered lists will have just bullets.
Making your own unordered list is straightforward. You just wrap an unordered list tag, or
ul tag, around your list items, which use
<!DOCTYPE html> <html> <head> <title>Unordered List</title> </head> <body> <h1>Things that are cool:</h1> <ul> <li>Memes</li> <li>Food</li> <li>Coding</li> </ul> </body> </html>
To turn our unordered list into an ordered one requires just changing the wrapper tag from ul (for unordered list) to an
ol tag (ordered list).
That's literally all we need to do:
<!DOCTYPE html> <html> <head> <title>Ordered List</title> </head> <body> <h1>How to become a great developer:</h1> <ol> <li>Read all the content on Sabe</li> <li>Practice, practice, practice.</li> <li>Stay curious. Ask questions. Never stop learning.</li> </ol> </body> </html>
Description lists are much less used, but I am including them anyways for completeness. What are description lists and why do they exist?
Description lists are used whenever you have a word or some text, and you want to describe or define that text using multiple items, thus forming a list.
The outer-most tag is the description list tag, or
dl. Following that is the term you want to describe, the
dt tag. The descriptions are placed then inside
Let's see an example:
<!DOCTYPE html> <html> <head> <title>Description List</title> </head> <body> <h1>Here is a description list!</h1> <dl> <dt>Computer</dt> <dd>An electronic device for storing and processing data, typically in binary form, according to instructions given to it in a variable program.</dd> </dl> </body> </html>
In our next lesson, we'll learn how to work with and add links to our pages!