Tag ol

what is tag Ol?

Tag ol (<ol>) can be used to create an ordered list. It can contain multiple list items using the tag li (<li>) and can be styled using CSS. Also, keep in mind that there may be nested lists (using ul and/or <ol>). Provides various processes for listing information in HTML. All lists may contain one or more elements:

  • oder information.
  • Ordered information.
  • Definitions.

The previous list was made with <ol> material:

Tag ol Explain 01

<ol>
  <li>Paris</li>
  <li value="10">Amsterdam</li>
  <li value="20">London</li>
  <li value="57">Berlin</li>
</ol>
<div class="class_name" title="Edit & Save To bwd"></div>

Indicates the specific direction of the HTML element in the HTML ol tag. Attributes A tag pair is made up of all tags that support standard attributes. The table below shows the current unique HTML properties of the tag and details of each.The <ol> tag attributes.

ATTRIBUTEVALUEDESCRIPTION
type1, A, a, I, iList marker type. Default is 1.
startnumberOrdered list start value
id   identifierDefines a unique identifier for the ol.
class   class namesSets one or more CSS classes to be applied to the ol element.
style   CSS-stylesSets the style for the ol element.
data-*   valueDefines additional data that can be used by JavaScript.
hidden   hiddenSpecifies whether the ol element is hidden.
reversedreversedList order (descending or ascending)

Tag ol Explain 02

<ol type="a">
  <li>Amsterdam</li>
  <li>London</li>
  <li>Berlin</li>
  <li>Paris</li>
</ol>

<ol start="10">
  <li>Amsterdam</li>
  <li>London</li>
  <li>Berlin</li>
  <li>Paris</li>
</ol>

<ol type="I" reversed>
  <li>Amsterdam</li>
  <li>London</li>
  <li>Berlin</li>
  <li>Paris</li>
</ol>
<div class="class_name" title="Edit & Save To bwd"></div>

What is html ol and how does it work?

When writing in HTML, the tag is a block element used to define an ordered list. HTML ol tags are useful for creating numeric or alphabetical lists. The following section contains information about the tag, including an example of its use and related features, and browser compatibility.

Example result

Ordered list

  1. First numbered item
  2. Second numbered item
  3. Third numbered item

Start at number 5

  1. Fifth numbered item
  2. Sixth numbered item
  3. Seventh numbered item

Attributes specific to this element

Type: Determines the form of the bullet which precedes the list item placed within an ordered list. This attribute is deprecated.

ValueDescription
1Arabic numbers (1, 2, 3,…)
aLower alpha (a, b, c,…..)
AUpper alpha (A, B, C, …)
iLower roman (i, ii, iii, …)
IUpper Roman (I, II, III, …)

Tag ol Explain 03

<style>
ol {
  background-color: lightgreen;
  width: 200px;
}
li {background-color:lightgray;}
</style>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>

start attribute

The start attribute is used with ol tag to specify from where to start the list items.

  • <ol type=”1″ start=”5″>
  • <ol type=”A” start=”5″>
  • <ol type=”a” start=”5″>
  • <ol type=”I” start=”5″>

Tag ol Explain 04

<style>
ol {
  background-color: lightgreen;
  width: 200px;
  list-style-position: outside; /* default */
}
li {background-color:lightgray;}
</style>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>

HTML Ordered List | HTML Numbered List

HTML Ordered List or Numbered List displays elements in a numbered format. The HTML ol tag is used for the ordered list. We can use the ordered list to represent the order in which the order is emphasized in numerical order or alphabetical order. There can be different types of numbered lists:

  • 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

The <ol> tag creates an ordered list of items. In an ordered list the items are numbered, either numeric, alphabetic, or with roman numerals <ol> element creates an ordered list of items (numeric or alphabetical)

Tag ol Explain 05

<style>
ol {
  background-color: lightgreen;
  width: 200px;
  list-style-position: outside;
  padding: 0 0 0 20px;
}
li {background-color:lightgray;}
</style>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
  • ol = ordered list
  • li = list item

The ol defines an ordered list. The ol HTML element represents an ordered list of items and is usually rendered as a numbered list

Related Posts

meter element

meter element

How To Use The Meter Element In HTML?

Preg_match_all-in-php.jpg

Preg_match_all in php

The Basic Concept of the PHP preg_match_all Function The PHP preg_match_all function is a pattern-matching function that matches the text. This function is use to search for…

document.queryselector-in-javascript.jpg

what is document.queryselector in javascript

What is document.querySelector() in Javascript? The javascript document.querySelector() method retrieves. The element with the given tag name or id from within a document. The document.querySelector() method returns…

JQuery hide Method.jpg

JQuery hide Method

What can the JQuery Hide Method Do For You? The JQuery Hide Method is a function that one can use to hide text on a website. It…

Push array in php.jpg

Push array in php

What is a php Push Array? A push array is a PHP data type that can store an arbitrary number of values. The push array is a…

How to use map method in javascript.jpg

How to use map method in javascript

What is the Map Method? The map method is a higher-order function in JavaScript. Who can use it to transform an array into another array by iterating…

Leave a Reply

Your email address will not be published.

Education Template