Sorted and unordered lists in HTML

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!

WE START:

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.

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>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

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

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.

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>
<ul>
  <li>One</li>
  <li>Two</li>
     <ul>
       <li>Second one</li>
       <li>Second two</li>
     </ul>
  <li>Three</li>
</ul>

Ordered lists

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

with its closure

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.

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.

Sorted 1 (but we indicate that it starts at 5
 Sorted 2 (jumps to 6)
 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:

 Element 1
 Element 2
 Element 3
 Sub-element 1
 Sub-element 2
 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:

• Tags, attributes, and comments in HTML
• Basic HTML Tags: Structure of a Web Page
• Useful HTML codes that you will want to add to your website

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.