Títulos, párrafos y texto en HTML

Encabezados: de <h1> a <h6>

HTML tiene seis niveles de títulos, de <h1> (el más importante) a <h6> (el menos importante):

<h1>Curso de HTML</h1>
<h2>Formularios</h2>
<h3>Campos de texto</h3>
<h3>Casillas</h3>
<h2>Tablas</h2>

Los encabezados funcionan como el índice de un libro. Los buscadores y las personas que usan lectores de pantalla navegan por ellos para entender la página y saltar a la parte que les interesa.

Cuatro reglas:

1. Un solo <h1> por página: el tema principal. Suele coincidir, más o menos, con el <title>.
2. No te saltes niveles. Después de un <h2> viene un <h3>, no un <h5>.
3. No elijas un encabezado por su tamaño. El tamaño se cambia con CSS. Si quieres un texto grande que no es un título, usa un párrafo con una clase.
4. Escribe títulos descriptivos. “Horarios del rocódromo” dice mucho más que “Información”.

Párrafos: <p>

Cada bloque de texto va en su propio <p>. Entre párrafo y párrafo, el navegador deja un espacio.

<p>Este es el primer párrafo.</p>
<p>Y este es el segundo.</p>

Los espacios y saltos de línea se ignoran

En HTML, varios espacios, tabuladores o saltos de línea seguidos se muestran como un solo espacio:

<p>Esto      se ve
   en una sola línea.</p>

Para separar ideas, usa párrafos distintos. Si necesitas un salto de línea dentro de un párrafo, como en una dirección o un poema, usa <br>:

<p>
  Calle Mayor, 12<br>
  39001 Santander
</p>

No uses varios <br> seguidos para crear espacio vertical: eso es trabajo del CSS (margin).

Qué puede ir dentro de un párrafo

Dentro de un <p> solo puede ir texto y elementos en línea (<a>, <strong>, <em>, <img>, <span>…). No puede ir un título, una lista, una tabla ni otro párrafo.

<p>Introducción <h2>Un título</h2></p>  <!-- ✗ error -->

El navegador cierra el párrafo automáticamente antes del <h2>, y el </p> final se queda huérfano. El validador te dirá algo como “No p element in scope but a p end tag seen”: significa que sobra ese cierre. Lo verás mejor en la lección de bloque y línea.

Resaltar texto

• <strong>: texto importante. Se ve en negrita.
• <em>: énfasis, como cuando cambias el tono al hablar. Se ve en cursiva.

<p><strong>Atención:</strong> el examen es el <em>lunes</em>, no el martes.</p>

Existen también <b> e <i>, que solo cambian el aspecto sin darle importancia. Úsalos para casos como nombres de productos o palabras en otro idioma: <i lang="en">software</i>. Para destacar algo importante, <strong> y <em>.

Otros elementos de texto útiles

Elemento	Para qué sirve	Ejemplo
<mark>	Texto resaltado, como con un rotulador	resultados de una búsqueda
<small>	Letra pequeña, notas legales	<small>IVA incluido</small>
<sup> / <sub>	Superíndice / subíndice	m2, H2O
<abbr>	Abreviatura, con su significado en title	<abbr title="Hojas de estilo en cascada">CSS</abbr>
<del> / <ins>	Texto borrado / añadido	precios rebajados
<time>	Una fecha u hora	<time datetime="2026-10-01">1 de octubre</time>
<q>	Cita corta dentro de una frase	añade comillas solo

Citas largas: <blockquote>

Para citar un texto de otra persona o fuente, en bloque:

<blockquote cite="https://ejemplo.com/entrevista">
  <p>Aprender a programar es aprender a pensar.</p>
</blockquote>
<p>— Entrevista publicada en 2026</p>

Código: <code> y <pre>

• <code> marca un fragmento de código dentro de una frase: Usa <code>console.log()</code> para depurar.
• <pre> (preformateado) muestra el texto respetando los espacios y los saltos de línea, con letra de ancho fijo. Para bloques de código se combinan los dos:

<pre><code>function saludar() {
  console.log("Hola");
}</code></pre>

Dentro de <pre>, los caracteres < y > hay que escribirlos como < y >, o el navegador los interpretará como etiquetas. Lo verás en la lección de entidades.

Línea de separación: <hr>

<hr> separa dos bloques de contenido que cambian de tema, como un cambio de escena en una novela. Se ve como una línea horizontal. Es un elemento vacío.

<p>Hola          mundo
   desde HTML</p>