Docs executáveis de HTML: Negrito e itálico

Q: Como deixar um texto em negrito no HTML?

Envolva o texto em quando as palavras são importantes ( Warning: ), ou em quando você só quer que elas se destaquem sem importância extra, como o nome de um produto. As duas aparecem em negrito por padrão.

Q: Qual a diferença entre e ?

significa que o texto é importante, sério ou urgente. chama a atenção para o texto sem indicar importância, como palavras-chave num resumo. A aparência é a mesma; a diferença é o significado, que importa para leitores de tela, buscadores e outros desenvolvedores.

Q: Como deixar um texto em itálico no HTML?

Use para uma ênfase que muda o sentido da frase ("eu disse isso sim", com ênfase em "disse"), e para texto numa voz diferente: palavras estrangeiras, termos técnicos, nomes de navios, pensamentos. As duas aparecem em itálico.

Q: Como deixar um texto em negrito e itálico ao mesmo tempo?

Aninhe as tags: text . Feche na ordem inversa em que abriu. Com CSS, defina font-weight: bold e font-style: italic no mesmo elemento.

Q: Posso fazer negrito com CSS?

Sim: font-weight: bold (ou 700) em qualquer elemento. Use CSS quando o negrito é só visual, como o texto de um botão ou o estilo do cabeçalho de uma tabela, e as tags HTML quando as próprias palavras são importantes ou enfatizadas.

Negrito e itálico em HTML: tags strong, b, em e i

Deixe o texto em negrito no HTML com ou , e em itálico com ou . Veja qual tag usar em cada caso, como combinar negrito e itálico e como fazer negrito ou itálico com CSS.

Esta página tem editores executáveis - edite, execute e veja a saída na hora.

Por Kevin Spektor, Co-founder & CTO

Publicado em Sep 24, 2026

Como deixar um texto em negrito no HTML

Envolva o texto em  ou . As duas deixam em negrito:

<!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>

A aparência é idêntica. A diferença está no que elas dizem sobre o texto.

strong vs b

Tag	Significado	Exemplo
`<strong>`	Conteúdo importante, sério ou urgente	`<strong>Do not</strong> share your password.`
`<b>`	Se destaca, mas sem importância extra	Palavras-chave num resumo, o nome de um produto, as primeiras palavras de um artigo

Escolha  quando você levantaria a voz ou não quer que o leitor deixe passar. Escolha  quando o negrito é uma convenção visual para esse tipo de texto. Se nenhuma das duas serve e você só quer um estilo, use um  com uma classe e CSS.

Itálico: em e i

O par do itálico segue a mesma ideia:

<!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>

Tag	Significado	Exemplo
`<em>`	Ênfase: mudar de lugar muda o sentido da frase	`I <em>never</em> said that.`
`<i>`	Voz diferente: palavras estrangeiras, termos técnicos, nomes de navios, pensamentos	`<i lang="la">et cetera</i>`

As duas primeiras frases acima usam as mesmas palavras e significam coisas diferentes por causa de onde está o . Quando  marca uma expressão em outro idioma, adicione um atributo lang para que os leitores de tela pronunciem corretamente.

Algumas outras tags ficam em itálico por padrão: <cite> (o título de uma obra), <dfn> (um termo sendo definido), <address> e <var>. Use essas tags quando fizerem sentido e deixe o estilo padrão fazer o resto.

Negrito e itálico juntos

Coloque uma tag dentro da outra e feche na ordem inversa:

<!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 (fechando na ordem errada) ainda aparece, mas o navegador precisa consertar a árvore e pode dividir seus elementos; veja tags para saber como é esse conserto.

Negrito e itálico com CSS

Quando o estilo é só visual (o título de um card, um preço, um rótulo), use CSS no próprio elemento em vez de adicionar uma tag. font-weight controla o negrito e font-style controla o itálico:

<!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>

A última linha mostra que significado e aparência são coisas separadas: o  mantém o seu significado enquanto o CSS o estiliza de outro jeito. A faixa completa de pesos (100 a 900) está na página de font-weight no CSS.

Acessibilidade

A maioria dos leitores de tela não muda a voz para  ou  com as configurações padrão, então negrito e itálico são principalmente sinais visuais. Tudo o que o usuário não pode deixar passar (um erro, um campo obrigatório, um prazo) precisa ficar claro pelas próprias palavras, não só pelo estilo. Evite também trechos longos em itálico ou negrito: eles são mais difíceis de ler, principalmente para leitores com dislexia.

Erros comuns

Usar negrito como título. Uma linha de texto em  acima de uma seção não é um título para leitores de tela. Use <h2> ou <h3> e estilize.
Usar  para estilizar. Se nada no texto é importante, use  ou CSS.
Deixar um parágrafo inteiro em negrito. A ênfase funciona quando é rara. Destaque uma expressão, não o parágrafo.
Fechar as tags na ordem errada. x, nunca x.
Tags antigas. A tag  dos tutoriais antigos está obsoleta. Use as tags acima ou font-weight.

Perguntas frequentes

Como deixar um texto em negrito no HTML?

Envolva o texto em  quando as palavras são importantes (Warning:), ou em  quando você só quer que elas se destaquem sem importância extra, como o nome de um produto. As duas aparecem em negrito por padrão.

Qual a diferença entre e ?

 significa que o texto é importante, sério ou urgente.  chama a atenção para o texto sem indicar importância, como palavras-chave num resumo. A aparência é a mesma; a diferença é o significado, que importa para leitores de tela, buscadores e outros desenvolvedores.

Como deixar um texto em itálico no HTML?

Use  para uma ênfase que muda o sentido da frase ("eu disse isso sim", com ênfase em "disse"), e  para texto numa voz diferente: palavras estrangeiras, termos técnicos, nomes de navios, pensamentos. As duas aparecem em itálico.

Como deixar um texto em negrito e itálico ao mesmo tempo?

Aninhe as tags: text. Feche na ordem inversa em que abriu. Com CSS, defina font-weight: bold e font-style: italic no mesmo elemento.

Posso fazer negrito com CSS?

Sim: font-weight: bold (ou 700) em qualquer elemento. Use CSS quando o negrito é só visual, como o texto de um botão ou o estilo do cabeçalho de uma tabela, e as tags HTML quando as próprias palavras são importantes ou enfatizadas.

Conceitos relacionados