A tecla de acesso 'n' salta para outro local na navegação da página. Saltar para o início do conteúdo.

Este documento é uma tradução. Se ocorrerem discrepâncias ou erros, o original em inglês mais recente terá precedência. Os direitos autorais originais pertencem ao W3C, como indicado no final da página.

Tradutor: Maurício Samy Silva

s_gotoW3cHome Internacionalização
 

Uso dos elementos <b> e <i>

Público alvo: Codificadores XHTML/HTML (usando editores ou scripts), desenvolvedores de scripts (PHP, JSP, etc.) e qualquer um interessado em diretrizes de uso dos elementos HTML <b> e <i>.

Pergunta

Devo usar os elementos <b> e <i>?

Informações

As especificações para a HTML5 redefinem os elementos b e i retirando-lhes o caráter puramente de apresentação e a eles atribuindo uma função semântica. Contudo, o significado de seus nomes, 'b' para negrito e 'i' para itálico sugere que eles continuem sendo usados como elementos de apresentação.

Esse artigo explica, sob o ponto de vista da internacionalização e à luz do que prescreve as especificações, o quão problemático é o uso desses elementos com fins de apresentação (além dos problemas de reestilização desses elementos).

Resposta

Antes de mais nada você deve considerar que os conteúdos dos elementos b e i podem não ser apresentados em negrito ou itálico respectivamente. A estilização desses elementos fica a cargo das CSS. Assim, tenha sempre em mente que o estilo negrito e itálico pode não ser o mais indicado para determinados conteúdos em certos idiomas.

Você não deve usar as tags b e i caso exista uma tag alternativa mais apropriada e relevante para marcar um conteúdo. Mas, se você tiver que usá-las em geral é recomendado que use também o atributo classe para prover uma descrição do significado da marcação. Dessa forma será possível fazer a distinção dos diferentes significados.

A seguir faremos a descrição mais detalhada desses conceitos.

Destinação dos elementos b e i

As especificações para a HTML5 redefinem o uso desses elementos como mostrado a seguir.

O elemento i destina-se a marcar trechos de textos que mereçam um destaque de entonação de voz ou modo quando lidos, ou seja, textos fora do fluxo normal de leitura do texto como um todo. Por exemplo: designações taxonômicas, termos técnicos, frases em outro idioma, um pensamento, um nome de navio ou outro trecho de texto qualquer cuja apresentação tipográfica seja tipicamente em itálico.

O elemento b destina-se a representar um trecho de texto estilisticamente destacado do fluxo de prosa normal sem a ele atribuir nenhuma importância extra. Por exemplo: palavras-chave de um documento, nomes de produtos em uma resenha ou outro trecho de texto qualquer cuja apresentação tipográfica seja tipicamente em negrito.

Pontos a considerar

Tenha sempre em mente que, sob o ponto de vista da internacionalização, o mal uso desses elementos pode dificultar ou confundir o entendimento de textos com eles marcados.

Consideração de caráter geral. O uso das tags b e i pode tornar-se problemático pelo fato dos autores raciocinarem em termos de apresentação em detrimento da marcação semântica. Tal raciocínio pode, no mínimo, trazer confusão. Para um autor apressado é cômodo pensar no uso dessas tags apenas como uma maneira de apresentar um trecho de texto de maneira diferenciada, esquecendo-se de raciocinar com semântica, portabilidade e consistência para o futuro.

Certamente ocorrem problemas de internacionalização pelo fato de que diferentes culturas requerem diferentes tipos de estilos para textos marcados com os elementos b e i.

Exemplo japonês. O fato de que seja conveniente, em um documento escrito em português, marcar em itálico trechos de textos enfatizados, títulos do documento e frases em outros idiomas não significa que uma tradução do documento para o japonês deva usar itálico para esses três tipos de conteúdo. Autores japoneses evitariam o uso de itálico e negrito pois esses tipos de apresentação dificultam a leitura de caracteres japoneses em fontes menores.

