Lists
Navigation 1
Links are great at connecting websites with each other, but they're also great at connecting webpages to form a website.
Navigation 2
Taking users around a website is called navigation. To create a navigation menu, we'll look into lists.
Lists
Lists are a great way of organizing information and one of the most used elements in HTML. Before adding any links, let's learn the basics.
Ordered lists 1
List tags come in a few different types. Let's start with ordered lists.
<!doctype html> <html> <body> <ol> </ol> </body> </html>
Great! We've just created an ordered list ... without any content.
Ordered lists 2
We've just used <ol> to create a list, but it's still empty. To add a list item, we can use the <li> tag.
<!doctype html> <html> <body> <ol> <li>Harry</li> </ol> </body> </html>
Great work!
Multiple list items
Let's build an ordered list from scratch.
<!doctype html> <html> <body> <ol> <li>Harry</li> <li>Hermione</li> <li>Ron</li> </ol> </body> </html>
Nice work opening and closing those tags!
Ordered lists 3
The letters or numbers before the list items are called markers. Instead of numbers, we can also use letters as markers.
Marker types 1
To set the marker type, we can use the type attribute. For uppercase letters in alphabetical order, the value we need is A.
<!doctype html> <html> <body> <ol type="A"> <li>Harry</li> <li>Hermione</li> <li>Ron</li> </ol> </body> </html>
See that? We've just used uppercase letters to organize our list alphabetically.
Marker types 2
If we want roman numerals as marker types, we need the I marker type.
<!doctype html> <html> <body> <ol type="I"> <li>Harry</li> <li>Hermione</li> <li>Ron</li> </ol> </body> </html>
Awesome! You know your HTML attributes.
Descending
If we want to list something in descending order, we just add the attribute reversed to the <ol> tag and voilà!
<!doctype html> <html> <body> <ol type="I" reversed> <li>Harry</li> <li>Hermione</li> <li>Ron</li> </ol> </body> </html>
There! Pretty handy if we ever need a countdown, no?
Unordered lists 1
Unordered lists might sound a bit chaotic, but they're actually just bullet lists. To create one, we use the <ul> tag.
<!doctype html> <html> <body> <ul> <li>Harry</li> <li>Hermione</li> <li>Ron</li> </ul> </body> </html>
Great job! We can use the <ul> tag when we don't need to list items in a specific order or rank them by importance.
Unordered lists 2
Just like in ordered lists, we'll use the <li> tag to add list items.
<!doctype html> <html> <body> <ul> <li>Harry</li> <li>Hermione</li> <li>Ron</li> </ul> </body> </html>
You're listing these items like a pro!
Combined lists
We can also make combinations of ordered and unordered lists.
Try to create an unordered list that contains an ordered list.
<!doctype html> <html> <body> <ul> <li>My personal list of the best comic book movies: <ol> <li>The Dark Knight</li> <li>Spider-Man 2</li> <li>Avengers: Infinity War</li> </ol> </li> <li>My personal list of the worst comic book movies: <ol reversed> <li>Howard the Duck</li> <li>Superman IV</li> <li>Batman & Robin</li> </ol> </li> </ul> </body> </html>
Unordered, ordered, or reversed, we can combine them all to fit our needs!
Adding a link
Now let's use the <a> tag to add a link to a list item.
<!doctype html> <html> <body> My personal list of the best comic book movies: <ol> <li><a href="http://imdb.com/title/tt0468569">The Dark Knight</a></li> <li>Spider-Man 2</li> <li>The Avengers</li> </ol> </body> </html>
Great! We could add a link to each list item if we wanted to.
Navigation 3
With that, we can already make a basic website navigation in HTML.
<!doctype html>
<html>
<body>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</body>
</html>
Sweet! This is how the most websites allow us to navigate. This will come in handy for sure!
Comments