Home >Web Front-end >HTML Tutorial >How to create a list indexed in roman numerals in HTML

How to create a list indexed in roman numerals in HTML

WBOY
WBOYforward
2023-09-13 21:37:021485browse

How to create a list indexed in roman numerals in HTML

Overview

Indices are numbers that indicate the position or location of a sentence. In HTML, we can index in two ways: unordered list (ul) and ordered list (li). Use

    tag in HTML to create a list with Roman numerals, Roman numerals are numbers written in order, so we use ordered list instead of unordered list. To create an ordered list with Roman numerals, we need to define the type of the ordered list, i.e. the index in the list should be 'a', 'A', 'I' or 'i'. So, to create Roman numerals, we define the types of ordered lists as 'I' and 'i'.

    grammar

    For indexing using Roman numerals in HTML we use the following syntax -

    <ol type="">
       <li></li>
       <li></li>
    </ol>
    
    • ol − It is an ordered list and is the parent container of the list.

    • type − The type attribute is defined to set the type of the list index.

    • li − It is a list containing the data to be inserted into the list. The list tag

    • is a sub-tag of the ordered list tag
        .

    method

    Since Roman numerals are defined as I, II, III, IV or i, ii, iii, iv. So we will use two examples to learn how to create a list by defining the type of an ordered list as 'I' or 'i'.

    algorithm

    Step 1 - Create an HTML boilerplate in your text editor.

    Step 2 - Create a parent container as

    and define its type as 'i'.

    <ol type="i"></ol>
    

    Step 3 - Create the sub-element li of the ordered list.

    <li></li>
    

    Step 4 Insert the data into it.

    <li>Frontend Articles</li>
    <li>Backend Articles</li>
    <li>UI/UX Articles</li>
    

    Step 5 The Roman numeral index is ready.

    The Chinese translation of

    Example

    is:

    Example

    In this example, we discussed building a list of Roman numerals. We define the type of ordered list as "i" (lowercase i).

    <html>
    <head>
       <title>Roman number indexing as i</title>
    </head>
    <body>
       <h1> Points to remember ol type= “i” </h1>
       <ol type="i">
          <li>Frontend Articles</li>
          <li>Backend Articles</li>
          <li>UI/UX Articles</li>
       </ol>
    </body>
    </html>
    

    The given below image shows the output of the example in which we had set the type of ordered list “small i”, so the bullets or indexing in the below points are as i, ii, iii.

    algorithm

    Step 1 - Create an HTML boilerplate in your text editor

    Step 2 - Create a parent container as

      and define its type as 'i'.

      <ol type="i"></ol>
      

      Step 3 - Create the sub-element li of the ordered list.

      <li></li>
      

      Step 4 - Insert data into it.

      <li>Frontend Articles</li>
      <li>Backend Articles</li>
      <li>UI/UX Articles</li>
      

      Step 5 - Roman numeral index is ready.

      The Chinese translation of

      Example

      is:

      Example

      In this example, we discussed building a list of Roman numerals. We define the type of ordered list as "I" (capital I).

      <html>
      <head>
         <title>Roman number indexing as I</title>
      </head>
      <body>
         <h1>Points to remember <ol type= “I”></h1>
         <ol type="I">
            <li>Frontend Articles</li>
            <li>Backend Articles</li>
            <li>UI/UX Articles</li>
         </ol>
      </body>
      </html>
      

      The image below shows the output of Example 2 below, where the type of the ordered list is set to "Capital I" and the Roman numerals are numbered as follows: I, II, III .

      in conclusion

      In an ordered list, we can set many types of lists. Lists can be set up in numerical order, alphabetical order, and Roman numeral order, like the one we used in the example above. Ordered lists provide a systematic representation of data, enhance user experience, and make data sets easy to understand.

The above is the detailed content of How to create a list indexed in roman numerals in HTML. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete