Primeros pasos con HTML – Lección 3 – Etiquetas de listas ul, ol. Atributos de las etiquetas HTML
Muy a menudo en los sitios web se utilizan listas: en menús, en texto para enumerar elementos. Comencemos con el tipo de lista más popular, la lista no ordenada <ul></ul> (unordered list – lista no ordenada).
Lista UL
La lista UL se utiliza para menús y listas con viñetas; mediante HTML podemos especificar el tipo de marcador.
Vamos a modificar nuestro código HTML:
<html>
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
<h1>Mi primer documento HTML</h1>
<ul>
</ul>
</body>
</html>
En el documento solo verá el encabezado, porque la lista está vacía. Añadamos elementos con la etiqueta <li></li> (list item – elemento de lista):
<html>
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
<h1>Mi primer documento HTML</h1>
<ul>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ul>
</body>
</html>
Ahora veremos una lista con viñetas. Podemos cambiar el marcador usando atributos de la etiqueta <ul>.
Atributos de etiquetas HTML
Como se mencionó, la etiqueta UL tiene atributos; todas las etiquetas HTML pueden tenerlos. Un atributo controla la apariencia o el comportamiento del elemento. Para UL podemos usar el atributo type para definir la forma del marcador: círculo, cuadrado, disco.
Los atributos tienen la forma:
<etiqueta atributo="valor">
Por ejemplo, para listar con cuadrados:
<html>
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
<h1>Mi primer documento HTML</h1>
<ul type="square">
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ul>
</body>
</html>
Y con círculos:
<html>
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
<h1>Mi primer documento HTML</h1>
<ul type="circle">
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ul>
</body>
</html>
También podemos variar el marcador por elemento:
<html>
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
<h1>Mi primer documento HTML</h1>
<ul>
<li type="disc">Primer elemento</li>
<li type="square">Segundo elemento</li>
<li type="circle">Tercer elemento</li>
</ul>
</body>
</html>
Por defecto, UL y LI usan type="disc" (disco).
Listas OL
La etiqueta OL (ordered list – lista ordenada) se usa cuando necesitamos numerar pasos, cronologías u objetos. Funciona igual que UL, pero con números:
<html>
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
<h1>Mi primer documento HTML</h1>
<ol>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ol>
</body>
</html>
Como UL, OL admite el atributo type con estos valores:
type="A"– letras mayúsculas (A, B, C…);type="a"– letras minúsculas (a, b, c…);type="I"– números romanos mayúsculos (I, II, III…);type="i"– números romanos minúsculos (i, ii, iii…);type="1"– números arábigos (1, 2, 3…), valor predeterminado.
Por ejemplo, lista con numeración romana minúscula:
<html>
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
<h1>Mi primer documento HTML</h1>
<ol type="i">
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
<li>Cuarto elemento</li>
</ol>
</body>
</html>