HTML5: Listas

Lista de HTML sin ordenar

Una lista desordenada comienza con la etiqueta <ul>. Cada elemento de la lista comienza con la etiqueta <li>.
Los elementos de la lista se marcarán con viñetas (círculos negros pequeños) de forma predeterminada:

  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
Vista en navegador del ejemplo anterior






Lista de HTML sin ordenar: elija estilo de marcador de elemento de lista

La propiedad list-style-type CSS se usa para definir el estilo del marcador de elemento de lista:

  • disc - Establece el marcador del elemento de lista en una viñeta (valor predeterminado).
  • circle - Establece el marcador del elemento de lista en un círculo.
  • square - Establece el marcador de elemento de lista en un cuadrado.
  • none - Los elementos de la lista no se marcarán.

Ejemplo: disc

  <ul style="list-style-type:disc">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
Vista en navegador del ejemplo anterior





Ejemplo: circle

  <ul style="list-style-type:circle">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
Vista en navegador del ejemplo anterior





Ejemplo: square

  <ul style="list-style-type:square">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
Vista en navegador del ejemplo anterior





Ejemplo: none

  <ul style="list-style-type:none">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
Vista en navegador del ejemplo anterior






Lista ordenada de HTML

Una lista ordenada comienza con la etiqueta <ol>. Cada elemento de la lista comienza con la etiqueta <li>.
Los elementos de la lista se marcarán con números de forma predeterminada:

  <ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>
Vista en navegador del ejemplo anterior





Lista HTML ordenada: el atributo de tipo

El atributo type de la etiqueta <ol> define el tipo de marcador de elemento de lista:
  • type = "1" - Los elementos de la lista se numerarán con números (valor predeterminado).
  • type = "A" - Los elementos de la lista se numerarán con letras mayúsculas.
  • type = "a" - Los elementos de la lista se numerarán con letras minúsculas.
  • type = "I" - Los elementos de la lista se numerarán con números romanos en mayúsculas.
  • type = "i" - Los elementos de la lista se numerarán con números romanos en minúsculas.

Ejemplo: números

  <ol type="1">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>
Vista en navegador del ejemplo anterior





Ejemplo: letras mayúsculas

  <ol type="A">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>
Vista en navegador del ejemplo anterior





Ejemplo: letras minúsculas

  <ol type="a">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>
Vista en navegador del ejemplo anterior





Ejemplo: números romanos en mayúsculas

  <ol type="I">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>
Vista en navegador del ejemplo anterior





Ejemplo: números romanos en minúsculas

  <ol type="i">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>
Vista en navegador del ejemplo anterior





Listas de descripción HTML

HTML también es compatible con 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>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>
Vista en navegador del ejemplo anterior






Listas HTML anidadas

La lista se puede anidar (listas dentro de listas):

  <ul>
    <li>Coffee</li>
    <li>Tea
      <ul>
        <li>Black tea</li>
        <li>Green tea</li>
      </ul>
    </li>
    <li>Milk</li>
  </ul>
Vista en navegador del ejemplo anterior








Nota: Los elementos de la lista pueden contener una lista nueva y otros elementos HTML, como imágenes y enlaces, etc.

Contando la lista de control

De forma predeterminada, una lista ordenada comenzará a contar desde 1. Si desea comenzar a contar desde un número específico, puede usar el atributo start:

  <ol start="50">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>
Vista en navegador del ejemplo anterior





Lista horizontal con CSS

Las listas HTML se pueden diseñar de muchas formas diferentes con CSS.
Una forma popular es diseñar una lista horizontalmente para crear un menú de navegación:

  <!DOCTYPE html>
  <html>
    <head>
      <style>
        ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
          background-color: #333333;
        }

        li {
          float: left;
        }

        li a {
          display: block;
          color: white;
          text-align: center;
          padding: 16px;
          text-decoration: none;
        }

        li a:hover {
          background-color: #111111;
        }

      </style>
    </head>
    <body>

      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
      </ul>

    </body>
  </html>
Vista en navegador del ejemplo anterior




Resumen del capítulo

  • Use el elemento HTML <ul> para definir una lista desordenada.
  • Utilice la propiedad list-style-type de CSS para definir el marcador de elemento de lista.
  • Utilice el elemento HTML <ol> para definir una lista ordenada.
  • Use el atributo type HTML para definir el tipo de numeración.
  • Use el elemento HTML <li> para definir un elemento de lista.
  • Use el elemento HTML <dl> para definir una lista de descripción.
  • Use el elemento HTML <dt> para definir el término de la descripción.
  • Use el elemento HTML <dd> para describir el término en una lista de descripción.
  • Las listas se pueden anidar dentro de las listas.
  • Los elementos de lista pueden contener otros elementos HTML.
  • Utilice el flotador de la propiedad CSS: float:left o display:inline para mostrar una lista horizontalmente.

¡Ponte a prueba con ejercicios!

Comentarios

