Learn HTML #28

Posted on by Apostube

HTML Ordered Lists

The HTML <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Ordered HTML List – The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description
type=”1″ The list items will be numbered with numbers (default)
type=”A” The list items will be numbered with uppercase letters
type=”a” The list items will be numbered with lowercase letters
type=”I” The list items will be numbered with uppercase roman numbers
type=”i” The list items will be numbered with lowercase roman numbers

Numbers:

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Uppercase Letters:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Lowercase Letters:

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Uppercase Roman Numbers:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute:

Example

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Nested HTML Lists

Lists can be nested (list inside list):

Example

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

Note: A list item (<li>) can contain a new list, and other HTML elements, like images and links, etc.

Chapter Summary

  • Use the HTML <ol> element to define an ordered list
  • Use the HTML type attribute to define the numbering type
  • Use the HTML <li> element to define a list item
  • Lists can be nested
  • List items can contain other HTML elements

 

Apostube

See author's posts

Related Posts

Learn HTML #50

HTML Uniform Resource Locators A URL is another word for a web address. A URL can be composed of words (e.g. […]

Learn HTML #49

HTML Plug-ins Plug-ins are computer programs that extend the standard functionality of the browser. Plug-ins Plug-ins were designed to be used […]

Learn HTML #48

HTML Audio The HTML <audio> element is used to play an audio file on a web page. The HTML <audio> Element To play […]

83 thoughts on “Learn HTML #28”

  73. Hello bro!More info>>>
    дом престарелых в Ростове-на-Дону
    https://pansionat-rnd.ru/
    “Дом престарелых” – это общепринятое название для социального учреждения, которое оказывает услуги по социальной защите и помощи престарелым людям. Если вы ищете информацию о конкретном доме престарелых в Ростове-на-Дону, можете уточнить местоположение и другую информацию.
    пансионат для пожилых

    http://images.google.co.uk/url?q=https://pansionat-rnd.ru/ http://images.google.mg/url?q=https://pansionat-rnd.ru/ http://www.google.com.tw/url?q=https://pansionat-rnd.ru/ http://cse.google.im/url?q=https://pansionat-rnd.ru/ http://images.google.ca/url?q=https://pansionat-rnd.ru/

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *