¿Qué es el anidamiento de la lista y cómo crear la lista anidada en HTML?

Una lista es un registro de piezas cortas de información relacionada que se utiliza para mostrar los datos o cualquier información en las páginas web en forma ordenada o desordenada. Por ejemplo, para comprar los artículos, necesitamos preparar una lista que puede ser ordenada o desordenada, lo que nos ayuda a organizar los datos y facilitar la búsqueda del artículo.

En este artículo, discutiremos una lista anidada en HTML.

Estas etiquetas se utilizan en la lista HTML .

Lista desordenada de HTML : una lista desordenada comienza con la etiqueta «ul». Cada elemento de la lista comienza con la etiqueta «li». Los elementos de la lista están marcados con viñetas, es decir, pequeños círculos negros de forma predeterminada.

Sintaxis :

<ul> ....</ul>

Valores de atributo: esta etiqueta contiene dos atributos que se enumeran a continuación.

  • compact : Reducirá la lista.
  • type : Especifica qué tipo de marcador se usa en la lista.

Nota: los atributos <ul> no son compatibles con HTML5.

Ejemplo : este ejemplo muestra una lista desordenada anidada. Se utiliza para anidar los elementos de la lista, es decir, una lista dentro de otra lista.

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Nested Unordered List</h2>
    <p>GeeksforGeeks courses list:</p>
  
    <ul>
        <li>DSA</li>
        <ul>
            <li>Array</li>
            <li>Linked List</li>
            <li>stack</li>
            <li>Queue</li>
        </ul>
        <li>Web Technologies</li>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
        <li>Aptitude</li>
        <li>Gate</li>
        <li>Placement</li>
    </ul>
</body>
</html>

Producción:

Lista ordenada HTML : una lista ordenada comienza con la etiqueta «ol». Cada elemento de la lista comienza con la etiqueta «li». Los elementos de la lista están marcados con números de forma predeterminada.  

Sintaxis :

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Valores de atributo :

  • compacto : define que la lista debe compactarse (el atributo compacto no es compatible con HTML5. En su lugar, use CSS).
  • invertido : Define que el orden será descendente.
  • start : Define el número o alfabeto de inicio de la lista de pedidos.
  • type : Define qué tipo (1, A, a, I, i) del orden quieres en tu lista de números numéricos, alfabéticos o romanos.

Ejemplo: El siguiente ejemplo muestra una lista ordenada anidada.

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Nested Ordered List</h2>
    <ol>
        <li>Coffee</li>
        <li> Tea
            <ol>
                <li>Black tea</li>
                <li>Green tea</li>
            </ol>
        </li>
        <li>Milk</li>
    </ol>
</body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por bhanusivanagulug 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 *