Publicar un comentario

Entradas populares de este blog

HTML5: Elementos de bloque HTML y elementos en línea

Cada elemento HTML tiene un valor de visualización predeterminado según el tipo de elemento que sea. El valor de visualización predeterminado para la mayoría de los elementos es bloque o en línea. Elementos de nivel de bloque Un elemento de nivel de bloque siempre comienza en una nueva línea y ocupa todo el ancho disponible (se extiende hacia la izquierda y hacia la derecha todo lo que puede). Esto es un elemento de bloque  <div>   < div > Hello < /div > Elementos a nivel de bloque en HTML: < address > < article > < aside > < blockquote > < canvas > < dd > < div > < dl > < dt > < fieldset > < figcaption > < figure > < footer > < form > < h1 > - < h6 > < header > < hr > < li > < main > < nav > < noscript > < ol > < output > < p > < pre > < se...
Leer más

HTML5: Iframes

Un iframe se usa para mostrar una página web dentro de una página web. Sintaxis iframe Un iframe HTML se define con la etiqueta  <iframe> :   < iframe  src =" URL " > < /iframe > El atributo  src  especifica la URL (dirección web) de la página de marco en línea. Iframe - Establecer altura y ancho Use los atributos  height  y  width  para especificar el tamaño del iframe. Los valores de los atributos se especifican en píxeles de forma predeterminada, pero también pueden estar en porcentaje (como "80%").   < iframe  src ="demo_iframe.htm"  height ="200"  width ="300" > < /iframe > O puede usar CSS para establecer el alto y el ancho del iframe:   < iframe  src ="demo_iframe.htm"  style ="height:200px;width:300px;" > < /iframe > Aunque lo más idoneo es establecer tanto el alto como el ancho mediante código CSS externo. Iframe - Eliminar el borde ...
Leer más

HTML5: Estilos HTML - CSS

Imagen
Estilo HTML con CSS CSS significa Hojas de Estilo en Cascada. CSS describe cómo los elementos HTML se mostrarán en la pantalla, papel o en otros medios. CSS ahorra mucho trabajo. Puede controlar el diseño de múltiples páginas web a la vez. CSS se puede agregar a los elementos HTML de 3 maneras: En línea: utilizando el atributo de estilo en elementos HTML. Interno: utilizando un elemento  <style>  en la sección <head> Externo: utilizando un archivo CSS externo. La forma más común de agregar CSS es mantener los estilos en archivos CSS separados. Sin embargo, aquí utilizaremos el estilo en línea e interno, porque es más fácil de demostrar y más fácil de probar. Aprenderemos mucho más sobre CSS en un futuro tutorial más adelante. CSS en línea Un CSS en línea se usa para aplicar un estilo único a un solo elemento HTML. Un CSS en línea usa el atributo de estilo de un elemento HTML. Este ejemplo establece el color del texto del elemento  <h1...
Leer más

HTML5: Comentarios

Las etiquetas de comentarios se utilizan para insertar comentarios en el código fuente HTML. Etiquetas de comentarios HTML Puede agregar comentarios a su fuente HTML usando la siguiente sintaxis:   <!-- Escribe tu comentario aqui --> Observe que hay un signo de admiración (!) En la etiqueta de apertura, pero no en la etiqueta de cierre. Nota: el navegador no muestra los comentarios, pero pueden ayudarlo a documentar su código fuente HTML. Con los comentarios, puede colocar notificaciones y recordatorios en su HTML:   <!-- Esto es un comentario -->   < p > Esto es un párrafo. < /p >   <!-- Recuerda añadir más información aquí --> Los comentarios también son excelentes para la depuración de HTML, ya que puede comentar las líneas de código HTML, una a la vez, para buscar errores:   <!-- Do not display this at the moment   <img border="0" src="pic_mountain.jpg" alt="Mountain">   --> ¡Ponte a...
Leer más

HTML5: Enlaces

Los enlaces se encuentran en casi todas las páginas web. Los enlaces permiten a los usuarios hacer clic en el camino de una página a otra. Enlaces HTML - Hipervínculos Los enlaces HTML son hipervínculos. Puede hacer clic en un enlace y saltar a otro documento. Cuando mueva el mouse sobre un enlace, la flecha del mouse se convertirá en una pequeña mano. Nota: un enlace no tiene que ser texto. Puede ser una imagen o cualquier otro elemento HTML. Enlaces HTML - Sintaxis En HTML, los enlaces se definen con la etiqueta  <a> . La sintaxis es la siguiente:   < a  href =" url " > link text < /a >   < a  href ="https://aprendedesarrollo-web.blogspot.com.es" > Visita nuestra web < /a > El atributo  href  especifica la dirección de destino ( https://aprendedesarrollo-web.blogspot.com.es ) del enlace. El texto del enlace es la parte visible (Visita nuestra web). Al hacer clic en el texto del enlace, se lo enviará a l...
Leer más