Logotipo horizontal de Diego C Martín colores invertidos, blanco y naranja para findo negro

Cómo crear listas en HTML

Categorías:  Autor: Diego C Martin 
Apuntes de HTML

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.

Listas ordenadas

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 item

Recuerda 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.

Listas no ordenadas <ul>

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:

Echa un vistazo al Curso Online de HTML5

Aquí puedes ver algunas clases del Curso de HTML5 gratis.

2 comments on “Cómo crear listas en HTML”

Responder a Diego C Martin Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Artículos de la misma categoría

crossmenu
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram