¿Cómo crear una lista con indexación de números romanos en HTML?

En este artículo, vamos a crear una lista con indexación de números romanos. En HTML, una lista es un registro de piezas cortas de información, como nombres de personas, generalmente escritas o impresas con una sola cosa en cada línea y ordenadas de una manera que hace que una cosa en particular sea fácil de encontrar. 

Enfoque: Hay diferentes tipos de listas en HTML. Uno de ellos es Lista ordenada u ol. La lista ordenada usa la etiqueta <ol>. Para crear una lista ordenada con indexación de números romanos, usaremos el tipo de atributo . El atributo de tipo de la etiqueta <ol> define el tipo de numeración de los elementos de la lista. El valor predeterminado del atributo de tipo en la lista ordenada es número. Entonces, por ejemplo, si queremos la lista con alfabetos, simplemente le damos el valor «a» al atributo de tipo. De manera similar, para crear una lista con indexación de números romanos, debemos proporcionar el primer valor de número romano al atributo de tipo. 

Sintaxis:

<ol type="I">

A continuación se muestra la implementación del enfoque anterior.

Ejemplo 1: En este ejemplo, crearemos una lista con indexación de números romanos en mayúsculas. Para eso, proporcionaremos valor de tipo de atributo a «I».

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
        h2 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h2>Ordered List with Roman Numbers</h2>
    <ol type="I">
        <li>HTML</li>
        <li>CSS</li>
        <li>JAVA</li>
        <li>SASS</li>
    </ol>
</body>
  
</html>

Producción:

GFG

Ejemplo 2: Ahora crearemos una lista con indexación de números romanos en minúsculas. Todo el código será el mismo que antes, solo cambiaremos el valor del atributo de tipo de «I» a «i» ahora.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
        h2 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h2>
        Ordered List with LowerCase 
        Roman Numbers
    </h2>
      
    <ol type="i">
        <li>HTML</li>
        <li>CSS</li>
        <li>JAVA</li>
        <li>SASS</li>
    </ol>
</body>
  
</html>

Producción:

GFG

Publicación traducida automáticamente

Artículo escrito por archnabhardwaj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *