Kodokon kodokon.com

Estructurar el texto: títulos, párrafos y listas

Aprende a organizar el texto con una jerarquía de títulos, párrafos y listas.

7 min · 3 preguntas

Abrir esta lección en Kodokon

Abre un libro de cocina: está el título del libro, los títulos de los capítulos y luego los títulos de las recetas. HTML ofrece la misma jerarquía con seis niveles de títulos, desde <h1> hasta <h6>. La h viene de heading (encabezado). <h1> es el título principal de la página, <h2> un título de sección, <h3> un subtítulo, y así sucesivamente hasta <h6>.

HTML
<h1>My recipe notebook</h1>
<h2>Starters</h2>
<h3>Carrot soup</h3>
<h2>Desserts</h2>
<h3>Apple pie</h3>
Una jerarquía de títulos, como el índice de un libro.

Para el texto normal, usas la etiqueta <p> de la lección anterior. Un detalle importante: pulsar la tecla Enter en tu archivo no crea un nuevo párrafo en pantalla. El navegador ignora los saltos de línea y los espacios repetidos. Para separar dos ideas, debes escribir dos elementos <p> distintos.

HTML
<h2>Apple pie</h2>
<p>A simple recipe, perfect for beginners.</p>
<p>Allow 30 minutes of preparation in total.</p>
Un título de sección seguido de dos párrafos.

Para enumerar elementos, HTML ofrece dos tipos de listas. La etiqueta <ul> (unordered list, lista sin orden) muestra viñetas: perfecta para una lista de la compra, donde el orden no importa. La etiqueta <ol> (ordered list, lista ordenada) muestra números: ideal para los pasos de una receta. En ambos casos, cada elemento de la lista se escribe con la etiqueta <li> (list item, elemento de lista).

HTML
<ul>
  <li>3 apples</li>
  <li>1 pie crust</li>
  <li>2 spoonfuls of sugar</li>
</ul>
<ol>
  <li>Preheat the oven to 180 degrees.</li>
  <li>Cut the apples into slices.</li>
  <li>Bake for 35 minutes.</li>
</ol>
Una lista con viñetas para los ingredientes y una lista numerada para los pasos.

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

  1. ¿Qué etiqueta usas para el título principal de una página?
    • <h6>
    • <h1>
    • <p>
    • <heading>
  2. ¿Qué etiqueta crea una lista numerada?
    • <ul>
    • <ol>
    • <li>
  3. ¿Cómo se muestran dos párrafos distintos en pantalla?
    • Pulsando Enter dos veces en el archivo
    • Escribiendo dos elementos <p> separados
    • Añadiendo espacios entre las frases