Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

b x strong – i x em

Publicado em: 2006-03-22 — 19.667 visualizacoes

A especificação W3C para o HTML normatiza e classifica como:
1-) phrase elements (pode ser traduzido para "elementos de frase" ou ainda, "elementos de expressão") os seguintes elementos:

EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM
Diz a especificação ainda: Elementos de expressão adicionam uma informação estrutural a um fragmento de texto e a renderização de cada um deles depende do agente de usuário. Em geral um navegador renderiza o elemento strong em negrito e o elemento em em itálico.

2-) font style elements (pode ser traduzido para "elementos para estilização de fontes") os seguintes elementos:
TT, I, B, BIG, SMALL, STRIKE, S, U
Diz a especificação ainda: A renderização dos fragmentos de texto marcados com elementos para estilização de fontes depende do agente de usuário.

Como informação apenas, é comum o agente de usuário navegador renderizar assim:

TT: texto com fonte teletype ou monospaced;
I: texto em itálico.
B: texto em negrito.
BIG: texto com fonte grande.
SMALL: texto com fonte pequena.
STRIKE e S: elementos em desuso. texto cortado por uma linha.
U: elemento em desuso. texto sublinhado.

Vamos focar nossa atenção nos elementos de expressão EM, STRONG e nos elementos para estilização de fontes I, B.
Pelo fato de serem renderizados em um navegador com forma de apresentação idênticas (negrito e itálico) muitos desenvolvedores fazem uso de um e de outro indiscriminadamente e até mesmo as vezes por uma questão de gosto pessoal.
Contudo há a ocasião certa e correta para empregar um e outro.

E agora a pergunta: Quando devo usar strong ou b? em ou i? Por quê?.
Fica a pergunta para você dar sua opinião, comentar, discordar, acresentar, participar e tudo mais sobre esta questão, deixando sua mensagem nos comentários da matéria.
Daqui a alguns dias darei uma reposta, consolidando as opiniões recebidas. Até lá! e conto com sua participação e debate.

[ atualizações: ]
2006-03-24: Publicado o artigo Elementos de frase – 1a. Parte onde explico os demais elementos de frase relacionados nesta matéria

2006-05-02: Os comentários apontam para um caminho correto. Consolidando conforme prometido:

As tags <b> e <i> cumprem finalidade unicamente de apresentação. Elas não tem qualquer efeito sobre tecnologias assistivas. Foram criadas à época antiga de marcar documentos web e basicamente calcados em estruturação para mídia tipográfica, não imputando qualquer relevância ao texto com elas marcado e nada significam para leitores de tela ou mecanismos de busca por exemplo. Não estão em desuso, são previstas no XHTML 1.1, podem e devem ser usadas se a sua intenção é a de contemplar somente mídia visual.
As tags <strong> e <em>, estas sim, são interpretadas por todas as tecnologias assistivas e devem ser usadas em substituição a <b> e <i> se a sua intenção é a de contemplar estas tecnologias.
Contudo, embora o suporte para elas deva continuar ainda por muito tempo, nada aponta para uma revitalização de <b> e <i>.
Pelo contrário, as evidências a esta época, indicam que devam ser banidas a partir do XHTML 2.0.

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

Esta matéria foi publicada em: 2006-03-22 (quarta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/03/22/bstrongiem/trackback no seu site.

8 comentários na matéria: “b x strong – i x em”

  1. Locação de NotebooksNo Gravatar disse:

    É o tiago,

    Gostei do blog e resolvi deixar um oi.

    Valew

  2. Newton de Góes HortaNo Gravatar disse:

    Samuel e Lucas,

    Além de “strong” e “em” serem elementos estruturais e semânticos e o “b” e o “i” de apresentação, os dois primeiros realmente têm a ver com acessibilidade.

    A tecnologia de leitura de tela para pessoas com deficiência visual quando encontra um desses elementos ele muda a entonação da voz (ênfase para “em” e incisiva para “strong”) permitindo uma compreensão mais adequada do texto.

    Por isso, recomendo sempre o uso de “strong” e “em” em vez de “b” e “i”.

  3. Lucas AlvesNo Gravatar disse:

    Samuel lendo o artigo eu estava pensando a mesma coisa que você.
    Eu uso <strong> pelo fato dos renderizadores para pessoas com deficiência visual.

  4. Samuel PismelNo Gravatar disse:

    Essa distinção não poderia ter alguma coisa a ver com acessibilidade?

    estou com uma duvida, renderizadores de voz (para pessoas com deficiência visual) eles destacariam a frase de maneira diferente caso ela estivesse marcada com “strong” e “em” ao invés de “b” e “i” ????

    espero não ter viajado muito nesse pensamento =D

  5. TFoxNo Gravatar disse:

    O que fazem os elementos DFN, SAMP, KBD e VAR de “phrase elements“, mesmo?

  6. adrapalaNo Gravatar disse:

    Eu faço das palavras do Felipe Ranieri, as minhas.

  7. Felipe RanieriNo Gravatar disse:

    Bom, costumo usar “b” e se parar para analisar, creio que a resposta mais sensata pode ser encontrada na própria definição dada pelo w3c, na qual temos: ELEMENTOS DE FRASE e ELEMENTO PARA ESTILIZAÇÃO DE FONTES.
    Antes de ler este artigo, eu não conhecia a definição, portanto arrisco dizer que strong e em devem ser usados, como o próprio nome diz, para frases, já b e i podem ser utilizados para estilizar apenas letras.

    Será que escrevi besteira? hehe.

    Abraços Maujor e parabéns por mais um post bem interessante.

  8. Fellipe CicconiNo Gravatar disse:

    Acredito eu que tudo depende do que queremos identificar quando “tagueamos” uma string.

    [em], de emphasis, expressa o motivo pelo qual a string deverá destacar-se do resto do texto. A colocação como itálico da mesma string deverá ser inteiramente de responsabilidade do renderizador. Quando pensamos em [i] estamos apontando o efeito desejado para o mesmo pedaço de texto, mas é como se não estivessemos apontando o motivo pelo qual o texto deve ser destacado, somente que ele deveria.

    A mesma coisa acontece com o [strong] versus [b]. Strong, de strong emphasis, deixa o texto negrito por conta desse ser o tratamento comum dos renderizadores de texto. [b] indica o efeito, e não a causa.

    Valew!

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo