{"id":12423,"date":"2020-04-22T15:10:01","date_gmt":"2020-04-22T22:10:01","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=12423"},"modified":"2023-12-01T02:43:07","modified_gmt":"2023-12-01T10:43:07","slug":"html-lists","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/html-lists\/","title":{"rendered":"HTML Lists: Step-by-Step Guide"},"content":{"rendered":"\n

The HTML list tag is used to create lists on a webpage. It can create three types of lists: ordered lists, unordered lists, and description lists.<\/em><\/p>\n\n\n\n

\n\n\n\n

When you’re building a web page, you may want to present information as a well-formatted list. For example, you may have a roster of student names that you want to appear in a list form, or you may have a series of blog posts that you wish to format as a list.<\/p>\n\n\n\n

In HTML<\/code>, there is a built-in function that allows you to create lists. In this tutorial, we’ll cover HTML<\/code> list types and how to implement them into a web page.<\/p>\n\n\n\n

HTML List Types<\/h2>\n\n\n\n

There are three types of lists in HTML<\/code>, and each one has a specific purpose and code. These are as follows:<\/p>\n\n\n\n

    \n
  • Ordered list<\/code>: Used to create a list of items in a specific order.<\/li>\n\n\n\n
  • Unordered list<\/code>: Used to create a list of items with no order.<\/li>\n\n\n\n
  • Description list<\/code>: Used to create a list of items and descriptions.<\/li>\n<\/ul>\n\n\n\n

    Lists can appear in any part of a webpage, whether you place them inside the text, after line breaks, or even inside another list to create a nested list<\/code>. Let\u2019s break down how you can create these three types of lists in HTML<\/code>.<\/p>\n\n\n\n

    HTML Lists: Ordered<\/h2>\n\n\n\n

    Ordered lists<\/code> are used in HTML<\/code> when the order of the list is necessary. For example, if you have a series of instructions that need to occur in a particular order, you would want to use an ordered list. Ordered lists<\/code> are numbered lists.<\/p>\n\n\n\n

    Ordered lists<\/code> use the <ol><\/code> tag, and each item in the list uses an <li><\/code> tag. Here\u2019s an example of an ordered list:<\/p>\n\n\n\n

    <ol>\n\t<li>Mix 100g plain flour, 2 eggs, 300ml milk, and 1tbsp sunflower oil in a bowl.<\/li>\n\t<li>Leave the mix to rest for 30 minutes.<\/li>\n\t<li>Set a medium-size frying pan over a medium heat and wipe it with oiled kitchen paper.<\/li>\n\t<li>Pour batter mixture into the pan and cook on each side for one minute.<\/li>\n<\/ol><\/pre><\/div>\n\n\n\n
    In the above example, we have created a basic recipe for pancakes. Each step in this list has to occur in order, so we chose an ordered list. Here is the output of our code:<\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    Ordered lists<\/code> start with the number one and go in ascending order. However, if you want your list to start at a different number, you can use the start<\/code> attribute like so:<\/p>\n\n\n\n
    <ol start=\"5\">\n\t<li>Move the pancake onto a plate (repeat steps 2-4 if you are making multiple pancakes).<\/li>\n\t<li>Spread butter on your pancakes, maple syrup, lemon, or any other topping.<\/li>\n\t<li>Enjoy your pancakes!<\/li>\n<\/ol><\/pre><\/div>\n\n\n\n
    Our new list appears as follows:<\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    HTML Lists: Unordered<\/h2>\n\n\n\n
    If you want to create a list of items where the order of the list\u2019s items is not important, you can use the HTML unordered<\/code> list tag. We can create unordered lists<\/code> using the <ul><\/code> tag, and each list item, like in our ordered list, starts with the <li><\/code> tag.<\/p>\n\n\n\n
    Here is an example of an unordered list<\/code>: <\/p>\n\n\n\n
    <ul>\n\t<li>Alex<\/li>\n\t<li>Carol<\/li>\n\t<li>Lucy<\/li>\n\t<li>Shawn<\/li>\n<\/ul><\/pre><\/div>\n\n\n\n
    Our list appears as follows:<\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    HTML Lists: Description Lists<\/h2>\n\n\n\n
    When you\u2019re writing a list, you may want to include a description of each item on your list. For example, if you had a list of student names, you may want to add their grades, but not as part of the main list text.<\/p>\n\n\n\n
    That\u2019s where description lists<\/code> come in. Description lists<\/code> are lists of items with a description of each element. Description lists<\/code> are created using the <dl><\/code> tag, the main elements in the list use the <dt><\/code> tag, and definitions use the <dd><\/code> tag.<\/p>\n\n\n\n
    Here is an example of a description list<\/code> in HTML<\/code>:<\/p>\n\n\n\n
    <dl>\n\t<dt>Economy Class<\/dt>\n\t<dd>Standard seats, no meal service.<\/dd>\n\t<dt>First Class<\/dt>\n\t<dd>Luxury seats, catered meal service.<\/dd>\n<\/dl><\/pre><\/div>\n\n\n\n
    Our code returns the following list:<\/p>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
    As you can see, the airplane class names appear in a list format, and the descriptions for those names appear under each item. Each description is also indented, which distinguishes it from the list item.<\/p>\n\n\n\n