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

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

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 " ).

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

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

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)

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

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.

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

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.

<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

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ê.

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.

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.

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

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

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".

"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

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>

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.

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

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.