Qual é a diferença entre <b> e <strong>, <i> e <em>?

779

Qual é a diferença entre <b>and <strong>, <i>e <em>em HTML / XHTML? Quando você deve usar cada um?

Philip Morton
fonte
Pelo menos por agora, tudo o que vi em StackOverflow foi "negrito" usando <b> elemento
OverCoder
MDN tem descrição clara (com exemplos) sobre como deve ser usado essas tags: <em>, <strong>, <b>,<i>
totymedli

Respostas:

1044

Eles têm o mesmo efeito nos mecanismos normais de renderização de navegadores da Web , mas há uma diferença fundamental entre eles.

Como o autor escreve em uma postagem da lista de discussão :

Pense em três situações diferentes:

  • navegadores da web
  • pessoas cegas
  • celulares

"Negrito" é um estilo - quando você diz "uma palavra em negrito" , as pessoas basicamente sabem que significa adicionar mais, digamos "tinta", ao redor das letras até que elas se destaquem mais entre as demais.

Infelizmente, isso não significa nada para uma pessoa cega. Em telefones celulares e outros PDAs, o texto já está em negrito porque a resolução da tela é muito pequena. Você não pode ousar em negrito sem estragar tudo.

<b>é um estilo - sabemos como deve ser "negrito".

<strong>no entanto, é uma indicação de como algo deve ser entendido . "Forte" pode (e geralmente significa) "negrito" em um navegador, mas também pode significar um tom mais baixo para um programa de conversação como o Jaws (para pessoas cegas) ou ser representado por um sublinhado (já que você não pode negritar um negrito) em um Palm Pilot.

HTML nunca foi feito para ser sobre estilos. Faça algumas pesquisas por "Tim Berners-Lee" e "a web semântica". <strong>é semântico - descreve o texto ao redor (por exemplo, "este texto deve ser mais forte que o restante do texto exibido" ), em vez de descrever como o texto ao redor deve ser exibido (por exemplo, "este texto deve ser negrito " ).

splattne
fonte
160
Observe que <b> e <i> não foram preteridos no HTML5. Seu novo uso é representar semanticamente estilos (ou apresentação pretendida), enquanto <strong> e <em> representam estrutura . Você deve ler stellify.net/…
Natan Yellin
12
Ótima resposta, mas eu diria que "você não pode negrito um negrito" está errado porque você está assumindo que é um conceito booleano, quando o peso da fonte: adota uma abordagem mais variável. Agora que existem telas de alta fidelidade, existem níveis de ousadia.
TravisO
4
@TravisO Eu acredito que ele estava falando com as restrições técnicas específicas do Palm Pilot.
Brian Ortiz
4
Não acredito que muitas letras tenham algum significado intrínseco; <b> pode ter exatamente o mesmo significado semântico que <strong>, se assim o decidirmos. O que os fabricantes de leitores decidiram: eles os tratam de maneira diferente ou exatamente da mesma maneira?
Aprillion
21
@deathApril Mas eles fazem! Eles têm significado! HTML não é definido pelo que você acredita ou pelo que decide.
Sr. Lister
231

<b>e <i>são explícitos - eles especificam negrito e itálico, respectivamente.

<strong>e <em>são semânticos - eles especificam que o texto em anexo deve ser "forte" ou "enfatizado" de alguma forma, geralmente em negrito e itálico, mas permite que o estilo real seja controlado via CSS. Portanto, estes são preferidos em páginas da web modernas.

Tony Andrews
fonte
15
Boa explicação. Por outro lado, com HTML 5, <i> e <b> também são semânticos e não explícitos. Suspiro.
OregonGhost 7/11
1
São eles? Estou atrasado ...!
7138 Tony Andrews
5
Sim, a melhor explicação que eu li é stellify.net/...
Natan Yellin
25
O HTML5 tem novos significados semânticos para be i. São tags que você deve usar quando precisar chamar a atenção para uma parte da prosa ou para compensar a prosa normal, sem transmitir ênfase ( em), importância (para strong) ou relevância (para mark). bé para palavras-chave, nomes de produtos, palavras acionáveis ​​etc., enquanto ipara termos técnicos, pensamentos, frases etc. Honestamente, na OMI, é preciso haver uma maior distinção entre os dois.
chharvey
2
Pena que o texto stellify.net (e título) é completamente ilegível na maioria dos monitores baratos de escritórios e instalações ^^ (a falta de contraste é simplesmente deslumbrante)
Oskar Duveborn
24

<strong>e <em>adicione significado semântico extra ao seu documento. Acontece que eles também dão um estilo em negrito e itálico ao seu texto.

É claro que você pode substituir o estilo deles pelo CSS.

<b>e <i>por outro lado, só se aplicam estilo de fonte e não deve mais ser usado. (Como você deveria formatar com CSS, e se o texto fosse realmente importante, você provavelmente o tornaria "forte" ou "enfatizado" de qualquer maneira!)

Espero que isso faça sentido.

James
fonte
2
se você disser que <b> e <i> não devem mais ser usados, e o navegador antigo que não suporta <em> e <strong>?
Nirman 8/07
4
@Nirman Se alguém usa um navegador antigo para navegar na web, ele ou ela já tem muitos problemas, do ponto de vista visual e de segurança. Por isso, acredito que programadores e designers não devem mais suportar navegadores antigos.
yeyo
4
Nota: se dizemos navegadores antigos, queremos dizer Netscape 3 e IE2 aqui (o IE3 e o NS4 já suportam <strong> e <em>). Se você realmente precisa continuar suportando os navegadores do século XX, está enfrentando grandes problemas.
Sr. Lister
<b> and <i> on the other hand only apply font styling and should no longer be used.Os documentos oficiais do HTML5 dizem o contrário. Citação necessária?
1
Esta resposta foi publicada ~ 6 anos antes do lançamento do HTML5!
James
8

Aqui está um resumo das definições, juntamente com o uso sugerido:

<b>... uma extensão de texto para a qual a atenção está sendo chamada para fins utilitários sem transmitir qualquer importância extra e sem implicar uma voz ou humor alternativo, como palavras-chave em um resumo de documento, nomes de produtos em uma revisão, palavras acionáveis em software interativo baseado em texto ou um artigo .

<strong> ... agora representa mais importância do que forte ênfase.

<i>... um espaço de texto com uma voz ou humor alternativo, ou de outro modo desviado da prosa normal de uma maneira que indique uma qualidade diferente do texto, como designação taxonômica , termo técnico , frase idiomática de outro idioma , pensamento , ou um nome de navio em textos ocidentais.

<em> ... indica ênfase.

