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

Você está no BLOG do Maujor. IR PARA O SITE

b x strong – i x em

Publicado em: 2006-03-22 — 14.995 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.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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