Docs ejecutables de HTML: Negrita y cursiva

Q: ¿Cómo pongo texto en negrita en HTML?

Envuélvelo en cuando las palabras son importantes ( Warning: ), o en cuando solo quieres que destaquen sin darles más importancia, como el nombre de un producto. Las dos se ven en negrita por defecto.

Q: ¿Qué diferencia hay entre y ?

significa que el texto es importante, serio o urgente. llama la atención sobre un texto sin implicar importancia, como las palabras clave de un resumen. Se ven igual; la diferencia es el significado, que importa a los lectores de pantalla, a los buscadores y a otros desarrolladores.

Q: ¿Cómo pongo texto en cursiva en HTML?

Usa para un énfasis que cambia el sentido de la frase ("Yo sí lo dije" con el énfasis en "sí"), e para texto con otra voz: palabras extranjeras, términos técnicos, nombres de barcos, pensamientos. Las dos se ven en cursiva.

Q: ¿Cómo pongo texto en negrita y cursiva a la vez?

Anida las etiquetas: text . Ciérralas en orden inverso al que las abriste. Con CSS, pon font-weight: bold y font-style: italic en un mismo elemento.

Q: ¿Puedo poner texto en negrita con CSS?

Sí: font-weight: bold (o 700) en cualquier elemento. Usa CSS cuando la negrita es puramente visual, como la etiqueta de un botón o el estilo de la cabecera de una tabla, y las etiquetas HTML cuando las propias palabras son importantes o tienen énfasis.

Negrita y cursiva en HTML: etiquetas strong, b, em e i

Pon texto en negrita en HTML con o , y en cursiva con o . Aprende qué etiqueta usar en cada caso, cómo combinar negrita y cursiva, y cómo poner texto en negrita o cursiva con CSS.

Esta página incluye editores ejecutables: edita, ejecuta y ve el resultado al instante.

Por Kevin Spektor, Co-founder & CTO

Publicado el Sep 24, 2026

Cómo poner texto en negrita en HTML

Envuelve el texto en  o . Las dos lo ponen en negrita:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bold</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p><strong>Warning:</strong> unplug the device before opening it.</p>
  <p>The <b>Pro</b> plan includes offline mode.</p>
</body>
</html>

Se ven idénticas. La diferencia está en lo que dicen del texto.

strong vs b

Etiqueta	Significado	Ejemplo
`<strong>`	Contenido importante, serio o urgente	`<strong>Do not</strong> share your password.`
`<b>`	Destaca, pero sin importancia extra	Palabras clave de un resumen, un nombre de producto, las primeras palabras de un artículo

Elige  cuando alzarías la voz o no quieres que el lector lo pase por alto. Elige  cuando la negrita es una convención visual para ese tipo de texto. Si ninguna encaja y solo quieres un estilo, usa un  con una clase y CSS.

Cursiva: em e i

La pareja de cursiva sigue la misma idea:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Italics</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p>I <em>never</em> said she took the money.</p>
  <p>I never said <em>she</em> took the money.</p>
  <p>The word <i lang="fr">déjà vu</i> comes from French, and the ship was the <i>Endurance</i>.</p>
</body>
</html>

Etiqueta	Significado	Ejemplo
`<em>`	Énfasis: moverlo cambia el sentido de la frase	`I <em>never</em> said that.`
`<i>`	Otra voz: palabras extranjeras, términos técnicos, nombres de barcos, pensamientos	`<i lang="la">et cetera</i>`

Las dos primeras frases de arriba usan las mismas palabras y significan cosas distintas por dónde está . Cuando  marca una expresión en otro idioma, añade un atributo lang para que los lectores de pantalla la pronuncien bien.

Algunas otras etiquetas se ven en cursiva por defecto: <cite> (el título de una obra), <dfn> (un término que se está definiendo), <address> y <var>. Úsalas cuando encajen y deja que su estilo por defecto haga el resto.

Negrita y cursiva juntas

