Lists (and HTML Writing Tips)

Writing 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.

Aside from the tag name, both kinds of lists are structured the same way:

1. First, you need to write the pair of tags at the start and end of the entire list that determines which kind of list it is.
2. Second, you need to write <li> tags at the start and end of each individual item inside the list. 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.

Organizing Tags with Indentation

As we add more and more tags between other pairs of tags, it gets harder to keep track of them. When writing HTML, I recommend writing the corresponding start and end tags at the same time to make sure you don’t forget to write the end tag, and then you can move the cursor between them to add more stuff in the middle.

However, there’s more to HTML than writing it. You also need to be able to read it, and that’s not as simple as it sounds.

HTML, like any other kind of document, may require many revisions. Even if you wrote perfect HTML for the first draft, you’ll probably have to go back and make some edits before you’re done. That means that you may have to read your own HTML after you’ve forgotten how you originally structured it and where all the tags are supposed to go, so it’s easy to accidentally mess it up when you add to it or move parts around.

Remember how I mentioned earlier that any extra spaces and blank lines of text in HTML are removed by the computer before displaying the text on the page, and that’s why we have to use tags to create paragraphs? Well, we can take advantage of this to organize our HTML however we want without disrupting the page layout. I recommend following these two rules when writing HTML to make it easier to read:

1. Put each tag on a separate line from the rest of your text by pressing the enter key before and after writing every start and end tag.
   • This makes it easier to tell the difference between normal text and special HTML code just from looking at it.
   • This is especially important for headings, paragraphs, and lists, but I sometimes skip this rule for little things like bold and italic tags to maintain the flow of the text.
2. Indent the stuff in between the start and end tags by moving the cursor to the beginning of the line of text, then pressing the tab key once or the spacebar twice.
   • Keep everything inside indented
   • Note how easy it is to figure out corresponding tags from glancing at the HTML

   • 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.

     Note that this sub-list of bullet points that you are reading right this very moment is fully contained inside another list, which makes it a good demonstration of how to properly indent complex groups of tags. Putting tags inside other tags is called nesting.

     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.

Take a look in the editor at how I structured the HTML for this tutorial page differently from previous pages. I will be indenting HTML like this from now on in this tutorial.

On Tedium

As you practice writing these tags, you may start to feel frustrated by how tedious it is to type them. I love HTML, but I’ll admit that it’s not the easiest tool to use. Honestly, 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 tutorial 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! 😎

There are also tools you can use to write HTML that automatically insert the tags for you. This can be a reasonable way to save time, but I think it’s still important to get comfortable writing HTML tags manually to make sure you understand how they work.

So, 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.