TheDeveloperBlog.com

Home | Contact Us

C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML

HTML Ordered List | HTML Numbered List

HTML Ordered lists or HTML Numbered lists with examples, html ordered list, html unordered list, html description list, forms, input, text, anchor, image, heading, marquee, textarea, paragraph, title, quotes, code etc.

<< Back to HTML

HTML Ordered List | HTML Numbered List

HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is used for ordered list. We can use ordered list to represent items either in numerical order format or alphabetical order format, or any format where an order is emphasized. There can be different types of numbered list:

  • 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)

To represent different ordered lists, there are 5 types of attributes in <ol> tag.

TypeDescription
Type "1"This is the default type. In this type, the list items are numbered with numbers.
Type "I"In this type, the list items are numbered with upper case roman numbers.
Type "i"In this type, the list items are numbered with lower case roman numbers.
Type "A"In this type, the list items are numbered with upper case letters.
Type "a"In this type, the list items are numbered with lower case letters.

HTML Ordered List Example

Let's see the example of HTML ordered list that displays 4 topics in numbered list. Here we are not defining type="1" because it is the default type.

<ol>
 <li>HTML</li>
 <li>Java</li>
 <li>JavaScript</li>
 <li>SQL</li>
</ol>
Test it Now

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

ol type="I"

Let's see the example to display list in roman number uppercase.

<ol type="I">
 <li>HTML</li>
 <li>Java</li>
 <li>JavaScript</li>
 <li>SQL</li>
</ol>
Test it Now

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

ol type="i"

Let's see the example to display list in roman number lowercase.

<ol type="i">
 <li>HTML</li>
 <li>Java</li>
 <li>JavaScript</li>
 <li>SQL</li>
</ol>
Test it Now

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

ol type="A"

Let's see the example to display list in alphabet uppercase.

<ol type="A">
 <li>HTML</li>
 <li>Java</li>
 <li>JavaScript</li>
 <li>SQL</li>
</ol>
Test it Now

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

ol type="a"

Let's see the example to display list in alphabet lowercase.

<ol type="a">
 <li>HTML</li>
 <li>Java</li>
 <li>JavaScript</li>
 <li>SQL</li>
</ol>
Test it Now

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

start attribute

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

<ol type="1" start="5"> : It will show numeric values starting with "5".

<ol type="A" start="5"> : It will show capital alphabets starting with "E".

<ol type="a" start="5"> : It will show lower case alphabets starting with "e".

<ol type="I" start="5"> : It will show Roman upper case value starting with "V".

<ol type="i" start="5"> : It will show Roman lower case value starting with "v".

<ol type="i" start="5">
 <li>HTML</li>
 <li>Java</li>
 <li>JavaScript</li>
 <li>SQL</li>
</ol>
Test it Now

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

reversed Attribute:

This is a Boolean attribute of HTML <ol> tag, and it is new in HTML5 version. If you use the reversed attribute with

    tag then it will numbered the list in descending order (7, 6, 5, 4......1).

    Example:

    <ol reversed>
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
 </ol>
    Test it Now

    Output:

    HTML Ordered List

    Supporting Browsers

    Elementchrome browser Chromeie browser IEfirefox browser Firefoxopera browser Operasafari browser Safari
    <ol>YesYesYesYesYes
    Next TopicHTML Unordered List




Related Links:

.Net

.NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

Java

Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

Related Links

Adjectives Ado Ai Android Angular Antonyms Apache Articles Asp Autocad Automata Aws Azure Basic Binary Bitcoin Blockchain C Cassandra Change Coa Computer Control Cpp Create Creating C-Sharp Cyber Daa Data Dbms Deletion Devops Difference Discrete Es6 Ethical Examples Features Firebase Flutter Fs Git Go Hbase History Hive Hiveql How Html Idioms Insertion Installing Ios Java Joomla Js Kafka Kali Laravel Logical Machine Matlab Matrix Mongodb Mysql One Opencv Oracle Ordering Os Pandas Php Pig Pl Postgresql Powershell Prepositions Program Python React Ruby Scala Selecting Selenium Sentence Seo Sharepoint Software Spellings Spotting Spring Sql Sqlite Sqoop Svn Swift Synonyms Talend Testng Types Uml Unity Vbnet Verbal Webdriver What Wpf