Lesson 6 | HTML Essential Training

For Lesson 6 of HTML Essential Training I learned more about creating lists in HTML, which can be a very useful way to organize content. The first type of list I learned was “unordered lists”. I wanted to make the items in the image below into a simple unordered list.

lesson-6-unordered-lists2

To do this I surrounded them in an unordered list tag. Then I surrounded each individual item in a “listed item” tag.

In the image just above, you’ll see a few listed items that could use further coding to organize such as “item 3.1”, “item 3.2” and “item 3.3”. Since they are sub items to “Item three” I’ll need to organize them further.

First I indented them in the Brackets application, which doesn’t do anything to them in the browser, but it helps me organize them visually. I then take the closing listed item tag on “Item three”, cut it then paste it under “item 3.3”. I then wrap items 3.1-3.3 in unordered list tags to finish.

Another useful type of list that is very similar to unordered lists is the ordered list. These two are so similar that they almost share the same exact syntax with just one letter difference. To show the difference both visually in the Brackets application and in the browser I’ve demonstrated in the exercise files from lynda.com.

The ordered list tag can be a little more flexible by adding other attributes, like what number the list should start, or even going a step further and having the list count down instead of up.

lesson-6-ordered-lists3lesson-6-ordered-lists4

I can even change whether the list is ordered using roman numerals or even the alphabet by using the type attribute.

The final type of list that I learned about was the “description list”, which was pretty straightforward and is used in conjunction with the “definition term” and the “definition description” tags. These tags are commonly used with terms or names and their definitions.

To use these, I surround the entire list with the description list tag, each term is wrapped in the definition term tags, and the definitions are wrapped in the definition description tags like in the images below.