Para a escrita em japonês o localizador certamente aplicará, via CSS nativa, estilização diferente nos elementos b e i. Para um autor japonês os três conteúdos serão marcados de maneira mais conveniente com uso de wakiten (boten marks) para ênfase, corner brackets para 『nomes de documentos』, e double angle brackets para 《textos em outro idioma》. Esses são elementos tipográficos comuns em japonês e não usados em português.

Se um autor português usar tags i pensando somente em apresentação o localizador japonês não conseguirá estilizar de maneira diferenciada e apropriada.

Para evitar tais problemas use marcação semântica. Se um autor português usar <em>..</em>, <cite>...</cite> e <i class="outroidioma">..</i> para fazer a distinção entre os três tipos de texto mostrados anteriormente o localizador não terá dificuldade em estilizar apropriadamente cada conteúdo.

Poder-se-ia ter usado o elemento span no lugar dos elementos i ou b. A diferença está no fato de que não serão estilizados na falta das CSS.

Ponto vista monolingual. Mesmo em se traatando de um documento monolingual a marcação semântica é importante. Suponha que, em um documento existente, você resolve que é melhor alterar o estilo para todos os textos que marcam nomes de documento de itálico para negrito. Se a marcação foi feita com uso de uma classe semântica para os diferentes textos em itálico a tarefa de mudança do estilo é simples bastando editar nas CSS as regras de estilo para aquela classe. Por outro lado se você usou as tags b e i indiscriminadamente sem diferenciação semântica terá que editar individualmente em todo o documento as tags i e localizar aquelas que marcam os nomes de documento para então reestilizá-las sem afetar outros conteúdos também marcados em itálico.

Uso da atributo para idioma. Se você resolver usar itálico para marcar os trechos de texto em outros idiomas poderá se valer do atributo para idioma para fins de estilização. Por exemplo: <i lang="fr">..</i>.

Mas, você deve ser cuidadoso ao usar esse recurso, pois o atributo para idioma informa apenas o idioma do texto sem fornecer qualquer informação sobre seu significado. Pode haver necessidade, presente ou futura, de se estilizar textos em um determinado idioma de maneira diferenciada de acordo com o contexto em que eles estão inseridos.

É seguro o uso do atributo classe em conjunto com o atributo para idioma para descrever a semântica, como mostrado a seguir.

<p>Existe um certo <i class="outroidioma" lang="fr">je ne sais quoi</i> no ar.</p>.

Recomendações de uso

As especificações para a HTML5 recomendam o seguinte para uso do elemento i (dar ênfase):

Os autores são encorajados a usar o atributo class para o elemento i com a finalidade de identificar o propósito do uso do elemento, de maneira a poder estilizá-lo de forma diferenciada sem necessidade de se percorrer o documento inteiro para identificar os diferentes usos (por exemplo: diferenciar itálico para termos taxonômicos daqueles para nomes de documentos). Os autores são encorajados ainda a buscar elementos alternativos mais convenientes que o elemento i, como, por exemplo, o elemento em para muita ênfase ou o elemento dfn para marcar uma instância de definição de um termo.

Tudo o que foi dito se aplica também ao elemento b.

As especificações para HTML5 no item 4.6 Text-level semantics lista outros elementos semânticos para descrever trechos de texto, tais com, dfn, cite, var, samp, kbd, etc.http://dev.w3.org/html5/spec-author-view/text-level-semantics.html#text-level-semantics

Um bom ponto de partida é pensar nos elementos b e i como sendo um elemento span sem facilidades de estilização. Tal como os elementos span esses elementos precisam do atributo classe para estilização.

Dê-nos a sua opinião (em inglês).

Subscreva uma alimentação RSS.

Novos recursos

Notícias na página principal

Twitter (Notícias na página principal)

‎@webi18n

Leitura complementar

Autor: Richard Ishida, W3C. Tradutor: Maurício Samy Silva.

XHTML 1.0 válida!
CSS válido!
Codificado em UTF-8!

Traduzido de conteúdo em inglês datado de 2010-07-12. Última versão traduzida modificada 2010-08-27 0:43 GMT

Para obter o histórico de alterações do documento, faça uma busca por qa-b-and-i-tags no blog da i18n.