El lenguaje HTML nos ofrece la posibilidad de insertar listas ordenadas de forma específica, las cuales siguen un orden estricto.
Las listas ordenadas siempre comienzan por la etiqueta <ol> y terminan con el cierre </ol>.
Cada elemento insertado en la lista está marcado por la etiqueta <li>, y su pareja de cierre </li>.
Esta es la sintaxis que sigue una simple lista:
<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
</ol>
Y este es el resultado:
1. Uno
2. Dos
3. Tres
4. Cuatro
La etiqueta <ol> tiene dos atributos: start y type.
El artibuto start indica el elemento en el cual comienza la numeración.
Por ejemplo, en esta lista estamos indicando que se debe empezar a contar desde el número 4:
<ol start="4">
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
</ol>
Y obtenemos esto:
4. Uno
5. Dos
6. Tres
7. Cuatro
La propiedad type, por el contrario, indica el símbolo a mostrar en cada elemento de la lista.
Podemos elegir entre:
Números: 1, 2, 3, 4...
Números romanos: I, II, III, IV...
O letras (mayúsculas o minúsculas): A, B, C, D...
Ambos atributos se incluyen en las listas de esta manera:
<ol type="A" start="1">
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
</ol>
Y el resultado, en este caso es esto:
A. Uno
B. Dos
C. Tres
D. Cuatro
También es posible crear listas que contengan otras listas en su interior.
En este caso voy a realizar esta lista:
A. Perros
B. Gatos
1. Siameses
2. Persas
C. Aves
Y para ello debo seguir esta estructura:
<ol start="1" type="A">
<li>Perros</li>
<li>Gatos</li>
<ol start="1" type="1">
<li>Siameses</li>
<li>Persas</li>
</ol>
<li>Aves</li>
</ol>
Si te fijas, hay una lista "General" (marcada en naranja) con la etiqueta <ol start="1" type="A"> y su cierre </ol>.
Dentro de la lista general, encontramos una lista "Secundaria" (marcada en verde) con la etiqueta <ol start="1" type="1"> y su cierre </ol>.
Notas:
produce un salto de línea, dejando una línea en medio (similar al de la etiqueta <p>), tanto al principio como al final de la lista.
- Por otro lado, la etiqueta <li> provoca un salto de línea sin dejar una entre medias, como sucede con la etiqueta <br>.
¡Qué cosas tan interesantes nos enseñas! Sigo todas tus actualizaciones, porque nunca dejas de sorprenderme.
Millones de gracias.
Y Felices Fiestas, amigo. Que el próximo año venga cargadito con todo eso que deseas.
Un abrazo enorme
En estos días aprenderemos a crear todo tipo de listas, Ángeles Ibirika ^_^.
Millones de gracias a tí por comentar.
Igualmente, ¡te deseo una maravillosa Navidad y un bello año nuevo!
Abrazo gigantesco ☺.
Claro, vendría a ser como una sublista, muy bueno...
Exácto Ascesino96, y dentro de esa sub-lista se puede volver a poner otra lista, de manera que la lista general tiene varios subniveles.
Hola Jaime!
Que interesante! Eso quiere decir que en las etiquetas se puede ver la lista de entradas que hay?
Por cierto, lo de el menú lo dejaré, y además no quiero molestarte más.
Ah! En el blog de Navidad he puesto una receta típica para estas fiestas!
Feliz Navidad!
Marcus, ¿Te refieres a si es posible hacer un índice con la lista general de las etiquetas y debajo de cada una, los títulos de las entradas?
En cuanto a lo del menú... es tu decisión pero debes saber que a mi no me molestas (me encanta ayudar) ;).
Me pasaré a ver esa receta navideña.
¡Felices fiestas!
Hola Jaime!
Mira yo quiero decir que si dándole a una estiqueta, te salen los posts, publicados de esa etiqueta, y puedes seleccionar para leer cada uno.
Marcus, ese truco debe hacerse de forma distinta y no se utilizan las listas ordenadas.
Puede que más adelante publique la forma de hacerlo ;).