Las listas son de gran utilidad en HTML, no sólo como elemento organizativo, sino también porque con un poco de CSS podemos crear fácilmente menús de navegación elegantes con ellas.
Existen dos tipos de listas, las listas ordenadas o numeradas y las desordenadas, en las que aparece una viñeta delante de cada elemento.
Índice de contenidos del artículo
Este elemento HTML es útil para numerar cosas.
El siguiente ejemplo muestra una lista ordenada con tres nombres de libros:
<html>
<head>
</head>
<body>
<ol>
<li>SEO curso práctico</li>
<li>Don quijote de La Mancha</li>
<li>La catedral del mar</li>
</ol>
</body>
</html>La etiqueta es <ol> y su cláusula de cierre es </ol>
En su interior, cada uno de los elementos ordenados se agregan con la etiqueta li, que también tiene cláusula de inicio y fin.
El navegador se ocupa de numerar cada uno de los elementos contenidos en la lista.
Para recordar el nombre de estos elementos HTML:
<ol> de ordened list
<li> de list itemRecuerda que los elementos de las listas son de bloque desde el punto de vista del diseño y que además, dentro podemos meter lo que queramos. Img, tablas, etc.
Una lista no ordenada no utiliza un número delante de cada elemento, sino una pequeña viñeta.
La forma de crear este tipo de listas es igual a las listas ordenadas.
<html>
<head>
</head>
<body>
<h2>Lenguajes de programación.</h2>
<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>C#</li>
</ul>
</body>
</html>Para recordar el nombre de esta etiqueta HTML:
<ul> de unordered list
A continuación uno de los ejemplos anteriores al que se han agregado listas al final:
al colocar mas de 300 datos en la lista se comienza a trabar al recorrerla como puedo solucionar eso?
Hola Jose. ¿Dónde estás editando el Código? ¿Se queda trabado el editor o la web al visualizar?