Introducción al Desarrollo 

Web: HTML y CSS 

HTML: listas 

Vídeo:​ h​ ttp://youtu.be/V2ImdQdPqNE 
 
Hola,  soy  Sergio  Luján  Mora,  profesor  de  informática  de  la  Universidad  de  Alicante,  y  en  este 
vídeo  que  forma  parte  del  curso  “Introducción  al  desarrollo  web”,  te  voy  a  explicar  cómo  se 
escriben las listas en HTML. 
 
El  lenguaje  HTML,  ya  sea  la  versión  HTML4  o  la  versión  HTML5,  posee  tres tipos de listas. Las 
listas no ordenadas, las listas ordenadas y las listas de descripción. 
 
Cada  una  de  estas  listas  se  crea  con  una  etiqueta  específica  de  HTML:  <ul>  para  la  lista  no 
ordenada,  <ol>  para  la  lista  ordenada  y  <dl>  para  la  lista  de  descripción.  Los  elementos  de  las 
listas se definen de la siguiente forma. Para la lista no ordenada y la lista ordenada se emplea el 
elemento <li>. Para la lista de descripción se emplean los elementos <dt> y <dd>. 
 
Vamos a verlo con detalle: 
 
Ul  es  el  acrónimo  de  unordered  list,  lista  no  ordenada.  En  una  lista  no  ordenada,  el  orden  de 
aparición  de  los  elementos  no  es  importante.  Cada  elemento  de  la  lista  se  define  con  <li>, que 
es el acrónimo de list item. 
Los  elementos  de  la  lista  se  indican  con  símbolos,  como  círculos,  cuadrados  o  rombos.  Por 
ejemplo, todo esto es una lista no ordenada. 
En  el  siguiente  ejemplo,  a  la  izquierda  tenemos el código HTML que produce como resultado la 
lista no ordenada que aparece a la derecha. 
 
El  estilo  de  una  lista  se  puede  cambiar,  para  que  en  vez  de  un  círculo  relleno,  un  disco,  sea  el 
contorno del círculo o un rectángulo el elemento marcador. 
Antiguamente  existía  el  atributo  type  en  HTML  que  permitía  cambiar  el  estilo  de  una  lista  no 
ordenada.  Pero  ese  atributo  ahora  está  obsoleto  y  no  se  debe  de  usar.  En  su  lugar  se  debe 
emplear CSS, pero eso se verá en otro vídeo. 
 
Ol  es  el  acrónimo  de ordered list, lista ordenada. En una lista ordenada, el orden de aparición de 
los elementos es importante. Cada elemento de la lista se define con <li>, que es el acrónimo de 
list item. 
Los  elementos  de  la  lista  se  indican  con  números  o  letras.  Por  ejemplo,  todo  esto  es  una  lista 
ordenada. 
 
En  el  siguiente  ejemplo,  a  la  izquierda  tenemos el código HTML que produce como resultado la 
lista  ordenada  que  aparece  a  la  derecha.  Una  lista  ordenada  puede hacer uso de los siguientes 
atributos que modifican su comportamiento. 
 
En  HTML4  y  HTML5  se  puede  emplear  el  atributo  start  que  permite  indicar  el  valor  inicial en el 
que  debe  comenzar  la  lista.  También  está  el  atributo  type  que  permite  indicar  el  tipo  de 
numeración,  como  por  ejemplo  letras  o  números  romanos. En HTML5 se ha añadido el atributo 
booleano reversed, que permite indicar que la numeración debe ser descendente. 
 
En el siguiente ejemplo se muestran cinco listas ordenadas. 
En la primera lista simplemente se ha empleado la etiqueta <ol> para definir la lista ordenada. 
En  las  otras  cuatro  listas,  se  ha  empleado  el  atributo  type  para  modificar  la  numeración  de las 
listas:  letras  mayúsculas,  letras  minúsculas,  números  romanos  en  mayúsculas  y  números 
romanos en minúsculas. 
 
En  el  siguiente  ejemplo  se  muestra  el  uso  del  atributo  reversed  para  invertir  el  orden  de 
numeración  de  las  listas.  El  atributo  reversed  es  un  atributo  booleano, lo que significa que sólo 
puede  tomar  un  valor  que  es  el  mismo  nombre  del  atributo.  En  este  ejemplo  se  muestra  el 
efecto del atributo reversed combinado con el atributo type. 
 
Dl  es  el  acrónimo  de  description  list,  lista  de  descripción,  que  se  compone  de  términos.  Cada 
término puede poseer cero o más descripciones. Cada término de la lista se define con <dt>. 
Cada  descripción  de  un  término  se  define  con  <dd>.  Y  los  elementos  no  se  indican  con 
símbolos, números o letras, sino con un aumento del margen izquierdo, de la sangría izquierda. 
 
La  lista  de  descripción  se  emplea  normalmente  para  definir  un  glosario  o  un  diccionario.  En  el 
siguiente  ejemplo,  este  código  genera  la  lista  que  se  muestra  a  la  derecha.  Podemos  apreciar 
como las definiciones de cada término poseen una sangría o margen izquierdo. 
 
En  una  lista  de  descripción,  un  término  puede  tener  cero  o  varias  descripciones.  Por  ejemplo, 
este  código  genera  la  lista  de  descripción que se muestra en la parte superior de la pantalla. En 
esta  lista  de  descripción  hay  tres  términos,  el  primero  y  el  tercero  poseen  dos  descripciones, 
pero el segundo una sola descripción. 
 
Por último, en HTML también se pueden crear listas anidadas. 
 
Una  lista  anidada  es  simplemente  una  lista  dentro  de  otra,  y  se  pueden  combinar  de  cualquier 
forma. La lista que está dentro de otra se llama sublista.  
 
En  el  siguiente  ejemplo,  este  código  genera  la  lista  que  se  muestra  en  la  parte  superior  de  la 
imagen.  Esta  lista  posee  tres  niveles  de  anidamiento  y  está  formada  por  tres  listas  no 
ordenadas. En el primer nivel se emplea como símbolo un disco, en el segundo un círculo y en el 
tercero un cuadrado sólido. 
 
Y en este último ejemplo, se ha anidado una lista ordenada dentro de una lista no ordenada. A la 
derecha  se  muestra  el  resultado.  Ya  para  terminar, me gustaría recordarte algunos de los sitios 
web  en  los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de 
contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta 
en Twitter @sergiolujanmora. 
 
Recuerda  que  este  vídeo  forma  parte  del  curso  “Introducción  al  desarrollo  web”  que  está 
disponible en la dirección idesweb.es. 
 
Muchas gracias por tu atención. 
 
 
AVISO IMPORTANTE 
Este  documento,  su  texto  y  gráficos  e  imágenes,  puede  ser  utilizado  bajo  una  licencia  Creative  Commons  de  tipo 
Atribución,  No-Comercial.  En  caso  de  utilizarse  este  material  o  de  la  creación  de  un  derivado,  la  atribución  se  debe 
respetar  citando  la  fuente  como  “Actívate,  Google  España”  y  expresamente, si es posible, mediante un enlace activo 
​ ttp://google.es/activate​.  
a​ h