El texto es esencial en las páginas web, ya que les dice a tus usuarios de qué trata tu página.

Cuando agregas texto a tu página web, este dictará la dirección y la sensación de tu página web en función de tu idioma.

Por ejemplo, por defecto, el inglés se mueve de izquierda a derecha (LTR), mientras que el árabe se mueve de derecha a izquierda (RTL).

Pero la mayoría de las veces, no querrás que todo tu texto permanezca en una sola posición de tu pantalla o contenedor. Necesitarás algunos textos en el centro, algunos a la izquierda y otros a la derecha. Incluso podrías querer que el texto llene el ancho de tu página o contenedor.

Esto es similar a lo que haces cuando editas textos en Microsoft Word o Google Docs, utilizando los botones de alineación izquierda, derecha, centro y justificado.

También puedes hacer lo mismo en tus páginas web usando código.

Cómo se alineaba el texto al centro antes de HTML5

Antes de la introducción de HTML5, los desarrolladores realizaban estilos específicos con etiquetas HTML. Por ejemplo, podías usar la etiqueta center para alinear tu texto al centro, pero en HTML4, esta etiqueta quedó obsoleta. Aunque esto aún puede funcionar con algunos navegadores actuales, podría dejar de hacerlo en cualquier momento.

Así es cómo se ve:

<center>
  <h1> Welcome to freeCodeCamp </h1>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.</p>

  <h3>How we work</h3>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.</p>
</center>

Esto mostrará todo nuestro texto centrado en la página o el contenedor al que se aplica:

Pero ahora que tenemos HTML5, ya no usamos este método. Recuerda que es esencial manejar todos los estilos mediante CSS. Solo debes usar HTML para agregar el marcado de tu página web.

Cómo alinear texto en HTML5

Con CSS, tienes muchas opciones que puedes usar para alinear tu texto. La propiedad CSS principal que funciona bien con la alineación de texto es la propiedad text-align. Puedes usar esta propiedad para especificar la alineación horizontal del texto en un elemento.

Supongamos que tienes algo de texto en tu página web, por ejemplo:

<h1> Welcome to freeCodeCamp </h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.

  Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.</p>

<h3>How we work</h3>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.</p>

Puedes usar la propiedad text-align para mover el texto a la izquierda, derecha, centro o incluso justificar tu contenido, de forma que llene el elemento o la página web horizontalmente.

// Syntax

text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;

Si deseas alinear todo el texto de tu página web, puedes aplicar esta propiedad a cualquier etiqueta que contenga el texto, como las etiquetas div, heading, paragraph o body.

Antes de ver un ejemplo, exploremos las opciones/valores disponibles para esta propiedad.

• start: Esta se basa en la dirección. Cuando la dirección es de izquierda a derecha, start significaría izquierda. Si la dirección es de derecha a izquierda, entonces start significaría derecha.
• end: Esta también se basa en la dirección. Cuando la dirección es de izquierda a derecha, entonces end significaría derecha. Si la dirección es de derecha a izquierda, entonces end significaría izquierda.
• left: Usarás esta para alinear los textos al borde izquierdo de la página o contenedor.
• right: Usarás esta para alinear los textos al borde derecho de la página o contenedor.
• center: Usarás esta para alinear los textos al centro exacto de la página o contenedor.
• justify: Usarás esta para ajustar el contenido del texto a los bordes izquierdo y derecho de tu página o contenedor.

La sintaxis general sería:

selector {
  text-align: valor;
}

Cómo alinear texto a la izquierda

Podrías necesitar cambiar la alineación de tu texto a la izquierda si originalmente estaba en el lado derecho. Harás esto apuntando al selector y usando la propiedad text-align junto a left como su valor.

// HTML
<p> Bienvenido a freeCodeCamp </p>

// CSS
p {
  text-align: left;
}

Por ejemplo, si tienes tu contenido desde la derecha de tu pantalla usando la dirección RTL:

<html dir="rtl">
  <body>
    <h1> Welcome to freeCodeCamp </h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.
      
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.</p>
      
      <h3>How we work</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.</p>
  </body>
</html>

Esto mostrará:

Puedes dar estilo a la etiqueta body para alinear el texto de la página a la izquierda con left:

body {
  text-align: left;
}

Cómo alinear texto a la derecha

