Si eres un maquetador web, seguro que sabrás cómo poner el texto en negrita en CSS y HTML, pero si eres un blogger y usas WordPress, tal vez no entiendas mucho de código. En este post te queremos enseñar qué fácil es aplicar estas etiquetas HTML para resaltar una fuente tipográfica en negrita y de este modo destacar palabras clave y facilitar una lectura en diagonal (debemos tener en cuenta que el tiempo de lectura del usuario es limitado, al igual que su capacidad de concentración).
Resumen de Contenidos
✔️ Cómo afectan las negritas al SEO
Más allá de los títulos y encabezados, un factor importante en la maquetación de los textos de una web es aplicar la tipografía negrita a las frases, conceptos o palabras que queremos destacar.
La fuente negrita no solamente tiene un impacto visual que refuerza ideas clave haciendo que lleguen de forma más clara e inmediata al usuario, sino que además otorga una jerarquía en cuanto al posicionamiento web.
Los buscadores entenderán que deben poner más énfasis e interés en aquellos textos que dentro del código HTML vayan etiquetados como negrita, porque en teoría definen mejor el contenido.
✔️ Cómo poner negrita en HTML
Poner negrita en HTML es muy sencillo. Podemos hacerlo con dos etiquetas, <b> y <strong>. Dichas etiquetas deben abrirse y cerrarse, delimitando el texto exacto que queremos resaltar. Por ejemplo, si queremos destacar “diseño web Bilbao”, nuestro código HTML quedaría de la siguiente manera:
<b>diseño web Bilbao</b>
O bien:
<strong>diseño web Bilbao</strong>
Ambas fórmulas son correctas, y tienen el mismo efecto en cuanto a cómo se plasmará la tipografía negrita en nuestra pantalla, pero es más recomendable usar la etiqueta strong, ya que es a la que van a dar mayor importancia y fuerza los buscadores.
De hecho, algunos CMS como WordPress o programas como Dreamweaver utilizan la etiqueta strong, insertándola en el código HTML cuando marcamos la opción negrita en nuestros editores de texto.
✔️ Cómo poner el texto en negrita con CSS
Asimismo, el código CSS también puede ayudarnos a poner el texto en negrita, o a darles forma, variando su grosor y otras propiedades.
La propiedad font-weight es la que marca el grosor de la letra. Por supuesto podemos aplicarla a etiquetas, ids o clases, y darle los siguientes valores:
font-weight: bold;
Aplicará la negrita estándar.
font-weight: normal;
Pondrá la tipografía en su formato estándar.
font-weight: bolder;
Hará que la letra sea más gruesa que la del elemento padre.
font-weight: lighter;
Hará que la letra sea menos gruesa que la del elemento padre.
font-weight: valor de 100, 200, 300, 400, 500, 600, 700, 800 o 900;
Nos permite personalizar el grosor entre unas opciones predeterminadas, con una serie de valores múltiplos de 100. El formato normal se corresponde con el valor 400, y el bold con el 700. A partir de ahí podemos afinar y ajustar un poco el grosor en función de nuestras preferencias.
Incluso si queremos que el CSS afecte a todas las negritas de nuestro sitio web con unas características concretas, podemos hacerlo. Por ejemplo, si queremos que en lugar de 700 el grosor por defecto pase a ser 900, podemos cambiar nuestra hoja de estilos CSS de esta forma:
strong, b { font-weight: 900; }
Como veis, es muy sencillo insertar negritas en nuestros textos para web, y además de manera abierta y flexible, ya que podemos hacer uso de todas las posibilidades que nos ofrecen los códigos HTML5 y CSS3.
gracias
Gracias por comentar. Nos alegra que te haya gustado el post.
>b>Excelente>/b>
Hola, Josue. Muchas gracias por comentar. Un cordial saludo.
Está mal puesto. Sería así:
Excelente