Cargando...

Encabezados HTML

Ya puedes escribir elementos y atributos. Esta lección se centra en los encabezados: las etiquetas que marcan el título principal y los títulos de sección de una página. Unos buenos encabezados ayudan a leer de un vistazo y ayudan a navegadores y herramientas de asistencia a entender el esquema.

¿Qué son los encabezados HTML?

Los encabezados HTML son seis niveles de título: h1, h2, h3, h4, h5 y h6. h1 es el nivel más alto de la página. h6 es el más bajo. Estas etiquetas son para significado y estructura. El tamaño visual se puede cambiar luego con CSS; no elijas un nivel solo porque quieras texto más grande o más pequeño.

Respuesta directa

Usa encabezados para construir un esquema claro. Prefiere un h1 claro para el tema de la página. Usa h2 para secciones principales bajo ese tema, luego h3 para subsecciones, y así sucesivamente. Mantén los niveles en orden cuando puedas: saltar de h1 directo a h4 suele hacer el esquema más difícil de seguir.

Niveles de encabezado

html

HTML Code

<h1>Título principal de la página</h1>
<h2>Título de sección</h2>
<h3>Título de subsección</h3>
<p>Texto de párrafo bajo la subsección.</p>

Leer el ejemplo

h1 presenta el tema de toda la página
h2 inicia una sección principal bajo ese tema
h3 inicia una parte más pequeña dentro de esa sección
El párrafo es texto normal del cuerpo, no un encabezado

Por qué importa el orden de los encabezados

Los encabezados crean un esquema del documento, parecido a un índice. Los lectores de pantalla y algunas herramientas SEO usan ese esquema. Si saltas niveles solo por apariencia, la estructura se vuelve confusa aunque la página te «se vea bien».

Un h1, luego secciones

Para páginas de principiante en este curso, mantén un h1 claro. Luego organiza el contenido con h2 y niveles más profundos según haga falta. Más adelante verás esquemas más avanzados; primero domina este patrón simple y legible.

Un esquema pequeño de página

html

HTML Code

<h1>Guía de la ciudad</h1>
<h2>Cómo moverse</h2>
<p>Consejos para autobuses y trenes.</p>
<h2>Comida</h2>
<h3>Comida callejera</h3>
<p>Snacks locales rápidos.</p>
<h3>Restaurantes para sentarse</h3>
<p>Sitios para una comida más larga.</p>

Los encabezados no son para espacios vacíos

No uses etiquetas de encabezado vacías para crear espacio vertical. No envuelvas cada frase en negrita en un encabezado. Si el texto no es un título real de sección, usa un párrafo u otro elemento adecuado.

Pruébalo tú mismo

Crea o abre un archivo HTML con el esqueleto básico
Añade un h1 que nombre el tema de la página
Añade dos secciones h2 con un párrafo corto bajo cada una
Bajo un h2, añade un h3 y un párrafo corto
Guarda y abre la página: comprueba que el esquema se escanea con facilidad

Errores comunes

Elegir niveles de encabezado solo por tamaño de fuente en vez de estructura
Saltar de h1 a h4 sin motivo
Usar muchos h1 en una página sencilla de principiante cuando basta un título principal claro
Meter párrafos largos dentro de etiquetas de encabezado
Usar encabezados como espaciadores decorativos sin título real de sección

Resumen

Los encabezados usan h1 a h6 para niveles de título
Construyen estructura y esquema, no solo tamaño visual
Prefiere un h1 claro y luego secciones ordenadas h2–h6
Evita saltar niveles solo por estilo
Mantén el texto del encabezado corto y con forma de título
Estiliza el tamaño luego con CSS; mantén semánticos los encabezados HTML

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓

Preguntas

🎯

70%

Para Aprobar

♾️

∞

Tiempo

🔄

∞

Intentos

📝 Instrucciones

Lee cada pregunta cuidadosamente
Selecciona la mejor respuesta para cada pregunta
Puedes repetir el quiz tantas veces como quieras
Tu progreso se mostrará en la parte superior

Idioma