Por defecto, tu página web o el contenido en el contenedor y otros elementos comienzan desde la izquierda. Podrías querer alinear este contenido a la derecha, lo cual es posible usando la propiedad text-align con un valor right.

// HTML
<p> Bienvenido a freeCodeCamp </p>

// CSS
p {
  text-align: right;
}

Cómo alinear texto al centro

En lugar de usar la etiqueta center para mover nuestro contenido de texto al centro, ahora puedes usar la propiedad text-align junto al valor center .

// HTML
<p> Bienvenido a freeCodeCamp </p>

// CSS
p {
  text-align: center;
}

Cómo justificar texto

Si sabes cómo usar cualquier herramienta basada en texto como Microsoft Word o Google Docs, o herramientas como Photoshop, Figma y muchas más que manejan contenido, sabrás cómo funciona el icono de texto justificado.

Lo usarás para ayudar a que tu texto llegue hasta los bordes de una página/contenedor en lugar de tener algunos espacios desiguales innecesarios al final.

Esto no siempre es obvio, pero cuando miras profundamente los bordes, notarás la diferencia, lo cual tiene más sentido cuando tienes mucho texto y párrafos más largos.

Lo haces usando la propiedad text-align junto con justify como su valor:

// HTML
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.</p>

// CSS
p {
  text-align: center;
}

Resumen

En este artículo, has aprendido a alinear el texto de tu página web HTML usando la propiedad text-align de CSS.

¡Embárcate en un viaje de aprendizaje! Explora 200+ artículos de expertos sobre desarrollo web. Visita mi blog para obtener más contenido cautivador de mi parte.

Cuando agregas texto a tu archivo HTML con una etiqueta HTML, no siempre querrás que el texto permanezca con el tamaño predeterminado. También vas a querer ajustar cómo se muestra el texto en el navegador.

En este artículo, aprenderás cómo cambiar el tamaño del texto mediante una etiqueta HTML.

Antes de empezar, debes saber que solo hay una forma de hacer esto: a través de la propiedad font-size de CSS. Podemos usar la propiedad font-size a través del estilo inline, interno o externo.

En el pasado, podíamos ajustar el tamaño del texto dentro de nuestra etiqueta HTML sin usar CSS. Pero eso fue antes de HTML5. Entonces agregábamos texto usando la etiqueta, que dispone de un atributo de tamaño como se ve a continuación:

<font size="5">
    Hola Mundo 
</font>

Este atributo size puede tomar valores de 1 a 7, en el que el tamaño del texto aumenta de 1 a 7. Pero como decíamos, esto quedó en desuso hace mucho tiempo, y la mayoría de personas ni siquiera saben que existía.

En caso de que tengas prisa por ver cómo puedes cambiar el tamaño de tu texto, aquí está:

// Usando CSS inline
<h1 style="font-size: valor;">¡Hola Mundo!</h1>

// Usando CSS interno/externo
selector {
    font-size: valor;
}

Pero supongamos que no tienes prisa. Vamos a sumergirnos brevemente en el asunto.

Cómo cambiar el tamaño del texto con CSS inline

El CSS inline te permite aplicar estilos a elementos HTML específicos. Esto significa que estamos poniendo CSS directamente en una etiqueta HTML. Usaremos el atributo style, que ahora contiene todos nuestros estilos.

<h1 style="...">¡Hola Mundo!</h1>

De esta forma usamos la propiedad font-size  junto con nuestro valor para cambiar el tamaño del texto usando CSS inline. Este valor puede usar cualquiera de tus unidades CSS preferidas como em, px, rem, etc.

<h1 style="font-size:4em; "> ¡Hola Mundo! </h1>
<p style="font-size:14px; "> Cualquier texto cuyo tamaño de fuente queremos cambiar </p>

Una sintaxis perfecta sería:

<ETIQUETA-DE-TEXTO style="font-size:valor;"> ... </ETIQUETA-DE-TEXTO>

Cómo cambiar el tamaño del texto con CSS interno o externo

El enfoque que debes usar para cambiar el tamaño del texto en el estilo CSS interno y externo es similar, ya que usarás un selector. La sintaxis general para esto es:

selector {
    font-size: valor;
}

El selector puede ser nuestra etiqueta HTML o tal vez una clase o un ID. Por ejemplo:

// HTML
<p> Cualquier texto cuyo tamaño de fuente queremos cambiar </p>

// CSS
p {
    font-size: 14px;
}

O podríamos usar una clase:

// HTML
<p class="mi-parrafo" > Cualquier texto cuyo tamaño de fuente queremos cambiar </p>

// CSS
.mi-parrafo {
    font-size: 14px;
}

Resumen

En este artículo, aprendiste cómo cambiar el tamaño de fuente/texto de un elemento HTML usando CSS. También viste cómo lo hacían los desarrolladores antes de la introducción de HTML5.

Además, ten en cuenta que siempre es mejor dar estilo a tus elementos HTML usando estilos internos o externos, ya que ofrecen mucha más flexibilidad en comparación con los estilos inline.

Por ejemplo, puedes hacer uso de una sola clase CSS para todas tus etiquetas p en lugar de tener que agregar estilos inline a todos los elementos de tu etiqueta p.

Usar estilos inline no se considera una buena práctica porque resulta demasiado repetitivo y no podrás reutilizar los estilos en otro lugar. Para aprender más, puedes leer mi artículo sobre estilos inline en HTML.

Espero que este tutorial te brinde el conocimiento para cambiar el tamaño de tu texto HTML y logres hacerlo más atractivo.

¡Diviértete programando!

Una presentación de diapositivas es una secuencia de imágenes o texto que consiste en mostrar un elemento de la secuencia en un intervalo de tiempo determinado.

En este tutorial puedes crear una secuencia de diapositivas siguiendo estos sencillos pasos:

Escriba en el HTML

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Slideshow</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <div id="slideshow-example" data-component="slideshow">
        <div role="list">
          <div class="slide">
            <img src="" alt="">
          </div>
          <div class="slide">
            <img src="" alt="">
          </div>
          <div class="slide">
            <img src="" alt="">
          </div>
        </div>
      </div>
    <script src="slideshow.js"></script>
    </body>
  </html>

Escribir estilos para ocultar diapositivas y mostrar solo una diapositiva.

Para ocultar las diapositivas tienes que darles un estilo por defecto. Esto indicará que solo muestres una diapositiva si está activa o si quieres mostrarla.

  [data-component="slideshow"] .slide {
    display: none;
  }

  [data-component="slideshow"] .slide.active {
    display: block;
  }

Cambia las diapositivas en un intervalo de tiempo.

El primer paso para cambiar las diapositivas que se muestran es seleccionar el componente padre de las diapositivas y luego sus diapositivas.

Cuando selecciones las diapositivas tienes que ir sobre cada diapositiva y añadir o quitar la clase active dependiendo de la diapositiva que quieras mostrar. Después solo tienes que repetir el proceso durante un intervalo de tiempo determinado.

