En este capítulo, nos enfocaremos en cómo utilizar etiquetas semánticas para el contenido textual en HTML. Estas etiquetas permiten que el texto exprese un significado específico, mejorando tanto la accesibilidad como el SEO. Etiquetas como <strong>, <em>, <blockquote>, y otras ayudan a transmitir la importancia o contexto del contenido textual.

<strong>: Texto Importante o Enfático

La etiqueta <strong> se utiliza para resaltar la importancia de un fragmento de texto. Al aplicar <strong>, el navegador muestra el texto en negrita por defecto, y los lectores de pantalla suelen enfatizar su lectura. Esta etiqueta es útil para destacar información crítica o advertencias.

html

<em>: Énfasis o Acentuación

La etiqueta <em> se utiliza para aplicar énfasis en una palabra o frase. El navegador, por defecto, muestra el contenido en cursiva, y los lectores de pantalla suelen darle un tono especial. <em> es ideal para enfatizar una palabra dentro de una oración sin cambiar el contexto general.

html

<blockquote>: Citas en Bloque

La etiqueta <blockquote> se emplea para incluir citas extensas, generalmente de varios párrafos. HTML también permite atribuir la fuente de la cita usando el atributo cite, proporcionando contexto sobre el origen de la cita.

html

<q>: Citas en Línea

La etiqueta <q> se utiliza para citas cortas que se encuentran dentro de una oración o párrafo. Los navegadores suelen mostrar el contenido de <q> entre comillas automáticamente.

html

<abbr>: Abreviaturas

La etiqueta <abbr> se usa para señalar abreviaturas o siglas. Es posible especificar el significado completo de la abreviatura usando el atributo title, lo cual ayuda a los lectores de pantalla y mejora la accesibilidad.

html

<cite>: Referencias o Fuentes

La etiqueta <cite> se utiliza para citar títulos de obras, como libros, artículos, o películas. El uso de <cite> ayuda a contextualizar referencias en el texto y mejora la comprensión de las fuentes.

html

<code>: Fragmentos de Código

La etiqueta <code> se emplea para mostrar fragmentos de código o comandos. A menudo se utiliza junto con <pre> para mantener el formato original, especialmente en ejemplos de varias líneas.

html

<pre>: Texto Preformateado

La etiqueta <pre> mantiene el formato del contenido tal como se escribe, incluyendo espacios y saltos de línea. Es útil para mostrar ejemplos de código o contenido donde el espaciado es importante.

html

<mark>: Texto Marcado

La etiqueta <mark> se utiliza para resaltar texto, generalmente con un color de fondo amarillo por defecto en los navegadores. Esto es útil para señalar partes clave de una oración o párrafo.

html

Ejemplo Completo de Semántica en el Texto

En este ejemplo, combinamos varias etiquetas de semántica de texto para mostrar cómo aplicar énfasis, citas y formato en un documento HTML.

html

Conclusión

En este capítulo, hemos explorado cómo aplicar semántica al texto en HTML utilizando etiquetas como <strong>, <em>, <blockquote>, <abbr>, <cite>, <code>, <pre>, y <mark>. Estas etiquetas ayudan a mejorar la accesibilidad y la presentación del contenido textual, permitiendo que los usuarios y motores de búsqueda comprendan mejor el propósito y la estructura del texto.

En el próximo capítulo, abordaremos la semántica en los formularios y cómo utilizar etiquetas y atributos para crear formularios accesibles y claros para los usuarios.