HTML ordered and unordered list

In HTML, several elements are responsible for creating lists, whose constructs must conform to certain data structuring rules.

The standard of the fifth version of HTML supports three types of lists: ordered lists, unordered, and definition lists. You can also create nested lists, i.e., nest lists into each other.

Ordered list

A ordered list is a set of items (list items) that have a specific sequence. Each item in the ordered list has a unique marker indicating the order of the item relative to the other items in the list. By default, numbers are the markers of the ordered list items. The first item is the number 1, the second under the number 2, and so on.

The most common examples of ordered lists are the recipes for cooking different dishes. Since any recipe is a ordered list with a clear sequence of actions.

To create ordered lists in HTML, use the <ol> (ordered list) tag, inside of which are its elements with data, for which a special <li> tag is responsible:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>	
  <body>

    <h4>Ordered list:</h4>
    <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>

  </body>
</html>
Try it »

Note: the <ol> tag can only contain <li> tags as child elements, that is, all the contents of a ordered list should be placed inside <li> elements. The <li> tag, in its turn, has no restrictions on the content, so you can place paragraphs, pictures, links, tables, other lists, etc. in it.

Unordered list

A unordered list is unnumbered, that is, unordered lists of elements whose sequence does not matter. All items have the same markers, and by default they appear as small black circles.

To create unordered lists in HTML, the <ul> (unordered list) tag is used, within which the elements of the list are located (as in the case of ordered lists, the <li> tag is used):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>	
  <body>

    <h4>Unordered list:</h4>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>

  </body>
</html>
Try it »

Marker types of lists

The types of markers of a numbered list can be changed using the type attribute. This attribute supports five types of markers:

ValueDescription
1Decimal numbers (1, 2, 3..)
aList in alphabetical order, lowercase letters (a, b, c..)
AList in alphabetical order, capital letters (A, B, C..)
iRoman numbers, lowercase (i, ii, iii, iv..)
IRoman numbers, capital (I, II, III, IV..)

The unordered lists do not have the type attribute, so HTML tools will not be able to change the type of the bullet from the unordered list. To change the type of the marker, in this case, you can use the CSS property list-style-type, with which, in addition to the default value, you can select two more types of marker: circle or square.

Changing bullets in lists:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>	
  <body>

    <h4>An ordered list with the type="a" attribute:</h4>
    <ol type="a">
      <li>Apples</li><li>Bananas</li><li>Lemons</li>
    </ol>

    <h4>An ordered list with the type="I" attribute</h4>
    <ol type="I">
      <li>Apples</li><li>Bananas</li><li>Lemons</li>
    </ol>
	
	<h4>Types of markers of unordered lists:</h4>
	
    <ul style="list-style-type: circle;">
      <li>Apples</li><li>Bananas</li><li>Lemons</li>
    </ul>
	
	<ul style="list-style-type: square;">
      <li>Apples</li><li>Bananas</li><li>Lemons</li>
    </ul>

  </body>
</html>
Try it »

Horizontal list

If you use the HTML list to create a horizontal menu, you will need to arrange the list items one after the other on the same line. With HTML you can not do this, so you'll need to use CSS.

To create a horizontal list, you need to write a CSS display property with the value inline or inline-block for the list items, depending on what other properties you are going to use.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
	<style>li { display: inline; }</style>
  </head>	
  <body>

    <h4>Ordered list:</h4>
    <ol>
      <li>Apples</li><li>Bananas</li><li>Lemons</li>
    </ol>
	
	<h4>Unordered list:</h4>
	
    <ul>
      <li>Apples</li><li>Bananas</li><li>Lemons</li>
    </ul>

  </body>
</html>
Try it »

After that, all the items in the list will line up in one line. Note that the list items will have lost markers and there will not even be a space between them, but the left margin of the list will remain.

As a horizontal list turn into a horizontal menu, you can see here.

Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011 - 2021 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen