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

An ordered list, often called a numbered list, is a certain sequence of elements. That is, each subsequent item of such a list will be one more than the previous one.

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 »

Inside the <li> element, you can place paragraphs, lines, images, links, other lists, etc.

Unordered list

Another common way to structure data is to create an unordered list. Unordered lists are unnumbered or bulleted lists of elements, for which special bullets are used.

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 »

Type attribute

The type attribute defines the kind of marker that will be used in the ordered list before the items.

Unlike ordered lists, unordered lists do not support the type attribute.

Values of markers for ordered lists:

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..)
<!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>

  </body>
</html>
Try it »

With this theme look:

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-2018 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen