Como seguramente sepas si estás aquí, en HTML contamos con un par de etiquetas distintas que a priori sirven para hacer exactamente lo mismo y bueno… pues obviamente es algo que resulta un poco extraño. Hablamos de las etiquetas <strong> y <b>.
Ambas etiquetas tienen como objetivo el marcar un elemento de texto en negrita y esto es algo que puede usarse tanto por motivos estéticos como por motivos de SEO (cosas que por supuesto iré aclarando en este post). El punto es… ¿por qué contamos con dos etiquetas distintas si al final el resultado obtenido es exactamente el mismo?
¡Consulta nuestros servicios!
Pues bueno, de hecho si que hay una diferencia entre ambas etiquetas y la verdad es que es un tema bastante relevante sobre todo si te interesa el SEO (que debería interesarle a cualquier persona que tenga una página web). Así que nada, si quieres quitarte la duda de encima, sigue leyendo.
Tabla de Contenidos
Un Breve Repaso
Antes de entrar en materia, como seguramente haya gente que lea este post sin tener muchas nociones sobre HTML, recordaré muy por encima como se utilizan las 2 etiquetas protagonistas de este post:
<p>Hola, soy una <strong>negrita con strong</strong></p> <p>Y yo soy una <b>negrita con b</b></p>
Y así se vería:
Hola, soy una negrita con strong
Y yo soy una negrita con b
Como ves, el resultado ofrecido es el mismo, se aplica exactamente la misma negrita. Ah, y por si no lo sabes, la etiqueta <p> sirve para delimitar el inicio y final de un párrafo.
Eso sí, mediante CSS podrías cambiar la estética de ambas etiquetas en el caso de que quisieras diferenciarlas a nivel visual. Pero este es el comportamiento que tienen estas dos etiquetas por defecto, que básicamente es aplicar un font-weight: bold; (esto es CSS así que tampoco entraremos demasiado en este post, no es el objetivo).
El Distinto Significado de Ambas Etiquetas
Si bien es cierto que a nivel visual ambas etiquetas muestran exactamente el mismo comportamiento por defecto, hay una diferencia más allá de de esto, una diferencia más a nivel de «significado» podríamos decir.
Sí, ambas etiquetas tienen propósitos distintos, aunque a la hora de la verdad esto es algo que únicamente se tiene en cuenta en lo que respecta al SEO de un sitio, te explico:
Sendas etiquetas se utilizan para marcar un texto en negrita, pero mientras que con <b> estaríamos aplicando una negrita puramente por motivos estéticos, con <strong> en cambio también estaríamos indicándole a los buscadores que dicho elemento de texto es relevante para el usuario y por lo tanto, sería mejor que nos lo pensemos bastante bien antes de usar la etiqueta strong.
En el SEO es muy importante saber etiquetar bien el contenido y de cara a las negritas, este es uno de los aspectos más claves a tener en cuenta. Y si eres por ejemplo uno de los múltiples usuarios que usan CMS (gestores de contenido) como por ejemplo WordPress… ¿alguna vez te has planteado cuál es la negrita que se aplica al usar el editor de texto de las entradas de WordPress? Bueno, pues ya te lo digo yo, se usa la etiqueta <strong>; vamos, que si quieres usar la etiqueta <b> porque no tienes la intención de señalar que algo es importante, deberías cambiarla por la etiqueta <b>.
¿Cuándo uso <strong> y cuándo <b>?
Y para rematar el tema, te explicaré cuándo deberías usar una etiqueta y cuando otra. Ya tendrás una ligera idea al haberte explicado la diferencia entre ambas más arriba, pero en esta sección también añadiré algunos consejos para que lo entiendas mejor; ejemplos que yo uso en mi día a día.
Como ya he comentado, deberías usar la etiqueta <strong> cuando quieras marcar cierta palabra o frase como que es importante para el usuario o para la intención de búsqueda; eso sí, no abuses de ello ya que eso es una mala práctica que puede conllevar penalizaciones, práctica conocida como «Keyword Stuffing» (que resumiendo mucho, es pasarse de la ralla con el SEO).
Si tu objetivo es usar negritas simplemente por estética, sin sugerir de ningún modo que eso sea algo relevante… pues deberás usar la etiqueta <b>.
En mi caso uso unas pocas etiquetas <strong> para marcar aquello que yo considero que es relevante para el usuario o la intención de búsqueda y las negritas estilo <b> las suelo usar principalmente cuando creo listas; te explico.
A mí me gusta crear listas tipo la siguiente:
- Elemento 1: Explicación elemento 1
- Elemento 2: Explicación elemento 2
- Elemento 3: Explicación elemento 3
Te dejo el código también:
<ul> <li><b>Elemento 1</b>: Explicación elemento 1</li> <li><b>Elemento 2</b>: Explicación elemento 2</li> <li><b>Elemento 3</b>: Explicación elemento 3</li> </ul>
Como dato adicional, cuando usas CMS como WordPress y creas una lista con el editor de texto, al final lo que hace WordPress es crear este código de arriba por ti.
Pero el caso, que en las listas siempre añado la etiqueta b para aplicar una negrita a lo que precede a los dos puntos de cada elemento de la lista. Si usara <strong> estaría, en mi opinión, haciendo un poco de «keyword stuffing» y por supuesto no es la idea; ahí es donde entra la etiqueta b, quiero aplicar una negrita simplemente por estética, sin ninguna otra intención.
Insisto en que es bastante importante no abusar de las etiquetas <strong> por tema SEO, así que asegúrate de utilizar esa etiqueta pocas veces y cuando simplemente quieras negritas por estética usa la etiqueta <b>.
¡Y eso es todo! ¿Conocías la diferencia entre ambas etiquetas HTML? ¿Sabías qué tan importante es este tema de cara a pulir el SEO de un sitio? ¿Cuándo usas tú una etiqueta u otra? ¡Deja tu comentario!
Más información aquí.
