Cuando creamos páginas web, es fundamental estructurar el contenido de manera clara y ordenada para que tanto los usuarios como los motores de búsqueda puedan entender fácilmente la información que presentamos. Para ello, contamos con un conjunto de etiquetas en HTML que nos permiten definir títulos jerárquicos y dar formato semántico al texto.
En primer lugar, las etiquetas de título, que van desde h1 hasta h6, nos ayudan a organizar el contenido en niveles de importancia. La etiqueta h1 representa el título más destacado, generalmente utilizado para el encabezado principal de la página. A medida que aumentamos el número, el tamaño y la relevancia del título disminuyen, siendo h6 el menos destacado, incluso más pequeño que un párrafo normal. Por ejemplo, podemos usar h1 para el título principal, h2 para secciones importantes como introducción o conclusión, y h3 para subdivisiones dentro del contenido. Aunque existen hasta seis niveles, en la práctica solemos utilizar principalmente los primeros cuatro, ya que un documento con demasiados niveles de título puede estar mal estructurado.
Para ilustrar cómo se ven estos títulos, podemos crear un documento con todos ellos:
<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>
Al visualizar este código en un navegador, notaremos que el h1 aparece con la fuente más grande y en negrita, mientras que el h6 es mucho más pequeño y menos destacado.
Además de los títulos, es importante saber cómo aplicar formato semántico al texto para destacar ciertas partes sin perder la estructura lógica del documento. Para ello, utilizamos etiquetas como strong y em. La etiqueta strong indica que el texto tiene una importancia fuerte, y por defecto se muestra en negrita. Por otro lado, em (énfasis) señala que el texto debe destacarse, generalmente con cursiva.
Por ejemplo, si queremos resaltar una frase importante en negrita, escribimos:
<p>Este es un texto con una palabra en <strong>negrita</strong>.</p>
Y para enfatizar una palabra en cursiva:
<p>Este es un texto con una palabra en <em>cursiva</em>.</p>
Aunque existen etiquetas como b para negrita y i para cursiva, es preferible usar strong y em porque aportan significado semántico al contenido, no solo un cambio visual. Esto ayuda a los navegadores, lectores de pantalla y motores de búsqueda a interpretar correctamente la intención del texto, en lugar de simplemente aplicar un estilo.
En resumen, al estructurar nuestras páginas web, debemos utilizar las etiquetas de título para organizar el contenido jerárquicamente y las etiquetas strong y em para dar formato semántico al texto, asegurando así documentos claros, accesibles y bien organizados.