Skip to content

Sorted and unordered lists in HTML

May 26, 2020
You will learn all about the ⭐ LISTS in HTML ✅ (and change the VIÑETAS): we will approach the ORDERED and the DISORDERED with CLEAR EXAMPLES. ⭐ ENTER!

In this post you will learn everything you need to know about HTML lists and how to change bullets in them: we will address the ordered and the disordered with CLEAR EXAMPLES. ENTERS!


Welcome to another post.

As we know, the HTML is the structure or skeleton of any websiteIt is the base that supports everything you see; all the design and form of the site is structured thanks to HTML.

Among the text processes that we can do with this layout language are lists, both unordered and ordered. We can tell the HTML to change even the bullets, which we will teach you anyway.

In this lesson you will know everything related to use of lists on a web page, since these are used to create enumerations, dictionaries, menus among other things.

We recommend you that to manage your HTML project you use the Sublime Text program. This organizes and clarifies the information and code entered.

Article index

Lists in HTML

In the order of information, lists play a very important role, since in text processes they are required for the development not only of literal lists, but they can also be used to create incredible menus using CSS, among other things.

Get ready to tackle the topic of ordered and unordered lists in HTML, as we will show you with clear examples how to create both types of lists. Let's go!

Messy lists

First, mention that to define that we are going to make an unordered list, we must make use of the label called «ul«: Your opening tag is

    and its closure

Inside this, all the elements of the list have to go inside the label «ul», and for define each of the elements the tag «li«. Let's see a clear example:

<p>List with out of order items</p>

As you will see, to add a point within this list you must use the tag

  • and for its closure
  • .

    What characterizes these lists is that They do not have a counter but it is composed of pointsWe can configure these types of lists to provide different types of symbols such as squares and circles without a background.

    Basic messy lists.
    Basic messy lists.

    If you want choose the type of bullets that will have the unordered list of your HTML or some element of it, you must place the "type" attribute inside the tag. Example:

    • Vignette with circle without background.
    • Square vignette.
    • Vignette with circle with black background.

    Too you can append a list either ordered or unordered within your current list, and now you will have a tab against that list:

    <p>List with out of order items</p>
           <li>Second one</li>
           <li>Second two</li>

    Ordered lists

    First, in order to define an ordered list in HTML, we must make use of the tags

      with its closure
    ; same as unordered lists, for add a point inside this list its label is
  • and its completion
  • .

    We recommend you:  Tags, attributes, and comments in HTML

    In this case the points you add will be listed, giving each new point an order. The advantage of using this type of list is that you can change the number of a point with the attribute "value = Number" and the number depends, the list will continue its course from the number placed.

    If you don't place that attribute within your HTML tag, the default list will start from number 1.

    Basic example of ordered lists in HTML.
    Basic example of ordered lists in HTML.

    If you want indicate a starting number in your HTML lists, we leave you an example so you can see how it could be structured.

    1. Sorted 1 (but we indicate that it starts at 5
    2. Sorted 2 (jumps to 6)
    3. Sorted 3 (jumps to 7)

    You can also change the type of numbering, and you can choose between Roman numerals, alphabetical or the one that has by default: numeric.

    If you want to change it, you must place the attribute «type» in the start tag of your ordered list. You can choose between 5 different values:

    • type = »a» (lowercase alphabetical numbering).
    • type = »A» (uppercase alphabetical numbering).
    • type = »i» (lowercase Roman numerals).
    • type = »I» (uppercase Roman numeration).
    • type = »1 ″ (numbering by numbers).

    Also in the same ol we can tell HTML at what number you want the ordered list to start using the "start" attribute.

    Here's a useful example of how you could implement unordered lists in HTML:

    1. Element 1
    2. Element 2
    3. Element 3
      1. Sub-element 1
      2. Sub-element 2
    4. Element 4

    I hope this post has been to your liking and that you have learned.

    Before concluding the article, I would like to mention the previous HTML topics that may be of great interest to you:

    If you want more interesting details about the HTML layout language, I invite you to enter our page full of interesting topics.

    Were you able to understand the ordered and unordered lists of HTML? Let us know in the comment box!

    See you in another post.