<ol></ol> tag HTML

Example

A simple <ol> tag that open PNLdev.com link:

<OL>
<li>SQL</li>
</ol>

Laboratory

description & Usage

They use the <ol> tag to make a numerical and alphabetical list.

The <li> tag is used to describe the list created by the <ol> tag.

Notes

note: You can use css codes to style your list.

note: To sort an unordered list, use the <ul> tag.

Browser compatibility and Support

#	Chrome	Edge	Firefox	Safari	Opera
<ol>

Attributes

Attributes	Values	Description
reversed	reversed	en
start	number	en
type	1,A,a,I,i	نوع تگ های مربوطه در سمت را تعیین می کند.

Global Attributes

The ol tag supports the HTML Global Attributes.

Event Attributes

The ol tag supports the HTML Event Attributes.

More Examples

Example

HTML <ol> tag with custom style -Example #1

<ol style="line-height: 50%;">
    <li>tae</li>
    <li>coffee</li>
    <li>juice</li>
</ol>
<ol style="line-height: 200%;">
    <li>tae</li>
    <li>coffee</li>
    <li>juice</li>
</ol>

Laboratory

Example

HTML <ol> tag with custom style -Example #2

<ol>
    <li>tae</li>
    <li>coffee</li>
    <ol>
        <li>Espresso</li>
        <li>Cappuccino</li>
        <li>Latte</li>
    </ol>
    <li>juice</li>
</ol>

Laboratory

Example

HTML <ol> tag with custom style -Example #3

<ol style="list-style: lower-alpha;">
  <li>tae</li>
  <li>coffee</li>
  <li>juice</li>
</ol>
<ol style="list-style:upper-roman;">
  <li>tae</li>
  <li>coffee</li>
  <li>juice</li>
</ol>

Laboratory

Default CSS

Most browsers will display the ol tag with the following default style:

ol {
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}