Lists and Indenting

Lists

Lists are another basic feature of HTML. Actually, there are two different kinds of lists:

• Bulleted lists, also known as "unordered lists" because they are grouped by <ul> tags. For example, this is an unordered list.
• Numbered lists, also known as "ordered lists" because they are grouped by <ol> tags.

Both kinds of lists are structured the same way:

1. First, you need to write one pair of tags at the start and end of the entire list that determines which kind of list it is. (Tip: I usually write the start and end tags at the same time to make sure I don't forget to write the end tag, and then move the cursor between them to add text in the middle.)
2. Second, you need to write <li> tags at the start and end of each individual item inside the list, similarly to how you would write bold and italics tags inside of paragraph tags. These tags stand for "list item", and they're written the same way regardless of which kind of list you're writing, but they look different when displayed on the page.

...As you practice writing these tags, you may start to feel frustrated by how tedious they can be. I love HTML, but I'll admit that it's not the easiest tool to use. If you just want to write paragraphs and lists, you probably would be better off using Microsoft Word, Open Office, or Google Docs. However, if you keep reading, you'll soon find that HTML can do so much more than paragraphs and lists. After all, Google Docs itself is made with HTML, and so is MetaPage, Facebook, Wikipedia, and all your other favorite web sites. I know this page looks pretty boring, but I promise the good stuff is coming. If you don't believe me, glance at the other chapters in this tutorial! Hang in there! 😎

Indenting

The source text in the editor is getting harder to follow because you need to pay attention to how tags match each other even when they are in between other pairs of tags. However, we can use space to help organize the tags and make them easier to understand.

List Items should start and end with li tags, but they are more complicated than the other tags in a few ways:

• List items also need to be surrounded by yet another pair of tags, grouping the whole list together.
• There are two different kinds of lists, depending on what kind of tag the list items are surrounded by:
  1. Numbered lists, also known as "ordered lists", need to have a pair of ol tags surrounding all of the li tags in the list. Each item gets numbered automatically, and the ol tags determine where the numbering starts and ends.
  2. Bulleted lists, aka "unordered lists", are the same except with ul tags around the items.
• As you can see, lists can be "nested", meaning lists can be inside of other lists if you arrange the tags properly. The closing tags are generally arranged backwards in the script, closing the innermost parts first and the outermost parts last.

I'll admit, the script on the left is getting harder to read with all those HTML tags mixed in with English text. If you've used Microsoft Word, Google Docs, Open Office, or other document editors, this way of making lists may seem annoying. However, if you keep following this tutorial, you'll find that HTML is way more useful and exciting than most other tools. After all, the Google Docs editor itself is made with HTML, and so is MetaPage, Facebook, Wikipedia, and all your other favorite web sites. I know this page looks pretty boring, but I promise the good stuff is coming. If you don't believe me, glance at the other chapters in this tutorial! Hang in there! 😎

To make the script easier to read, I recommend spreading it out a bit. Remember how extra spaces in the script get removed on the page? We can take advantage of that to organize the script without changing how the page looks.

When tags start to get complicated, try putting opening and closing tags on their own lines. It also helps to add spaces at the beginning of lines to indent the stuff between the tags to visually show how it's organized. For example, this paragraph in the script clearly starts and ends with those left-aligned p tags.

Similarly, the unordered list starts at the lone ul tag near the top of this script, continuing until the matching /ul tag directly underneath it, and everything contained inside the list is indented to the right. The ordered list is indented even more because it's inside of a list item, which is inside the unordered list. Of course, these lists are also automatically indented in the page, but organizing the script is up to you.

For practice, try editing this script to make a list of your top 3 favorite shows or games in order. Maybe even list some of the main characters in each. When you feel comfortable making lists and organizing tags, continue to the next page.