(Todas essas são citações diretas de fontes do W3C, com minha ênfase adicionada. Consulte: https://rawgithub.com/whatwg/html-differences/master/Overview.html#changed-elements e http://www.w3.org /TR/html401/struct/text.html#h-9.2.1 para os originais)

Rick Westera
fonte
7

<b>e <i>estão relacionadas com o estilo, enquanto <em>e <strong>são semântica. No HTML 4, os primeiros são classificados como elementos de estilo de fonte e o segundo como elementos de frase .

Como você indicou corretamente, <i>e <em>geralmente são considerados semelhantes, porque os navegadores geralmente processam os dois em itálico. Mas de acordo com as especificações, <em> indica ênfase e <strong> indica ênfase mais forte , o que é bastante claro, mas geralmente mal interpretado. Por outro lado, a distinção entre quando usar <i>ou <b>é realmente uma questão de estilo.

Kariem
fonte
1
strongnão indica "ênfase mais forte", mas sim " importância ". Para uma ênfase mais forte , aninhe um emelemento dentro de outro emelemento.
chharvey
@ TestSubject528491 Se você seguir o link para os elementos de frase que usei acima, verá que acabei de citar a especificação. Eu não acho que isso entre em conflito com a semântica da importância, nem que um ninho de dois ems enfatize dentro de uma ênfase, que eu entendo que você estava sugerindo.
Kariem
3
Eu acho que a especificação HTML5 está apenas fazendo mais uma distinção entre os dois. Na minha interpretação, "ênfase" significa estresse no tom de voz. Por exemplo, "Você quer por aqueles jeans?" versus "Você quer comprar esses jeans?" têm significados diferentes devido ao posicionamento da ênfase. OTOH, "Importância" não tem efeito com base no posicionamento. Por exemplo, " AVISO : cuidado com o cachorro!" teria o mesmo significado se a importância fosse removida.
chharvey
<b> and <i> are both related to styleerm. Os documentos oficiais do HTML5 dizem o contrário. Citação necessária?
@vaxquis vinculado acima para HTML 4: <b>e <i>são elementos de estilo de fonte, enquanto <em>e <strong>são elementos de frase. Alguma sugestão para melhorar isso? Para completar, e também porque o seu comentário não incluía uma citação, em HTML 5.2, todos esses elementos são descritos em conteúdo fraseado
Kariem
7

Embora <strong>e <em>naturalmente sejam mais semanticamente corretos, parece haver razões legítimas definidas para usar o<b><i> tags e no conteúdo escrito pelo cliente.

Nesse conteúdo, palavras ou frases podem estar em negrito ou itálico e geralmente não cabe a nós analisar o raciocínio semântico para esse negrito ou itálico.

Além disso, esse conteúdo pode se referir a palavras e frases em negrito e itálico para transmitir um significado específico.

Um exemplo seria uma pergunta do exame de inglês que instrui um aluno a substituir a palavra em negrito.

mwiik
fonte
"mais semanticamente correto"? O que você quer dizer com isso? Você leu a especificação HTML5 nas tags b / i?
4

<em>e <strong>consome mais largura de banda que <i>e <b>.

Eles também exigem mais digitação (se não forem gerados automaticamente).

Eles também confundem a tela do editor com mais texto. Eu me lembro que os programadores gostam de arquivos de origem menores, se forem iguais. (E sejamos realistas, eles são iguais. Sim, existem "técnicas" (<i> tosse diferenças </i>, ah, desculpe-me) diferenças, mas isso é quase sempre falso.)

Com qualquer uma das tags acima, você pode usar folhas de estilo para personalizar como elas aparecem da maneira que desejar, se precisar que elas pareçam diferentes das renderizações padrão.

Thomas Eding
fonte
1
Lol, essa deve ser a resposta aceita (HHOS). A sua é a resposta mais prática e correta em toda a página, mesmo que seja uma piada. Essa coisa toda sobre "semântica" é um jogo bobo para começar. Nós todos sabemos que qualquer um que olha para esta questão está aqui trabalhando com os principais fabricantes de navegadores em mente, Chrome, Firefox, IE, etc. Nós apenas queremos saber o que o verdadeiro , reais diferenças podem ser, não o que uma comissão de debates sobre a sua abundância de tempo livre.
GDP2 23/12/19
2

Como outros já disseram, <b> e <i> são explícitos (isto é, "tornam este texto em negrito"), enquanto <strong> e <em> são semânticos (isto é, "este texto deve ser enfatizado").

No contexto de um navegador da web moderno, é difícil ver a diferença (ambos parecem produzir o mesmo resultado, certo?), Mas pense nos leitores de tela para deficientes visuais. Se um leitor de tela encontrasse uma tag <i>, não saberia o que fazer. Mas se encontrar uma tag <em>, ele saberá que o que estiver dentro deve ser enfatizado para o ouvinte. E aí você obtém a diferença prática.

JamShady
fonte
<b> and <i> are explicit (i.e. "make this text bold"),erm. Os documentos oficiais do HTML5 dizem o contrário. Citação necessária?
2

<i>, <b>, <em>E <strong>tags são tradicionalmente representacional. Mas eles receberam um novo significado semântico no HTML5 .

<i>e <b>foi usado para o estilo da fonte em HTML4. <i>foi usado para itálico e <b>negrito. No HTML5, a <i>tag tem um novo significado semântico de ' voz ou humor alternativo ' e a <b>tag tem o significado de deslocamento estilístico .

Exemplos de usos de <i>tags são: designação taxonômica, termo técnico, frase idiomática de outro idioma, transliteração, um pensamento, nomes de navios em textos ocidentais. Tal como -

<p><i>I hope this works</i>, he thought.</p>

Exemplos de usos de <b> tag são palavras-chave em uma extração de documento, nomes de produtos em uma revisão, palavras acionáveis ​​em um software interativo baseado em texto, lead de artigo.

O exemplo de parágrafo a seguir é estilisticamente deslocado dos parágrafos a seguir.

<p><b class="lead">The event takes place this upcoming Saturday, and over 3,000 people have already registered.</b></p>

<em>e <strong>tinha o significado de ênfase e forte ênfase no HTML4. Mas em HTML5 <em>meio estressado ênfase e <strong>meio forte importância .

No exemplo a seguir, deve haver uma alteração lingüística ao ler a palavra antes de ...

<p>Make sure to sign up <em>before</em> the day of the event, September 16, 2016</p>

No mesmo exemplo, podemos usar a <strong>tag da seguinte maneira.

<p>Make sure to sign up <em>before</em> the day of the event, <strong>September 16, 2016</strong></p>

para dar importância na data do evento.

MDN Ref:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

adnan2nd
fonte
1

Como os outros declarou, a diferença é que <b>e <i>fonte hardcode estilos, enquanto <strong>e<em> ditar significado semântico, com o estilo da fonte (ou falando entonação navegador ou-que-ter-lhe) a ser determinada no momento em que o texto é processado (ou falado).

Você pode pensar nisso como uma diferença entre um estilo de fonte "físico" e um estilo "lógico", se desejar. Em algum momento posterior, convém alterar a maneira <strong>como o <em>texto é exibido, digamos, alterando as propriedades em uma folha de estilos para adicionar alterações de cor e tamanho ou até mesmo usar completamente diferentes fontes de faces. Se você usou marcação "lógica" em vez de marcação "física" codificada, basta alterar as propriedades de exibição em um local, cada uma na sua folha de estilos, e todas as páginas que fazem referência a essa folha de estilos são alteradas automaticamente , sem sempre tendo que editá-los.

Muito liso, hein?

Essa também é a lógica por trás da definição de sub-estilos (referenciados usando a style=propriedade em tags de texto) para parágrafos, células da tabela, texto do cabeçalho, legendas etc. e uso de <div>tags. Você pode definir representação física para seus estilos lógicos na folha de estilos, e as alterações são refletidas automaticamente nas páginas da Web que fazem referência a essa folha de estilos. Deseja uma representação diferente para o código-fonte? Redefina a fonte, tamanho, peso, espaçamento etc. para o seu estilo "código".

Se você usa XHTML, pode até definir suas próprias tags semânticas, e sua folha de estilos faria as conversões para estilos de fonte físicos e layouts para você.


fonte
1
Você pode usar folhas de estilo para mudar completamente a maneira que <b>e <i>são processados também. Muito liso, hein?
Thomas Eding 4/04
be inão tinha código de nada. Assim como qualquer tag HMTL, eles têm um estilo CSS padrão e, assim como com qualquer tag, você pode alterá-lo da maneira que desejar.
Mecki
1

Eu uso <strong> e <b>, na verdade, exatamente pelas razões mencionadas neste segmento de respostas. Há momentos em que um texto em negrito simplesmente parece melhor, mas não é, necessariamente, semanticamente mais importante que o resto da frase. Aqui está um exemplo de uma página em que estou trabalhando agora:

"Recupera <strong> todos </strong> livros sobre <b> lacrosse </b>."

Naquela frase, a palavra "tudo" é muito importante e "lacrosse" menos - eu apenas a queria em negrito, porque representa um termo de pesquisa, e queria uma separação visual. Se você estiver visualizando a página com um leitor de tela, realmente não acho que seja necessário enfatizar a palavra "lacrosse".

Eu tenderia a imaginar que a maioria dos desenvolvedores da Web usa um dos outros, mas ambos estão bem - <b> definitivamente não é preterido, como algumas pessoas afirmaram. Para mim, é apenas uma linha tênue entre apelo visual e significado.

Justin Blum
fonte
1

Use-os apenas se o uso de classes de estilo CSS for, por qualquer motivo, pouco convincente ou impossível (como sistemas de blog, permita que apenas algumas tags sejam usadas em postagens e, eventualmente, estilos incorporados). Outro motivo é o suporte a navegadores muito antigos (alguns dispositivos móveis?) Ou mecanismos de pesquisa primitivos (que fornecem pontos para <b>ou <strong>tags, em vez de analisar estilos CSS).

Se você pode definir estilos CSS, use-os.

Marinheiro Danubiano
fonte
1

Para texto em negrito usando a <b> tag

Para texto importante usando <strong> tag

Para texto em itálico usando <i> tag

Para texto enfatizado usando <em> tag

Touhidur Rahaman
fonte
0

<b>e <i>deve ser evitado porque descreve o estilo do texto. Em vez disso, use <strong>e <em>porque isso descreve a semântica (o significado) do texto.

Tal como acontece com todas as coisas em HTML, você deve estar pensando não sobre como você deseja que ele olha , mas o que você realmente média . Claro, pode ser apenas negrito e itálico para você, mas não para um leitor de tela.

nickf
fonte
2
Completamente incorreto, <b> e <i> não devem ser evitados. Eles têm significados semânticos no HTML5.
precisa saber é o seguinte
0

b ou i significa que você deseja que o texto seja renderizado em negrito ou itálico. strong ou em significa que você deseja que o texto seja renderizado de uma maneira que o usuário entenda como "importante". O padrão é renderizar forte como negrito e em itálico, mas algumas outras culturas podem usar um mapeamento diferente.

Como strings em um programa, b e eu seriam "codificados", enquanto strong e em seriam "localizados".

Stephan Leclercq
fonte
0

"Eles têm o mesmo efeito. No entanto, o XHTML, uma versão mais recente e mais limpa de HTML, recomenda o uso da <strong>tag. Forte é melhor porque é mais fácil de ler - seu significado é mais claro. Além disso, <strong>transmite um significado - mostrando o texto fortemente - enquanto <b>(em negrito) transmite um método - em negrito o texto.Com forte, seu código ainda faz sentido se você usar folhas de estilo CSS para alterar quais são os métodos de tornar o texto forte.

O mesmo vale para a diferença entre <i>e <em>".

Google dixit:

http://wiki.answers.com/Q/What_is_the_difference_between_HTML_tags_b_and_strong

Antonio Louro
fonte
0

Elementos de formatação HTML:

O HTML também define elementos especiais para definir texto com um significado especial. O HTML usa elementos como <b> e <i> para formatar a saída, como texto em negrito ou itálico.

Formatação em negrito e forte em HTML:

O elemento HTML <b> define texto em negrito, sem nenhuma importância extra.

<b>This text is bold</b>

O elemento HTML <strong> define texto forte, com importância "forte" semântica adicionada.

<strong>This text is strong</strong>

Formatação HTML itálico e enfatizado:

O elemento HTML <i> define texto em itálico, sem nenhuma importância extra.

<i>This text is italic</i>

O elemento HTML <em> define texto enfatizado, com importância semântica adicional.

<em>This text is emphasized</em>
Muhammad Awais
fonte
The HTML <b> element defines bold text, without any extra importance. The HTML <i> element defines italic text, without any extra importance.erm. Os documentos oficiais do HTML5 dizem o contrário. Citação necessária?
0

Você geralmente deve tentar evitar <b>e <i>. Eles foram introduzidos para o layout da página (alterando a aparência) nas versões anteriores do HMTL antes da criação do CSS, como a fonttag removida enquanto isso , e foram mantidos principalmente para compatibilidade com versões anteriores e porque alguns fóruns permitem HTML embutido e isso é fácil. maneira de alterar a aparência do texto (como o BBCode usando [i], você pode usar <i>e assim por diante).

Desde a criação do CSS, o layout não é mais nada que deva ser feito em HTML, por isso o CSS foi criado em primeiro lugar (HTML == Estrutura, CSS == Layout). Essas tags também podem desaparecer no futuro, afinal você pode usar CSS e spantags para tornar o texto em negrito / itálico se precisar de uma variação de fonte "sem sentido". O HTML 5 ainda permite, mas declara que marcar o texto dessa maneira não tem significado .

<em>e, <strong>por outro lado, apenas diz que algo é "enfatizado" ou "fortemente enfatizado", deixa completamente aberto ao navegador como renderizá-lo. A maioria dos navegadores será renderizada emem itálico e strongem negrito, conforme o padrão sugere, mas não é obrigada a fazer isso (eles podem usar cores, tamanhos e fontes diferentes, o que for). Você pode usar CSS para alterar o comportamento da maneira que desejar. Você pode fazer emnegrito, se quiser, e strongnegrito e vermelho, por exemplo.

Mecki
fonte
7
<b> e <i> NÃO são preteridos no HTML 4 e ainda são totalmente suportados, mesmo no próximo HTML 5. <em> e <strong> não são substitutos para eles. Veja também w3.org/TR/html401/index/elements.html
thomasrutter
1
@thomasrutter Eles ainda estão no HMTL5, mas com um significado diferente e uma explicação muito detalhada de como usá-los ou melhor, de como não usá-los. Observe que essas tags não têm significado (negrito e itálico não são significados , são instruções de design e HMTL é sobre significado, CSS é sobre design) - HTML é sobre descrever o que é um texto e não sobre como renderizá-lo (que foi separado após o HMTL3 por um bom motivo).
Mecki
-2

<strong>e <em>são abstratos (o que as pessoas querem dizer quando dizem que é semântica). <b>e <i>são maneiras específicas de fazer algo "forte" ou "enfatizado"

Analogia:

Ambos <strong>é <b>e <em>é para<i>

Como

"veículo" é "jipe"

ahnbizcad
fonte
1
Não vejo por que essa resposta foi rebaixada. Muitas outras respostas com conteúdos semelhantes foram bem recebidas.
Aditya_m
-4

Usamos a <strong>tag para texto com alta prioridade para fins de SEO, como nome do produto, nome da empresa etc., enquanto <b>simples torna em negrito.

Da mesma forma, usamos <em>texto com alta prioridade para SEO e, ao mesmo tempo, <i>tornar o texto em itálico.

ritakriti
fonte
4
Algumas tags HTML realmente têm aplicação de SEO. Meta descrição, meta robô ou link canônico para citar alguns. Até onde sabemos, strong / em não é um deles, nem na teoria nem na prática.
Sheepy 2/09/14