How do I make an ordered list?

HTML Ordered Lists

The HTML

tag defines an ordered list. An ordered list can be numerical or alphabetical.

HTML Lists

❮ Previous Next ❯

HTML lists allow web developers to group a set of related items in lists.

Example

An unordered HTML list:

• Item
• Item
• Item
• Item

An ordered HTML list:

1. First item
2. Second item
3. Third item
4. Fourth item

Try it Yourself »

: The Ordered List element

The

HTML element represents an ordered list of items — typically rendered as a numbered list.
Content categoriesPermitted contentTag omissionPermitted parentsImplicit ARIA rolePermitted ARIA rolesDOM interface

Flow content, and if the element's children include at least one element, palpable content.

Zero or more , and elements.

None, both the starting and ending tag are mandatory.

Any element that accepts flow content.

list

directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree

HTMLOListElement

How to Make Lists in HTML

In HTML, we can list items either in an ordered or unordered fashion.

An ordered list uses numbers or some sort of notation that indicates a series of items.

For example, an ordered list can start with number 1, and continue through 2, 3, 4, and so on. Your ordered list can also start with the letter A and go through B, C, D, and so on.

Here is an example of an ordered list with students' names and marks.

Ordered list of students

On the other hand, we have unordered lists, like a TODO list for example. Here I am so passionate about coding that I skipped my breakfast 🤓.

Unordered TODO list

There is one more type of list called a description list that we will learn as well below.

Now let's get into a bit more detail and see how to create each type of list in HTML.

OL [Ordered List]

Permitted Context: %Body.Content, %flow, %block
Content Model: Optional list header [LH], followed by one or more list items[LI]

An ordered list typically is a numbered list of items. HTML 3.0 gives you the ability to control the sequence number - to continue where the previous list left off, or to start at a particular number. The numbering style is left to associated style sheets, e.g. whether nested lists contribute to a compound item number, e.g. "3.1.5", or whether numbers are rendered as arabic, upper or lower case roman numerals or using the numbering scheme appropriate to the language context.

The opening list tag must be

. It is followed by an optional list header [caption] and then by the first list item [
1. ]. For example:
   Meeting Agenda
   1. Minutes of the last meeting
   2. Do we need yet more meetings?
   3. Any other business

   which could be rendered as:

   Meening Agenda

   • Minutes of the last meeting
   • Do we need yet more meetings?
   • Any other business

   Note: Some legacy documents may include headers or plain text before the first LI element. Implementors of HTML 3.0 user agents are advised to cater for this possibility in order to handle badly formed legacy documents.

   Permitted Attributes for the OL Element

   IDAn SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Identifiers are NAME tokens and must be unique within the scope of the current document.LANGThis is one of the ISO standard language abbreviations, e.g. "en.uk" for the variation of English spoken in the United Kingdom. It can be used by parsers to select language specific choices for quotation marks, ligatures and hypenation rules etc. The language attribute is composed from the two letter language code from ISO 639, optionally followed by a period and a two letter country code from ISO 3166.CLASSThis a space separated list of SGML NAME tokens and is used to subclass tag names. By convention, the class names are interpreted hierarchically, with the most general class on the left and the most specific on the right, where classes are separated by a period. The CLASS attribute is most commonly used to attach a different style to some element, but it is recommended that where practical class names should be picked on the basis of the element's semantics, as this will permit other uses, such as restricting search through documents by matching on element class names. The conventions for choosing class names are outside the scope of this specification.CLEARThis attribute is common to all block-like elements. When text flows around a figure or table in the margin, you sometimes want to start an element like a header, paragraph or list below the figure rather than alongside it. The CLEAR attribute allows you to move down unconditionally:
   
   clear=leftmove down until left margin is clearclear=rightmove down until right margin is clearclear=allmove down until both margins are clear

   Alternatively, you can decide to place the element alongside the figure just so long as there is enough room. The minimum width needed is specified as:
   
   

   clear="40 en"move down until there is at least 40 en units freeclear="100 pixels"move down until there is at least 100 pixels free

   The style sheet [or browser defaults] may provide default minimum widths for each class of block-like elements.

   CONTINUEDon't restart the sequence number, i.e. continue where previous list left off, e.g.
   SEQNUMSet the starting sequence number for the first item, e.g.
   COMPACTThe presence of this attribute indicates the user agent should use reduced interitem spacing. In practice, there are several ways to increase the compactness of lists: reduced vertical interitem spacing, smaller font size, or even to avoid line breaks between items. This is best handled through associated style sheets and the class attribute.

   Ordered List Type Attribute

   While on the webinar, I said, "Hmm, I'm not sure, but let's google it" and we wound up on the W3Schools.com HTML

   type Attributepage. And it turns out, yes, there are different options instead of just numbers. All we need to do is add the type attribute on our
   tag and say what we want.

   As shown above, if we don't add a type attribute, the default is just decimal numbers. Let's look at two other options.

   Alphabetical

   We can display our list using letters by using

   . For example:
   1. Item 1
   2. Item 2
   3. Item 3

   You can also display this using lowercase letters with

   :
   1. Item 1
   2. Item 2
   3. Item 3

   What If I Have a Lot Of Items?

   If you have a list that has more than 26 items in it, you probably aren't going to be using an alphabetical list type. But I was curious, what would happen if I had 27 items in my list? Would it just start over again?

   What happens is that it then begins to display two letters, starting with AA, then AB, AC, AD, etc...

   HTML Ordered List | HTML Numbered List

   HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is used for ordered list. We can use ordered list to represent items either in numerical order format or alphabetical order format, or any format where an order is emphasized. There can be different types of numbered list:

   • Numeric Number [1, 2, 3]
   • Capital Roman Number [I II III]
   • Small Romal Number [i ii iii]
   • Capital Alphabet [A B C]
   • Small Alphabet [a b c]

   To represent different ordered lists, there are 5 types of attributes in

   tag.
   TypeDescription

   Type "1"	This is the default type. In this type, the list items are numbered with numbers.
   Type "I"	In this type, the list items are numbered with upper case roman numbers.
   Type "i"	In this type, the list items are numbered with lower case roman numbers.
   Type "A"	In this type, the list items are numbered with upper case letters.
   Type "a"	In this type, the list items are numbered with lower case letters.

   Video liên quan