Listas HTML
Tenemos dos tipos de listas en HTML:
No ordenadas
Ordenadas
<h2>No ordenada</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h2>Ordenada</h2>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol> Resultado:
No ordenada
- HTML
- CSS
- JavaScript
Ordenada
- HTML
- CSS
- JavaScript
Listas no ordenadas
Una lista no ordenada en HTML se hace usando la etiqueta <ul>. Y cada elemento dentro de ella son etiquetas <li>.
Listas no ordenadas - marcador
Con la propiedad de CSS list-style-type podemos cambiar el marcador de cada elemento de la lista
disc: es un círculo rellenocircle: es una circunferenciasquare: es un cuadradonone: no sale marcador
Listas ordenadas
Una lista ordenada en HTML se hace usando la etiqueta <ol> y los elementos de dentro de ella usan la etiqueta <li>
Listas ordenadas - atributo type
El atributo type se usa para definir el marcador.
type=”1”: Con números (es la opción por defecto)type=”A”: Con letras mayúsculastype=”a”: Con letras minúsculastype=”I”: Con números romanos en mayúsculastype=”i”: Con números romanos en minúsculas
Listas de descripción
HTML también admite listas de descripción.
Una lista de descripción es una lista de términos, con una descripción de cada término.
La etiqueta <dl> define la lista de descripción, la etiqueta <dt> define el término (nombre) y la etiqueta <dd> describe cada término:
<dl>
<dt>HTML</dt>
<dd>Lenguaje de marcado</dd>
<dt>CSS</dt>
<dd>Lenguaje de estilos</dd>
</dl>Listas anidadas
Las listas pueden anidarse (meter listas dentro de listas).
<ul>
<li>Lenguaje de marcado</li>
<li>Lenguaje de programación
<ul>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</li>
<li>Lenguaje de estilos</li>
</ul>Resultado:
- Lenguaje de marcado
- Lenguaje de programación
- JavaScript
- PHP
- Lenguaje de estilos
Control del conteo en la lista
Por defecto una lista ordenada empieza por el número 1, pero esto se puede cambiar usando el atributo start.
Lista horizontal con CSS
Con CSS se le pueden dar muchos estilos a las listas, pero uno muy común es hacer una lista en horizontal (por ejemplo para un menú)
