Cómo poner un texto en negrita con HTML y CSS
Novedades

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.

Poner negrita con CSS

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.


5 comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *