CursosEmpresasBlogLiveConfPrecios

Etiquetas de texto y jerarquía en HTML

Clase 4 de 17 • Curso de HTML

Clase anteriorSiguiente clase
Resumen

Aprende a organizar texto en HTML con una jerarquía clara. Usar bien H1 a H6, párrafos, strong y blockquote mejora la lectura y guía al navegador sobre lo más importante. Verás cómo crear la estructura base, cambiar el título de la pestaña y abrir el archivo en el navegador para validar resultados.

¿Cómo estructurar HTML y cambiar el título de la pestaña?

Comienza generando la estructura básica de HTML y ajusta el título para identificar tu proyecto como “Práctica texto”. Abre el archivo en el navegador para confirmar que el título aparece en la pestaña y que el contenido se renderiza con estilos por defecto.

¿Qué código base usar?

Usa un archivo index.html con la estructura mínima y el título configurado.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Práctica texto</title>
  </head>
  <body>
    <!-- Contenido -->
  </body>
</html>
  • Genera la estructura con tu atajo de “símbolo de alineación” y tab.
  • Cambia el título a “Práctica texto”.
  • Abre en el navegador y ajusta el zoom si lo necesitas.

¿Qué jerarquía de encabezados H1 a H6 conviene?

Los encabezados vienen con estilos por defecto que muestran su jerarquía visual. H1 es el más grande e importante. H2 es secundario. H3 funciona como subsecciones dentro de un H2. H4 a H6 siguen en menor importancia.

<h1>Título uno</h1>
<h2>Título dos</h2>
<h3>Subsección del H2</h3>

¿Cuántos H1, H2 y H3 por archivo?

  • Un solo H1 por archivo es buena práctica.
  • Puedes tener varios H2 según tu estructura.
  • Usa H3 para subdividir contenido dentro de un H2.

  • Evita usar H4, H5 o H6 para texto común si necesitas párrafos.

  • Beneficio clave. El navegador entiende qué es lo más importante y el lector también.

  • Señal visual. El tamaño refuerza la jerarquía al renderizar el documento.

¿Cómo escribir párrafos, dar énfasis y citar?

Para texto de explicación usa la etiqueta p. No uses encabezados para contenido que debe ser un párrafo. Si necesitas resaltar una parte del texto dentro del párrafo, emplea strong. Para citas o fragmentos destacados utiliza blockquote, que se muestra con un estilo distinto al párrafo.

¿Cómo resaltar con strong sin cambiar la semántica?

Dentro del párrafo, rodea la parte relevante con strong para darle énfasis visual.

<p>Soy un texto, pero <strong>esto es más importante</strong>.</p>
  • Úsalo para marcar énfasis en una frase.
  • No implica que el resto del párrafo sea menos importante en el significado, solo lo resalta a nivel visual.

¿Cuándo usar blockquote e inspeccionar estilos?

Emplea blockquote para citar texto o palabras específicas.

<blockquote>Curso de HTML</blockquote>
  • Se renderiza con estilo distinto al párrafo.
  • Útil para citas o extractos destacados.
  • Con el inspector de elementos puedes ver cómo el navegador aplica estilos distintos a blockquote y p.

¿Qué habilidades prácticas se refuerzan?

  • Crear la estructura básica de HTML en un index.html.
  • Cambiar el título de la pestaña a “Práctica texto”.
  • Entender la jerarquía de encabezados H1 a H6.
  • Respetar la regla de un H1 por archivo.
  • Escribir texto con p en lugar de encabezados.
  • Dar énfasis con strong cuando haga falta.
  • Citar con blockquote y validar estilos en el inspector de elementos.

¿Te quedaron dudas o tienes un ejemplo que quieras revisar? Comenta qué estructura de encabezados planeas usar y qué parte del texto necesitas destacar.