Tenga en cuenta que cuando elimina una clase active de una diapositiva, la está ocultando debido a los estilos definidos en el paso anterior. Pero cuando añades una clase active a la diapositiva, estás sobrescribiendo el estilo display:none a display:block, en consecuencia la diapositiva se mostrará a los usuarios.

  var slideshows = document.querySelectorAll('[data-component="slideshow"]');
  
  // Aplicar a todas las diapositivas que defina con la marca escrita
  slideshows.forEach(initSlideShow);

  function initSlideShow(slideshow) {

    var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`); // Obtener una matriz de diapositivas

    var index = 0, time = 5000;
    slides[index].classList.add('active');  
    
    setInterval( () => {
      slides[index].classList.remove('active');
      
      // Recorre cada diapositiva incrementando el índice
      index++;
      
      // Si repasa todas las diapositivas, reinicie el índice para mostrar la primera diapositiva y volver a empezar
      if (index === slides.length) index = 0; 
      
      slides[index].classList.add('active');

    }, time);
  }

Ejemplo de Codepen siguiendo este tutorial

El atributo role describe la función de un elemento en programas que puedan hacer uso de él, tales como lectores de pantallas o magnificadores.

Ejemplo de uso:

<a href="#" role="button">Link del botón</a>

Los lectores de pantalla leerán este elemento como “botón” en vez de “link”.

Hay cuatro categorías de funciones:

• Funciones abstractas
• Funciones del widget
• Estructura del documento Funciones
• Funciones destacadas

Más información sobre atributos HTML:

Los elementos HTML pueden tener atributos, los cuales contienen información adicional sobre el elemento.

Generalmente, los elementos HTML vienen en pares de nombre-valor
y siempre se ubican en la etiqueta de apertura de un elemento. El nombre del atributo dice qué tipo de información le estás proporcionando acerca del elemento, y el valor del atributo es la información propiamente.

Por ejemplo, un elemento ancla (<a>) en un documento HTML, crea links hacia otras páginas, o hacia otras partes de la página. Tú usas el atributo href en la apertura de la etiqueta <a> para decirle al navegador hacia donde el link envía al usuario.

Aquí hay un ejemplo de un link que envía al usuario a la página de inicio de freeCodeCamp:

<a href="www.freecodecamp.org">Click aquí para ir a freeCodeCamp!</a>

Fíjate que el nombre del atributo (href) y el valor (“www.freeCodeCamp.org”) están separados por un signo igual y el valor está entre comillas.

Hay diferentes atributos HTML, pero la mayoría de ellos solo funcionan en determinados elementos HTML. Por ejemplo, el atributo href no funcionará si está situado en la apertura de una etiqueta <h1>.

En el ejemplo de arriba, el valor proporcionado al atributo href podría ser cualquier link válido. Sin embargo, algunos atributos tienen solo un conjunto de opciones válidas que puedes usar, o los valores deben estar en un formato específico. El atributo lang le dice al navegador el idioma predeterminado de los contenidos en un elemento HTML. Los valores para el atributo lang, deben usar un idioma estándar o códigos de país, tales como en para inglés, o it para italiano.

Atributos Booleanos

Algunos atributos HTML no necesitan un valor porque tiene solo una opción. Estos son los llamados atributos booleanos. La presencia de un atributo en una etiqueta se aplicará a ese elemento HTML. Sin embargo, está bien escribir el nombre del atributo e igualarlo a la única opción para el valor. En este caso, el valor es usualmente el mismo que el nombre del atributo.

Por ejemplo, el elemento <input> en un formulario puedes tener un atributo required. Esto requiere que los usuarios completen ese campo antes de enviar el formulario.

Aquí hay ejemplos que hacen lo mismo:

<input type="text" required >
<input type="text" required="required" >

Enumerar elementos en una página web es una tarea común que deberás realizar como desarrollador web. Es posible que debas enumerar los artículos del carrito de compras, el orden de los estudiantes según sus calificaciones, los perros con los ladridos más fuertes, etc.

Por lo tanto, debes conocer las diferentes formas en que puedes enumerar elementos usando HTML. Si bien puedes pensar que es algo trivial de aprender, es importante. Y es una de las características más utilizadas de HTML en el desarrollo web.

En este artículo, aprenderás todo acerca de los elementos de listas HTML, sus propiedades, estilos y cómo usarlos para crear listas ordenadas. Espero que te sea útil.

Cómo hacer listas en HTML

En HTML, podemos enumerar elementos en forma ordenada o desordenada.

Una lista ordenada utiliza números o algún tipo de notación que indica una serie de elementos.

Por ejemplo, una lista ordenada puede comenzar con el número 1 y continuar por el 2, 3, 4, etc. Tu lista ordenada también puede comenzar con la letra A y pasar por B, C, D, etc.

Aquí hay un ejemplo de una lista ordenada con los nombres y calificaciones de los estudiantes.

Por otro lado, tenemos listas desordenadas, como una lista de tareas, por ejemplo. Soy tan apasionado por la programación que me salté el desayuno ?.

Hay un tipo más de lista llamada lista de descripción  que también aprenderemos a continuación.

Ahora entremos un poco más en detalle y veamos cómo crear cada tipo de lista en HTML.

Cómo hacer una lista ordenada con HTML

En HTML, podemos crear una lista ordenada usando la etiqueta  <ol>. La etiqueta ol representa una lista ordenada. Dentro de cada uno de los elementos de la lista ordenada <ol> y <ol />, tenemos que definir los elementos de la lista. Podemos definir los elementos de la lista usando la etiqueta <li>.

Aquí está la estructura HTML completa para una lista ordenada:

<ol>
  <li>Eat</li>
  <li>Code</li>
  <li>Sleep</li>
</ol>

El resultado de la lista ordenada anterior es:

Entonces, tenemos la lista de elementos ordenados con un número que comienza con 1 y se incrementa a 2 y 3. Pruebe este CodePen y vea si puede cambiar y jugar usando ol-li.

Tipos de listas ordenadas en HTML

¿Qué pasa si no quieres ordenar tu lista por número? En su lugar, deseas ordenar usando el alfabeto como A, B, C o a, b, c. Puedes hacerlo especificando el valor del atributo type de la etiqueta <ol>.

Puedes ordenar la lista usando las letras A, B, C pasando A como valor de type(tipo).

<ol type="A">
  <li>Eat</li>
  <li>Code</li>
  <li>Sleep</li>
</ol>

La salida se ve así:

De manera similar, puedes usar letras minúsculas como a para el valor del tipo y así enumerar los elementos con a, b, c, etc.

<ol type="a">
  <li>Eat</li>
  <li>Code</li>
  <li>Sleep</li>
</ol>

Aquí está la salida:

Si desea utilizar números romanos, utilice el valor I para una lista ordenada con números romanos:

<ol type="I">
  <li>Eat</li>
  <li>Code</li>
  <li>Sleep</li>
</ol>

La salida se ve así:

Consulte el CodePen a continuación para probar otros tipos:

Cómo usar el atributo start en listas HTML

El elemento <ol> tiene un atributo interesante llamado start. Puedes especificar un valor del atributo de inicio ("start") para iniciar la lista ordenada desde un número específico.

Digamos que deseas comenzar la lista con el número 30 en lugar de 1. Puedes especificar el número 30 como el valor del atributo start de esta manera:

<ol start="30">
  <li>Thirty</li>
  <li>Thirty One</li>
  <li>Thirty Two</li>
</ol>

La salida se ve así:

Siéntete libre de jugar con el atributo start usando este CodePen:

Por cierto, he compartido los mismos consejos en Twitter recientemente. También puedes encontrar una discusión interesante allí:

Cómo hacer una lista desordenada en HTML

Pasemos ahora a las listas desordenadas. Usamos la etiqueta <ul> para crear una lista desordenada. Como de costumbre, necesitamos usar las etiquetas <li> dentro de <ul> y <ul/> para crear los elementos de la lista.

Los elementos de la lista (li) dentro de la lista desordenada (ul) vienen con el estilo predeterminado de viñetas, por lo que cada uno de los elementos de la lista está precedido por un punto negro.

Vamos a crear una lista de mis recursos en línea favoritos para aprender sobre programación web:

My Favorite Web Development Learning Sites
<!-- Mis sitios favoritos de aprendizaje sobre desarrollo web -->
<div>
  <ul>
    <li>freeCodeCamp</li>
    <li>CSS-Tricks</li>
    <li>Traversy Media</li>
  </ul>
</div>

La salida se ve así:

Puedes ver las viñetas de cada uno de los elementos de la lista anterior y puedes personalizarlos. Eso también lo aprenderemos.

Pero antes de eso, siéntete libre de usar este CodePen para cambiar y ejecutar el código.

Cómo usar viñetas con enlaces en listas HTML

Podemos usar los enlaces (etiqueta de anclaje <a>) en los elementos de la lista (etiqueta <li>) para vincular cada uno de los elementos a cualquier página web interna o externa.

Aquí hay un ejemplo que te muestra cómo vincular cada uno de los recursos de programación web a sus respectivos sitios web:

My Favorite Web Development Learning Sites
<!-- Mis sitios favoritos de aprendizaje sobre desarrollo web -->
<div>
  <ul>
    <li>
      <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>
    </li>
    <li>
      <a href="https://css-tricks.com/" target="_blank">CSS-Tricks</a>
    </li>
    <li>
      <a href="https://www.traversymedia.com/" target="_blank">Traversy Media</a>
    </li>
  </ul>
</div>

La salida se ve así:

Puedes usar CodePen a continuación para probar lo mismo. Siéntete libre de modificarlo como desees:

Tipos de listas desordenadas en HTML

Como discutimos brevemente, podemos personalizar el estilo de viñetas de una lista desordenada, que veremos en acción ahora. Podemos hacer esto usando la propiedad de estilo CSS llamada list-style.

Hay cuatro valores principales de la propiedad list-style que nos ayudan con esta personalización:

Puede usar el CodePen anterior para probar diferentes opciones de list-style.

¿Sabías que también hay una lista con descripciones?

Hay un tipo más de lista HTML, pero no se usa con tanta frecuencia. Se llama Description List.

Podemos definir una lista de descripciones utilizando el elemento de etiqueta <dl>. Dentro de <dl>..</dl> necesitamos definir un término de descripción usando la etiqueta <dt>. El término suele ser un pequeño texto sobre algo. Luego, podemos definir el descriptor de descripción para describir más el término usando la etiqueta <dd>.

¿Demasiado para digerir? Veamos cómo funciona con un ejemplo de código.

Supongamos que queremos describir información sobre programación, chismes y dormir en nuestra página web. Primero podemos definir una etiqueta<dl>. Ahora definimos tres pares de etiquetas <dt> y <dd> para describir la codificación, el chisme y el sueño, respectivamente.

<dl>
  <dt>Coding</dt>
    <!-- Programación -->
  <dd>An activity to keep you happy, even in sleep.</dd>
      <!-- Una actividad para mantenerte feliz, incluso mientras duermes. -->
  <dt>Gossiping</dt>
      <!-- Chismorreo -->
  <dd>Can't live without it.</dd>
      <!-- No puedo vivir sin el. -->
  <dt>Sleeping</dt>
      <!-- Dormir -->
  <dd>My all time favorite.</dd>
      <!-- Mi favorito de todos los tiempos. -->
</dl>

La salida se ve así:

Prueba este CodePen para experimentar más con las listas con descripción:

Te estarás preguntando, ¿por qué no usamos mucho este tipo de lista? Bueno, puedes crear esta estructura utilizando la lista desordenada (ul), elementos de lista (li) y los estilos CSS.

Pero si consideras la semántica de HTML, debes dar un lugar a las listas de descripción en tu código cuando tengas un buen caso de uso para ello.

Cómo crear un encabezado de página con elementos de lista HTML

Estamos casi al final de este tutorial. Pero siento que está incompleto sin al menos un ejemplo de caso de uso de las listas y etiquetas HTML. Mi favorito es enumerar los elementos en el encabezado de una página web.

Vamos a crear un encabezado muy básico con un logotipo de muestra y tres enlaces:Home, Products, y About Us. Primero crearemos la estructura HTML así:

<nav>
  <span class="logo">Logo</span>
  
  <ul>
    <li><a href="#/home">Home</a></li>
    <li><a href="#/products">Products</a></li>
    <li><a href="#/about">About Us</a></li>
  </ul>  
</nav>

Aquí hemos tomado una lista desordenada con tres elementos de lista para definir los enlaces Inicio, Productos y Acerca de nosotros. También notarás un elemento de intervalo con el logotipo de texto que indica que es un logotipo. Podemos usar una imagen adecuada allí, según nuestras necesidades más adelante.

Hasta ahora, el encabezado debería verse así:

Bueno, esto no es lo que queremos. Entonces, a continuación, escribiremos algunas reglas y propiedades de CSS para que se vea como un encabezado de página (al menos algo más parecido).

nav{
  background-color: #273032;
  color: #FFF;
  padding: 10px;
  display: flex;
}

.logo {
  background-color: blue
}

ul {
  margin: 0px;
}

li {
  list-style: none;
  display: inline;
  margin-right: 0.2rem;
}

a {
  color: pink;
}

Ahora mucho mejor y se parece más a un encabezado de página de verdad.

Nuevamente, puedes usar este CodePen para cambiar y probar cosas con el encabezado.

Antes de terminar...

Eso es todo por ahora. Espero que este artículo te haya resultado útil y que te ayude a comprender las listas HTML con mayor claridad. Puedes encontrar todos los ejemplos juntos en esta CodePen Collection.

Conectémonos. Me encontrarás activo en Twitter (@tapasadhikary). Siéntete libre de seguirme. También comencé a compartir conocimientos a través de mi Canal de YouTube, por lo que también puedes consultarlo.

La declaración de tipo de documento HTML, también conocida como DOCTYPE, es la primera línea de código requerida en todo documento HTML o XHTML. La declaración DOCTYPE es una instrucción al navegador web sobre la versión de HTML en la cual está escrita la página. Esto asegura que la página web sea analizada de la misma manera en diferentes navegadores web.

En HTML 4.01, la declaración DOCTYPE refiere a una definición de tipo de documento (DTD, Document Type Definition). Un DTD define la estructura y los elementos legales de un documento XML. Debido a que HTML 4.01 se basó en el Lenguaje de Marcado Generalizado Estándar (Standard Generalised Markup Language, SGML), referirse a un DTD en la declaración DOCTYPE era necesario.

Además, los doctypes para HTML 4.01 requerían la declaración de un DTD strict, transitional, o frameset, cada uno con un caso de uso diferente, como se indica abajo.

• DTD Estricto (Strict DTD): Usado por páginas web que excluyen atributos y elementos que la W3C espera ir eliminando a medida que crezca la compatibilidad con CSS.
• DTD Transicional (Transitional DTD): Usado por páginas web que incluyen atributos y elementos que la W3C espera ir eliminando a medida que crezca la compatibilidad con CSS.
• DTD Conjunto de marcos (Frameset DTD): Usado por páginas web con marcos.

En cambio, la declaración del DOCTYPE HTML5 es mucho más sencilla: ya no requiere una referencia a los DTDs porque ya no está basado en SGML. En los siguientes ejemplos se puede ver la comparación entre los DOCTYPE HTML 4.01 y HTML5.

Ejemplos

Sintaxis de doctype para HTML5 y posteriores:

<!DOCTYPE html>

Sintaxis de doctype para HTML 4.01 estricto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Sintaxis de doctype para HTML 4.01 transicional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Sintaxis de doctype para HTML 4.01 conjunto de marcos (frameset):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Historia

Durante los años de formación de HTML, aún no se había llegado a un acuerdo sobre los estándares de la web. Los fabricantes de los navegadores creaban nuevas funciones a su antojo. Había poca preocupación por la competencia entre navegadores.

El resultado fue que los desarrolladores web tenían que escoger un navegador sobre el cual desarrollarían sus sitios, lo que terminaba en que dichos sitios no se mostraran bien en navegadores no compatibles. Esta situación no podía continuar.

La W3C (Consorcio de la World Wide Web, World Wide Web Consortium) redactó un conjunto de estándares web para manejar esta situación.  Todos los fabricantes de navegadores y desarrolladores web deben apegarse a estos estándares, lo que asegura que los sitios web se muestren bien sin importar el navegador que se use.

Los cambios requeridos por los estándares fueron muy diferentes de algunas prácticas existentes. Apegarse a ellos rompería a los sitios web existentes que no cumplían con los estándares.

Para solucionar este problema, los fabricantes empezaron a programar modos de renderizado en sus navegadores. Los desarrolladores web necesitaban añadir una declaración doctype al principio de un documento HMTL. Dicha declaración le indicaría al navegador qué modo de renderizado usar para ese documento en específico.

Tres modos de renderizado por separado estuvieron generalmente disponibles entre navegadores.

• Modo de estándares completo (Full standards mode) renderiza las páginas de acuerdo a los estándares web de la W3C.
• Modo de peculiaridades (Quirks mode) renderiza las páginas de manera no conforme a los estándares.
• Modo casi estándar (Almost standards mode) se acerca al modo de estándares completos, pero ofrece soporte a un pequeño número de peculiaridades.

En la era moderna de HTML5, los estándares web están totalmente implementados en los principales navegadores. Los sitios web son generalmente desarrollados conforme a los estándares. Por esta razón, la declaración doctype de HTML5 solo existe para indicarle al navegador que renderice el documento en modo de estándares completo.

Utilización

La declaración Doctype debe ser la primera línea de código en un documento HTML, aparte de los comentarios, los cuales pueden ir antes si es necesario. Para los documentos HTML5 modernos, la declaración doctype debe ser la siguiente:

<!DOCTYPE html>

Más Información:

Aunque ya no son de uso general, existen otros tipos de declaración doctype de versiones anteriores de HTML. También existen versiones específicas para documentos XML. Para saber más sobre ellas y ver ejemplos de códigos de cada una, consulta este artículo de Wikipedia.

A note from the W3

Entrada del Glosario MDN

W3Schools

Una explicación rápida del "Modo Quirks" y "Modo Estándar".