HTML Lists

Order List <ol>

Lists created with the order list tag (<ol>) have a sequence number in each list element. This comes as the default property of the sorted list structure. This appearance can be changed by editing the CSS settings.

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>SEO</li>
</ol>

Default <ol> CSS Structure

ol {
   display: block;
   list-style-type: decimal;
   margin-block-start: 1em;
   margin-block-end: 1em;
   margin-inline-start: 0px;
   margin-inline-end: 0px;
   padding-inline-start: 40px;
}

Browsers Compatible With the <ol> Tag

Click the link https://caniuse.com/?search=ol to view the current version of the above table and more details.

Unordered List <ul>

Lists created with an unordered list tag (<ul>) have a dot at the beginning of each list element. In the unordered list tag, this is a CSS property that comes by default, this appearance can be changed by editing the settings.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>SEO</li>
</ul>

Default <ul> CSS Structure

ul {
   display: block;
   list-style-type: disc;
   margin-block-start: 1em;
   margin-block-end: 1em;
   margin-inline-start: 0px;
   margin-inline-end: 0px;
   padding-inline-start: 40px;
}

Browsers Compatible With the <ul> Tag

Click the link https://caniuse.com/?search=ul  to view the current version of the above table and more details.

List Item <li>

List element tag (<li>) is used inside sorted list (<ol>) and unordered list (<ul>) tags, it is not technically correct to use without these tags.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>SEO</li>
</ul>

Default <li> CSS Structure

li {
   display: list-item;
   text-align: -webkit-match-parent;
}

Browsers Compatible With the <li> Tag

Click the link https://caniuse.com/?search=li view the current version of the above table and more details.