From 754bbf7a25a8dda49b5d08ef0d0443bbf5af0e36 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 7 Apr 2024 13:41:34 -0500 Subject: new repository --- devdocs/html/element%2Fol.html | 237 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 237 insertions(+) create mode 100644 devdocs/html/element%2Fol.html (limited to 'devdocs/html/element%2Fol.html') diff --git a/devdocs/html/element%2Fol.html b/devdocs/html/element%2Fol.html new file mode 100644 index 00000000..1f117533 --- /dev/null +++ b/devdocs/html/element%2Fol.html @@ -0,0 +1,237 @@ +

<ol>: The Ordered List element

The <ol> HTML element represents an ordered list of items — typically rendered as a numbered list.

+

Try it

+
+

Attributes

+
+

This element also accepts the global attributes.

reversed

This Boolean attribute specifies that the list's items are in reverse order. Items will be numbered from high to low.

start

An integer to start counting from for the list items. Always an Arabic numeral (1, 2, 3, etc.), even when the numbering type is letters or Roman numerals. For example, to start numbering elements from the letter "d" or the Roman numeral "iv," use start="4".

type

Sets the numbering type:

  • +a for lowercase letters
  • +A for uppercase letters
  • +i for lowercase Roman numerals
  • +I for uppercase Roman numerals
  • +1 for numbers (default)

The specified type is used for the entire list unless a different type attribute is used on an enclosed <li> element.

Note: Unless the type of the list number matters (like legal or technical documents where items are referenced by their number/letter), use the CSS list-style-type property instead.

+
+

Usage notes

+
+

Typically, ordered list items display with a preceding marker, such as a number or letter.

The <ol> and <ul> elements may nest as deeply as desired, alternating between <ol> and <ul> however you like.

The <ol> and <ul> elements both represent a list of items. The difference is with the <ol> element, the order is meaningful. For example:

To determine which list to use, try changing the order of the list items; if the meaning changes, use the <ol> element — otherwise you can use <ul>.

+
+

Examples

+ +

Simple example

+
+
+

html

+
<ol>
+  <li>Fee</li>
+  <li>Fi</li>
+  <li>Fo</li>
+  <li>Fum</li>
+</ol>
+
+

Result

+
+ + +
+
+

Using Roman Numeral type

+
+
+

html

+
<ol type="i">
+  <li>Introduction</li>
+  <li>List of Grievances</li>
+  <li>Conclusion</li>
+</ol>
+
+

Result

+
+ + +
+
+

Using the start attribute

+
+
+

html

+
<p>Finishing places of contestants not in the winners' circle:</p>
+
+<ol start="4">
+  <li>Speedwalk Stu</li>
+  <li>Saunterin' Sam</li>
+  <li>Slowpoke Rodriguez</li>
+</ol>
+
+

Result

+
+ + +
+
+

Nesting lists

+
+
+

html

+
<ol>
+  <li>first item</li>
+  <li>
+    second item
+    <!-- closing </li> tag is not here! -->
+    <ol>
+      <li>second item first subitem</li>
+      <li>second item second subitem</li>
+      <li>second item third subitem</li>
+    </ol>
+  </li>
+  <!-- Here's the closing </li> tag -->
+  <li>third item</li>
+</ol>
+
+

Result

+
+ + +
+
+

Unordered list inside ordered list

+
+
+

html

+
<ol>
+  <li>first item</li>
+  <li>
+    second item
+    <!-- closing </li> tag is not here! -->
+    <ul>
+      <li>second item first subitem</li>
+      <li>second item second subitem</li>
+      <li>second item third subitem</li>
+    </ul>
+  </li>
+  <!-- Here's the closing </li> tag -->
+  <li>third item</li>
+</ol>
+
+

Result

+
+ + +
+
+

Technical summary

+
Content categories Flow content, and if the <ol> element's children include at least one <li> element, palpable content.
Permitted content Zero or more <li>, <script> and <template> elements.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content.
Implicit ARIA role list
Permitted ARIA roles directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree
DOM interface HTMLOListElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-ol-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
ol1121Yes15≤44.418414≤3.21.0
compact1121Yes1534.41841421.0
reversed18≤7918No1564.418181461.0
start1121Yes15≤44.418414≤3.21.0
type1121Yes15≤44.418414≤3.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol +

+
-- cgit v1.2.3