Contenido del curso
Listas y Enlaces
Formularios y Tablas
Contenido Multimedia
Accesibilidad Web Y SEO
Proyecto final
Jerarquía de texto en HTML con H1 a H6
Resumen
Cuando empiezas a escribir HTML, no basta con poner texto: necesitas decirle al navegador qué pesa más y qué pesa menos. Las etiquetas HTML para texto organizan ese contenido con una jerarquía clara que mejora la lectura, el SEO y la accesibilidad de tu página.
¿Qué son las etiquetas de encabezado y cómo se usan H1, H2 y H3?
Los encabezados son la columna vertebral de cualquier documento HTML. Van de h1 a h6 y cada uno comunica un nivel de importancia distinto, tanto para quien lee como para el navegador.
Dentro de tu archivo index.html, después de generar la estructura básica con ! + tab y cambiar el título de la pestaña a Práctica texto, puedes empezar a probar la jerarquía [00:48].
¿Por qué solo debe existir un H1 por archivo?
El h1 representa el título principal de la página. La regla práctica dice que solo debe haber un h1 por archivo HTML, porque ese encabezado le indica al navegador cuál es el contenido más relevante [02:30].
Si colocas dos h1 en el mismo documento, ya estás cometiendo una mala práctica. En cambio, sí puedes repetir h2 o h3 tantas veces como tu estructura lo necesite.
¿Cuántos H1 puedo tener en una página HTML? Solo uno. El
h1define el título principal del documento y duplicarlo confunde al navegador sobre cuál es el contenido más importante.
¿Cuándo conviene usar H2 y H3 como subtítulos?
La jerarquía visual y semántica funciona así:
h1: título principal de la página, único por archivo.h2: títulos secundarios, puedes tener varios según la estructura.h3: subsecciones que viven dentro de unh2.h4,h5yh6: niveles más profundos para subdivisiones específicas.
Al renderizar, vas a notar que el tamaño del texto disminuye conforme bajas de nivel. Eso no es solo estética: es la forma en que HTML comunica la importancia relativa de cada bloque [03:20].
¿Cómo se escribe un párrafo en HTML y para qué sirve la etiqueta P?
La etiqueta <p> es la que debes usar para cualquier bloque de texto explicativo. Es la opción correcta cuando quieres redactar contenido corrido, no cuando necesitas un título.
Un error común es intentar usar h6 o h3 para texto normal porque se ven más pequeños. No lo hagas: cada etiqueta tiene un propósito semántico, y los encabezados están reservados para títulos.
html
<p>Soy texto</p>¿Cómo resalto una palabra dentro de un párrafo con strong?
Cuando quieres dar énfasis a una parte específica del texto, la etiqueta <strong> es tu aliada. Envuelves la palabra o frase que quieres destacar y el navegador la renderiza en negritas [05:30].
html
<p>Soy un texto, pero <strong>esto es más importante</strong></p>Ojo: strong no significa que ese fragmento sea semánticamente más importante que el resto del documento. Solo marca un énfasis visual y de lectura dentro del párrafo.
¿Cuál es la diferencia entre un H1 y un strong? El
h1es el título principal de toda la página. Elstrongsolo resalta una parte dentro de un párrafo, sin cambiar la jerarquía global del documento.
¿Cómo cito un texto en HTML usando blockquote?
Si necesitas mostrar una cita textual, palabras de alguien más o un fragmento destacado, la etiqueta correcta es <blockquote>. Esta etiqueta aplica estilos por defecto distintos a los de un párrafo normal: el navegador la separa visualmente para que se entienda que es una cita [06:45].
html
<blockquote>Curso de HTML</blockquote>Cuando inspeccionas el elemento con el inspector de elementos del navegador, vas a ver que blockquote trae estilos propios que lo diferencian de <p>. Eso te ahorra trabajo y mantiene la semántica limpia.
¿Qué otras etiquetas de texto puedo explorar en HTML?
Lo que viste hasta aquí es solo el arranque. HTML tiene un catálogo amplio de etiquetas para contenido de texto, y conforme avances en tu proyecto vas a ir descubriendo cuáles encajan mejor con cada situación.
Un buen siguiente paso es revisar el listado completo de etiquetas de contenido textual en la documentación oficial y empezar a probarlas dentro de tu archivo index.html. Mientras más experimentes con jerarquías, párrafos y énfasis, más natural se va a sentir escribir HTML semántico.
¿Ya tienes claro cuándo usar h1, h2 o strong en tu proyecto? Cuéntame en los comentarios qué etiqueta te ha generado más dudas.