Saltar al contenido

Listas ordenadas y desordenadas en HTML

12 julio, 2019
Aprender√°s todo acerca de las ‚≠ź LISTAS en HTML ‚úÖ (y cambiar las VI√ĎETAS): abordaremos las ORDENADAS y las DESORDENADAS con EJEMPLOS CLAROS. ‚≠ź ¬°ENTRA!

En este post aprender√°s todo lo que necesitas saber acerca de las listas en HTML y c√≥mo cambiar las vi√Īetas de las mismas: abordaremos las ordenadas y las desordenadas con EJEMPLOS CLAROS. ¬°ENTRA!

INICIAMOS:

Bienvenidos a otro post.

Como sabemos, el HTML es la estructura o esqueleto de todo sitio web, es la base que sostiene todo lo que t√ļ ves; todo el dise√Īo y forma del sitio est√° estructurado gracias a HTML.

Dentro de los procesos de texto que podemos hacer con este lenguaje de maquetado son las listas, tanto desrdenadas como las ordenadas. Podemos decirle al HTML que cambie incluso las vi√Īetas, cosa que igual te ense√Īaremos.

En esta lecci√≥n conocer√°s todo lo relacionado con el uso de las listas en una p√°gina web, ya que √©stas se usan para crear enumeraciones, diccionarios, men√ļs entre otras cosas m√°s.

Recomendación
Te recomendamos que para gestionar tu proyecto HTML utilices el programa Sublime Text. Este te organiza y clarifica la información y código introducido.

Las listas en el HTML

En el orden de la informaci√≥n, las listas juegan un papel muy importante, ya que en los procesos de texto se requieren para el desarrollo no s√≥lo de literal listas, sino que tambi√©n pueden emplearse para crear incre√≠bles men√ļs usando CSS, entre otras cosas m√°s.

Prepárate para abordar el tema de las listas ordenadas y desordenadas del HTML, ya que te mostraremos con ejemplos claros cómo crear ambos tipos de listas. ¡Vamos!

Listas desordenadas

Primero, mencionar que para definir que vamos a hacer una lista desordenada, debemos hacer uso de la etiqueta llamada “ul“: su etiqueta de apertura es <ul> y su cierre </ul>.

Dentro de esta, todos los elemento de la lista tienen que ir dentro de la etiqueta “ul”, y para definir cada uno de los elementos se utilizar√° la etiqueta “li“. Veamos un ejemplo claro:

<p>Lista con elementos desordenados</p>
<ul>
  <li>Uno</li>
  <li>Dos</li>
  <li>Tres</li>
</ul>

Como ver√°s, para agregar un punto dentro de esta lista se deber√°s utilizar la etiqueta <li> y para su cierre </li>.

Lo que caracteriza a estas listas es que no llevan un contador sino esta compuesto por puntos, este tipo de listas las podemos configurar para que proporcione diferentes tipos de símbolos como cuadrados y círculos sin fondo.

Listas desordenadas b√°sicas.
Listas desordenadas b√°sicas.

Si quieres elegir el tipo de vi√Īetas que tendr√° la lista desordenada de tu HTML o alg√ļn elemento de esta, debes colocar el atributo “type” dentro de la etiqueta. Ejemplo:

<ul>
  <li type="circle">Vi√Īeta con c√≠rculo sin fondo.</li>
  <li type="square">Vi√Īeta cuadrada.</li>
  <li type="disc">Vi√Īeta con c√≠rculo con fondo negro.</li>
</ul>

También puedes anexar una lista ya sea ordenada o desordenada dentro de tu lista actual, y ahora tendrá una tabulación con respecto a esa lista:

<p>Lista con elementos desordenados</p>
<ul>
  <li>Uno</li>
  <li>Dos</li>
     <ul>
       <li>Segundo uno</li>
       <li>Segundo dos</li>
     </ul>
  <li>Tres</li>
</ul>

Listas ordenadas

Primero, para poder definir una listas ordenadas en HTML, debemos hacer uso de las etiquetas <ol> con su cierre </ol>; igual que las listas desordenadas, para agregar un punto dentro de esta lista su etiqueta es <li> y su terminación </li>.

Te recomendamos:  C√≥digos HTML √ļtiles que desear√°s a√Īadir en tu web

En este caso los puntos que agregues ser√°n enumerados, d√°ndole a cada nuevo punto un orden, la ventaja de utilizar este tipo de lista es que se puede cambiar el n√ļmero de un punto con el atributo “value=N√ļmero” y depende el n√ļmero, la lista seguir√° su curso desde el numero colocado.

Si no le colocas ese atributo dentro de tu etiqueta HTML, la lista por defecto empezar√° desde el n√ļmero 1.

Ejemplo b√°sico de listas ordenadas en HTML.
Ejemplo b√°sico de listas ordenadas en HTML.

Si quieres indicarle un inicio de n√ļmero en tus listas de tu HTML, te dejamos un ejemplo para que veas c√≥mo podr√≠a estar estructurado.

<ol>
  <li value="5">Ordenado 1 (pero que indicamos que comience en 5</li>
  <li>Ordenado 2 (salta a ser 6)</li>
  <li>Ordenado 3 (salta a ser 7)</li>
</ol>

También puedes cambiar el tipo de numeración, y puedes elegir entre numeración romana, alfabética o la que tiene por defecto: numérica.

Si deseas cambiarlo, debes de colocar el atributo “type” en la etiqueta inicio de tu lista ordenada. Puedes escoger entre 5 valores distintos:

  • type=”a” (numeraci√≥n alfab√©tica min√ļscula).
  • type=”A” (numeraci√≥n alfab√©tica may√ļscula).
  • type=”i” (numeraci√≥n romana min√ļscula).
  • type=”I” (numeraci√≥n romana may√ļscula).
  • type=”1″ (numeraci√≥n por n√ļmeros).

Tambi√©n en el mismo ol podemos indicarle a HTML en qu√© n√ļmero quieres que inicie la lista ordenada usando el atributo “start”.

Te dejamos un ejemplo √ļtil de c√≥mo podr√≠as implementar las listas desordenadas en HTML:

<!-- Lista ordenada que tendrá numeración alfabética iniciando desde la letra "c" (start = 3). -->
<ol type="a" start="3">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  <ol type="1">
    <li>Sub-elemento 1</li>
    <li>Sub-elemento 2</li>
  </ol>
  <li>Elemento 4</li>
</ol>

Espero que este post haya sido de tu agrado y que hayas aprendido.

Antes de concluir el artículo, me gustaría hacerte mención de los anteriores temas del HTML que quizá te puedan ser de mucho interés:

Si deseas m√°s detalles interesantes sobre el lenguaje de maquetado HTML, te invito a adentrarte a nuestra p√°gina llena de temas interesantes.

¬ŅPudiste comprender las listas ordenadas y desordenadas del HTML? ¬°Haznoslo saber en la caja de comentarios!

Nos vemos en otro post.