ol: The Ordered List element

The <ol> HTML element represents an ordered list of items typically rendered as a numbered list. The order of the list items matters for the meaning of the content.

Attributes

Specific attributes

Allowed attributes

start="[number]" specifies the starting number for the list items. This can be any integer value, including negative numbers.

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<h3>Steps to Set Up Your Personal Website</h3>
<ol>
  <li>Choose a domain name that represents you</li>
  <li>Select a web hosting provider or static site host</li>
  <li>Create your HTML pages with semantic markup</li>
  <li>Add CSS styling to make it uniquely yours</li>
  <li>Publish your content and share your URL</li>
</ol>

<h3>IndieWeb Building Blocks (Advanced)</h3>
<ol start="6">
  <li>Implement microformats for structured data</li>
  <li>Add webmention support for social interaction</li>
  <li>Set up a RSS feed for content syndication</li>
  <li>Connect to the IndieWeb community</li>
</ol>