Thursday, December 31, 2015

HTML & CSS - Lists

There are numerous occasions where we need to use lists. In the third chapter of Jon Duckett’s HTML & CSS, we learn about the different types of lists and how to create them on your webpage. HTML provides three different types of lists: ordered lists, unordered lists, and definition lists.

Ordered lists are lists where each item is numbered. For example, steps of a recipe would use ordered list because you must perform them in order. An ordered list is created with the <ol> element. Items in the list should be placed between the <li> opening tag and the </li> closing tag. Say, for example, the first step to create a cake is prepare and gather your materials. You would write this as <li>prepare and gather materials</li> in between your <ol> and </ol> elements.

Unordered lists are lists without numbers and are normally bulleted. An example of this type of list can be a grocery list. An unordered list is created using the <ul> element. Like the ordered list, each item in the list should be placed between the <li> opening tag and the </li> closing tag. Unordered lists are very similar to ordered lists but they simply have no organization or sequence to them.

Definition lists are lists that consist of a set of terms with their definitions. A definition list is created using the <dl> element. The <dt> tag is used to indicate which term is being defined. My way of remembering that this tag is used for the term is that I use the “t” in “dt” to represent “term.” Along with the <dt> tag is the <dd> tag that contains the definition.

Lists allow us to organize our content in a way that allows our audience to see how many points we are covering. It is another organizational method for your webpage. If you have a disorderly webpage, it may not attract as big of as an audience as you had expected. In my previous post, you can see how my list of artists and songs were simply separated by commas and looked more like a paragraph rather than a list. After using my new skill in creating lists in HTML, I was able to create a much more visually appealing format of my content. By creating lists to organize your content, your audience is able to read through it easily.

Do you believe lists are an important part of webpages?

Below you will see how I used an unordered list to organize my content in the HTML page I have been working on that discussed my musical preferences.
View in TextWrangler
View in Safari

2 comments:

  1. That was really interesting to read. Most computer stuff has always seemed very complex and difficult to me, but this post has helped spark an interest. I think I might try to learn more about it now.

    ReplyDelete
    Replies
    1. Yeah! I'm glad you're taking an interest into this!

      Delete