Skip to content
Alebat

Enfatizar y Resaltar Texto en HTML

HTML ofrece varias etiquetas para modificar la apariencia del texto y transmitir ciertos significados semánticos. Vamos a profundizar en cada una de ellas:

1. <strong> y <b>: Negritas

  • <b>: Esta etiqueta se utiliza para mostrar texto en negrita. Su uso es puramente estético, sin implicar ningún tipo de importancia o urgencia. Es decir, cuando usas <b>, simplemente estás diciendo “este texto debe destacarse visualmente”, pero sin un significado semántico adicional.

    Ejemplo:

    <b>Texto en negrita</b>

  • <strong>: Aunque visualmente produce el mismo efecto que <b>, la etiqueta <strong> lleva un peso semántico adicional. Significa que el texto es de gran importancia. Los motores de búsqueda y las tecnologías de asistencia, como los lectores de pantalla para usuarios con discapacidad visual, pueden interpretar el texto marcado con <strong> como algo que merece especial atención.

    Ejemplo:

    <strong>Texto importante</strong>

2. <em> y <i>: Cursivas

  • <i>: Esta etiqueta se utiliza para mostrar texto en cursiva. Al igual que <b>, su función es puramente estética. Se usa comúnmente para títulos de obras, nombres científicos, términos extranjeros, etc.

    Ejemplo:

    <i>Texto en cursiva</i>

  • <em>: Al igual que <strong>, <em> añade un significado semántico al texto. Indica que el texto debe ser enfatizado, lo cual es útil para cambiar la intonación ola importancia de una palabra o frase en un contexto. Los lectores de pantalla pueden cambiar su tono de voz al leer texto marcado con <em>.

    Ejemplo:

    <em>Texto enfatizado</em>

3. <mark>: Resaltado

  • <mark>: Esta etiqueta se usa para simular el efecto de resaltar texto con un marcador. Es útil para indicar partes de un texto que son de particular relevancia o para destacar referencias. Visualmente, suele mostrarse con un fondo amarillo o de otro color llamativo.

    Ejemplo:

    <mark>Texto resaltado</mark>

Importancia del Uso Semántico

Es importante destacar que el uso de etiquetas con significado semántico, como <strong> y <em>, es una buena práctica en el desarrollo web. Mejora la accesibilidad del sitio y ayuda a los motores de búsqueda a comprender mejor la estructura y el contenido de tus páginas. Esto puede contribuir a una mejor experiencia del usuario y potencialmente a una mejor clasificación en los resultados de búsqueda.