En este post vamos a sumergirnos en el universo del HTML5 para aprender cómo potenciar tu contenido usando las etiquetas strong y em. Verás cómo estas etiquetas, aunque pueden parecer insignificantes, juegan un papel esencial en la forma en que se lee y se interpreta un página web.
¿Por qué son importantes las etiquetas en HTML5?
Antes de entrar en detalles, es vital entender por qué las etiquetas HTML tienen tanta importancia. Las etiquetas HTML son los cimientos de cualquier página web. Cada elemento HTML en tu página web está encerrado en una etiqueta. Estas etiquetas no solo estructuran y organizan tu contenido, sino que también le dan significado a la información que contienen.
Ahora que ya sabemos el papel vital que juegan las etiquetas HTML en el desarrollo web, es hora de enfatizar en las etiquetas strong y em, dos etiquetas que a menudo se pasan por alto.
Enfatizando con <em>
La etiqueta <em> en HTML5 se usa para enfatizar texto. Esto significa que el texto dentro de esta etiqueta se muestra generalmente en cursiva. Aun así, la etiqueta <em> no se usa solo por su estilismo visual, el cual puede cambiar según el navegador que usemos o el estilo que se aplique con CSS. Esta etiqueta se utiliza para dar un énfasis extra a la palabra clave o al fragmento de texto que se encuentra dentro. Cuando utilizas <em>, estás indicando que esa parte de texto es realmente importante.
Veamos un ejemplo:
<p>El Bootcamp de KeepCoding es <em>increíble</em>.</p>
En este ejemplo podemos ver que la palabra increíble se mostrará en cursiva, indicando que tiene mayor importancia en la frase. Muchas veces se confunde esta etiqueta <em> con la función que tiene la etiqueta <strong>, así que es importante que tengas en cuenta el contexto a la hora de usar cada una de estas etiquetas.
Dando peso con <strong>
Luego tenemos la etiqueta <strong>. Al igual que <em>, <strong> también cambia la forma en que se muestra el texto; en este caso, lo pone en negrita. El propósito de la etiqueta <strong> va más allá de simplemente hacer que el texto se vea diferente. Cuando usas la etiqueta <strong>, estás diciendo que ese texto tiene peso. Es otra forma de resaltar la importancia de una sección de texto. Lo que se quiere lograr con esta etiqueta es que la información clave o los avisos importantes puedan transmitirse al lector de la página web y, de ese modo, que las personas sepan qué es lo relevante de nuestro contenido.
Por ejemplo:
<p>El Bootcamp de KeepCoding puede <strong>cambiar tu vida</strong>.</p>
Aquí vemos que la frase cambiar tu vida se mostrará en negrita, indicando que es un punto esencial del mensaje. De este modo, la persona que ingrese a nuestra página web y lea el texto en negrita sabrá que lo que estamos transmitiendo es de suma importancia. También serán conscientes de ellos los motores de búsqueda.
Ten en cuenta que las etiquetas strong y em no se usan para que el texto se vea bonito, sino para darles énfasis a las palabras.
¿Por qué no solo usar <b> para texto en negrita e <i> para texto en itálica?
Esta es una pregunta que frecuentemente se hacen los desarrolladores web. Resulta que, en las primeras versiones de HTML, <b> y <i> eran las etiquetas estándar para poner texto en negrita e itálica. Con HTML5 se introdujeron <strong> y <em>, respectivamente.
La razón es que <b> e <i> simplemente cambian la forma en la que se muestra el texto, pero no aportan ningún significado adicional al contenido. En cambio, <strong> y <em> no solo cambian la apariencia del texto, sino que también añaden un nivel extra de significado, lo que ayuda a los motores de búsqueda a comprender mejor tu página.
Así que ahora ya sabes. Cuando estés diseñando tu próxima página web HTML, recuerda que las etiquetas strong y em son mucho más que solo etiquetas para hacer el texto se vea en negrita o itálica. Son herramientas poderosas que puedes utilizar para darle más significado a tu contenido y hacerlo más accesible para los motores de búsqueda.
¡Transforma tu futuro!
¿Te ha gustado lo que has aprendido aquí sobre las etiquetas strong y em? Pues esto es solo una pequeña muestra de lo que te espera si decides unirte a nuestro Desarrollo Web Full Stack Bootcamp. No solo aprenderás más sobre las etiquetas HTML y cómo potenciar tu contenido, sino que también te sumergirás en el fascinante mundo del desarrollo web. ¡En pocos meses lograrás convertirte en todo un profesional y destacar en el mercado laboral IT!
