#04 Títulos, párrafos y énfasis#04 Títulos, párrafos y énfasis

Encabezados: el índice de tu página

Piensa en un libro: tiene un título, capítulos, apartados dentro de cada capítulo… HTML organiza el texto igual, con seis niveles de encabezados:

1
2
3
4
5
6

Las reglas para usarlos bien:

1. Un solo <h1> por página: el título principal, como el título del libro.
2. No te saltes niveles: después de un <h2> puede venir un <h3>, pero no un <h5>.
3. Elígelos por su importancia, no por su tamaño. Si quieres un título pequeño, usa el nivel correcto y cambia el tamaño con CSS más adelante.

<h1>Recetas de mi abuela</h1>
  <h2>Primeros platos</h2>
    <h3>Gazpacho</h3>
    <h3>Lentejas</h3>
  <h2>Postres</h2>
    <h3>Arroz con leche</h3>

Párrafos

Cada bloque de texto va en su propio <p>. El navegador separa los párrafos con un pequeño espacio:

<p>Primer párrafo. Puede ser tan largo como quieras.</p>
<p>Segundo párrafo, sobre otra idea.</p>

El navegador ignora tus espacios

Esto sorprende a todo el mundo al principio. Mira el código de este ejemplo y luego el resultado:

1
2
3
4
5

El navegador junta todos los espacios, tabulaciones y saltos de línea seguidos en un solo espacio. Es una ventaja: puedes ordenar tu código como quieras sin que cambie la página. Si quieres separar textos, usa elementos (<p>, encabezados…).

Saltos de línea y separadores

A veces sí necesitas cortar una línea sin empezar otro párrafo, como en un poema o una dirección. Para eso está <br> (break). Y para separar dos temas distintos, <hr> (horizontal rule), que se ve como una línea:

1
2
3
4
5
6
7

Destacar texto: <strong> y <em>

Dentro de un párrafo puedes marcar palabras:

1
2
3

Comentarios: notas que no se ven

Puedes dejar notas en tu código para ti o para otras personas. El navegador las ignora:

<!-- Esto es un comentario: no aparece en la página -->
<h1>Mi web</h1>

<!-- TODO: añadir una foto aquí -->
<p>Bienvenida.</p>

Los comentarios también sirven para desactivar un trozo de código sin borrarlo. En VS Code, selecciona unas líneas y pulsa Ctrl + / (Cmd + / en Mac) para comentarlas o descomentarlas.

Caracteres especiales

¿Y si quieres escribir literalmente <p> en tu página? El navegador pensaría que es una etiqueta. Para eso se usan las entidades, códigos que empiezan por & y acaban en ;:

1
2

Errores típicos

• Usar <h1>, <h2>… para hacer texto grande en lugar de para indicar la estructura.
• Saltarse niveles: pasar de <h1> a <h4> porque «se ve mejor».
• Usar varios <br> para separar párrafos o dejar espacios. Usa <p> y, más adelante, CSS.
• Esperar que se vean los espacios o los saltos de línea del código.
• Olvidar cerrar <strong>: todo el texto que viene después sale en negrita.

Ejercicios

Ejercicio 1: ordena los encabezados (fácil)

Esta página de una academia usa los encabezados según el tamaño que le gustaba a quien la escribió. Corrígela para que tenga un único <h1> y no se salte niveles.

1
2
3
4
5
6
7
8

<h1>Academia de baile Ritmo</h1>
<h2>Nuestras clases</h2>
<h3>Salsa</h3>
<p>Los lunes y miércoles.</p>
<h3>Bachata</h3>
<p>Los martes y jueves.</p>
<h2>Contacto</h2>
<p>Llámanos al 600 000 000.</p>

Ejercicio 2: un poema (fácil)

Escribe un poema o la letra de una canción corta con un título <h1>, cada estrofa en un <p> y los versos separados con <br>. Añade un comentario con el nombre de quien lo escribió.

1

<!-- Poema de Antonio Machado -->
<h1>Caminante, no hay camino</h1>
<p>
  Caminante, son tus huellas<br>
  el camino y nada más;<br>
  caminante, no hay camino,<br>
  se hace camino al andar.
</p>

Ejercicio 3: la noticia (medio)

Escribe una noticia inventada con: un titular, un subtítulo para cada una de sus dos partes, al menos tres párrafos, una frase importante con <strong>, una palabra con énfasis con <em> y un <hr> antes de la firma del periodista.

1

<h1>Un gato se convierte en alcalde de un pueblo</h1>
<h2>Una elección sorprendente</h2>
<p>Los vecinos de Villagatos han elegido a Michi como alcalde.</p>
<p><strong>Es la primera vez que un animal gana unas elecciones en la comarca.</strong></p>
<h2>Sus primeras medidas</h2>
<p>Michi ha prometido siestas <em>obligatorias</em> después de comer.</p>
<hr>
<p>Por Ana García, corresponsal.</p>

Ficha resumen

• Encabezados <h1>…<h6>: un solo <h1>, sin saltar niveles, elegidos por importancia y no por tamaño.
• Párrafos <p>: un bloque de texto cada uno.
• El navegador junta los espacios y saltos de línea del código en un solo espacio.
• <br> = salto de línea dentro de un párrafo. <hr> = cambio de tema.
• <strong> = importante (negrita). <em> = énfasis (cursiva).
• Comentarios: <!-- … -->. Atajo en VS Code: Ctrl + /.
• Entidades para caracteres especiales: <, >, &,  .

Glosario