Anida una etiqueta dentro de la otra y ciérralas en orden inverso:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bold italic</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p><strong><em>Bold and italic</em></strong></p>
  <p><em>Italic with a <strong>bold</strong> word inside</em></p>
  <p><b><i>b and i together</i></b></p>
</body>
</html>

text (cerrando en el orden equivocado) se sigue mostrando, pero el navegador tiene que reparar el árbol y puede dividir tus elementos; consulta etiquetas para ver cómo es esa reparación.

Negrita y cursiva con CSS

Cuando el estilo es puramente visual (el título de una tarjeta, un precio, una etiqueta), usa CSS en el propio elemento en lugar de añadir una etiqueta. font-weight controla la negrita y font-style la cursiva:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS bold and italic</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .price { font-weight: bold; color: #16a34a; }
    .semi { font-weight: 600; }
    .note { font-style: italic; color: #4b5563; }
    .calm strong { font-weight: normal; color: #dc2626; }
  </style>
</head>
<body>
  <p>Price: <span class="price">$12</span></p>
  <p class="semi">font-weight: 600</p>
  <p class="note">A note set in italics with font-style.</p>
  <p class="calm"><strong>Still strong</strong>, shown in red instead of bold.</p>
</body>
</html>

La última línea muestra que significado y aspecto van por separado: el  conserva su significado mientras el CSS le da otro estilo. La gama completa de grosores (de 100 a 900) se explica en la página de font-weight en CSS.

Accesibilidad

La mayoría de los lectores de pantalla no cambian la voz para  o  con la configuración por defecto, así que la negrita y la cursiva son sobre todo pistas visuales. Todo lo que el usuario no debe pasar por alto (un error, un campo obligatorio, una fecha límite) debe quedar claro por las propias palabras, no solo por el estilo. Evita también los pasajes largos en cursiva o negrita: cuestan más de leer, sobre todo a personas con dislexia.

Errores comunes

Usar la negrita como encabezado. Una línea de texto en  encima de una sección no es un encabezado para los lectores de pantalla. Usa <h2> o <h3> y dale estilo.
Usar  para dar estilo. Si nada del texto es importante, usa  o CSS.
Poner un párrafo entero en negrita. El énfasis funciona cuando es escaso. Pon en negrita una frase, no el párrafo.
Cerrar las etiquetas en el orden equivocado. x, nunca x.
Etiquetas antiguas. La etiqueta  de los tutoriales viejos está obsoleta. Usa las etiquetas de arriba o font-weight.

Preguntas frecuentes

¿Cómo pongo texto en negrita en HTML?

Envuélvelo en  cuando las palabras son importantes (Warning:), o en  cuando solo quieres que destaquen sin darles más importancia, como el nombre de un producto. Las dos se ven en negrita por defecto.

¿Qué diferencia hay entre y ?

 significa que el texto es importante, serio o urgente.  llama la atención sobre un texto sin implicar importancia, como las palabras clave de un resumen. Se ven igual; la diferencia es el significado, que importa a los lectores de pantalla, a los buscadores y a otros desarrolladores.

¿Cómo pongo texto en cursiva en HTML?

Usa  para un énfasis que cambia el sentido de la frase ("Yo sí lo dije" con el énfasis en "sí"), e  para texto con otra voz: palabras extranjeras, términos técnicos, nombres de barcos, pensamientos. Las dos se ven en cursiva.

¿Cómo pongo texto en negrita y cursiva a la vez?

Anida las etiquetas: text. Ciérralas en orden inverso al que las abriste. Con CSS, pon font-weight: bold y font-style: italic en un mismo elemento.

¿Puedo poner texto en negrita con CSS?

Sí: font-weight: bold (o 700) en cualquier elemento. Usa CSS cuando la negrita es puramente visual, como la etiqueta de un botón o el estilo de la cabecera de una tabla, y las etiquetas HTML cuando las propias palabras son importantes o tienen énfasis.

Conceptos relacionados