HTML Tags – Part 2: Writing Your Lists

This article is the second of a six part series where I will discuss the basics of coding in HTML. So stay tuned!

HTML Tags Lists Image 500px

In Part 1 of this series, I demonstrated seven HTML tags that are most common in web coding practices. Part 2 will continue on with this theme by discussing three kinds of lists.

HTML Tags – Part 2: The Unordered and Ordered Lists Tags

Have you ever seen a post where the author talks about their favorite movies or foods? They’ll have them listed with either bullets or numbers, making it easy to read. If you think that doing this task is easy, YOU’RE RIGHT!

The two list commands that are used are the unordered list (<ul>) and the ordered list (<ol>) tags. When you use the unordered list, you will see the default value of circles or squares, depending on what browser you’re using, at the beginning of each list item. And when using the ordered list, you’ll see numbers.

In order to display the items in both list tags, the list item tag (<li>) must be used. It helps display each item one at a time by typing the opening tag before the individual item and the closing tag afterwards.

HTML Tags - Unordered and Ordered List

As always, the image above shows a partial view of Adobe Dreamweaver, the software that I use to code a website and upload its content to my hosting account. Something you may have noticed is that I did not place either of the list tags within the <p> tag. That is because it will read as being illegal according to web standards.

HTML Tags – Part 2: Definition List Tag

Another kind of list you can create is a definition list. It works similar to referencing a word in a dictionary. There are three tags associated with this structure;

  • <dl> – the opening tag that encloses the definition list
  • <dt> – the definition term or word that will be defined
  • <dd> – the definition data of the term being presented

Below is an example of its structure and how it looks:

HTML Tags - Definition List Example

This example shows a form of indentation and presentational structure to a page without using CSS (Cascading Style Sheets). When you feel comfortable learning how to code using HTML, you will be able to move on to my tutorials concerning CSS and see, when used together, how they can make your page very attractive.

What Questions Do You Have?

What questions do you have on the 3 lists used in HTML? Post your questions on my Facebook Page.