[Resolvido] As conturbadas tags <b> e <i>

[Kamon Florentino Mesquita 0]

Olá galera,

 

nesta última semana um velho amigo me procurou para ajudá-lo a converter um velho guia que ele escreveu sobre regex para páginas HTMl que estivessem de acordo com os padrões web. Para facilitar ao leitor ele criou uma notação própria que empregava itálicos, negritos, texto em caixa alta e sublinhados. Os dois últimos casos resolvi com

<span class="classe">texto</span>. Agora nos casos do itálico e negrito fiquei em dúvida, porque o HTML4.01 possui as tags <i> e <b> que fazem isso e são aceitas até mesmo na versão "strict". Como são tags visuais fiquei com receio de usá-las sem ter certeza de que isso era semanticamente correto. Ao pesquisar muito no Google fiquei ainda mais confuso, pois só achei pequenos textos que pareciam não saber bem do que falavam. Para piorar li que estas tags no HTML5 terão outros significados. E aí pessoal, em casos como o meu é mais semântico utilizar estas tags ou substitui-las por spans com o atributo class e depois por os efeitos em CSS? Isto também se aplica à textos onde usam-se nomes científicos em latim que devem estar em itálico?

[Henrique Barcelos 290]

Troque <b> por <strong> e <i> por <em>...

[Diéssica 140]

Tem gente que prefere fazer tudo no CSS, usar class e determinar negrito, itálico.. Acho que vai da tua preferência, mas existem tags feitas pra isso e acho mais semântico usar elas.

 

Por exemplo, <strong> (substitui <b>) representa "forte". Na semântica, um texto com o elemento strong é considerado um texto forte.

 

Inclusive tem uma citação do Maujor que resume esses dois:

Elementos STRONG e EM: Estes elementos se destinam a adicionar uma informação estrutural aos textos.

Textos marcados com o elemento STRONG são destacados com forte ênfase e aqueles com o elemento EM são destacados com ênfase.

Aqui no iMasters, por exemplo, o bbcode é um strong.

 

:seta: http://www.w3schools.com/tags/tag_phrase_elements.asp

:seta: http://www.maujor.com/blog/2006/03/22/bstrongiem/

[Bruno Augusto 417]

O problema é que tem gente que confunde um texto ser forte e um texto parecer forte.

 

Se algo no HTML justifica receber um reforço contextual, vai dentro de um <strong>

 

Se só precisar parecer forte, vai no CSS.

 

O mesmo vale para itálico.

 

A exceção a regras acho que é só quando um elemento <strong> ou <em> não puder ser usado dentro de outro elemento, daí vai só pelo CSS mesmo.

[William Bruno 1501]

Troque <b> por <strong> e <i> por <em>...

e ai mande a semântica pro espaço...

 

não é bem assim que deve ser.

nem tudo que é bold, é strong, e nem tudo oque é itálico, merece ênfase.

[Diéssica 140]

Sim, tem a questão visual e a questão estrutural. Porém, pro caso dele, eu acho que tem que usar strong mesmo. A pessoa (geralmente) quando adiciona um negrito é pra dar mais relevância e destaque ao texto. Por isso um texto forte :thumbsup:

 

Se for no layout mesmo é melhor no CSS, porque nesse caso estaríamos usando bold pra uma questão mais visual.

 

Agora pra só textos/conteúdo, principalmente pra esses editores WYSIWYG, eu recomendo strong.

 

O mesmo vale para itálico.

[JCMais 75]

<b> e <i> são apenas para dar enfâse visual. Quando levado SEO em consideração, elas são passadas apenas como tags normais.

Agora <strong> e <em> são usadas para dar enfase estrutural (e visual também) de acordo com o contexto que elas se encontram, os spiders dos buscadores quando encontram essas tags eles dão mais peso ao que estiver contido dentro delas, principalmente a strong.

 

Ex:

Apenas destaque visual:

Eu <b>NÃO</b> vou trabalhar hoje!.

 

Para dar destaque à determinada frase/palavra de acordo com o contexto (assim ganhando mais relevância por parte dos buscadores):

Eu <b>NÃO</b> vou trabalhar hoje na empresa <strong>XYZ Informática</strong>!

 

Ainda tem a questão de acessibilidade também...

 

Lembrando que usar de forma abusiva essas tags pode causar em uma penalização no SEO da página.

[Mateus Avila Isidoro 8]

O mestre Eric Meyer usou b e i para fazer bordar arredondadas! Usando display:block, tu faz o que quiser com qualquer tag. Creio que uma marcação mais rigorosa, como a HTML5, prevê que b e i não terão significado algum, mas os browsers darão suporte.

[Kamon Florentino Mesquita 0]

Obrigado pessoal pelas respostas. Após refletir sobre elas decidi que no meu caso seria melhor deixar esta tarefa para o CSS mesmo. Não acho semântico no meu caso usar as tags <strong> e <em> já que os efeitos serão apenas para o usuário visualizar melhor as expressões e não para dar "maior importância a elas". Além do mais uma mesma página contém muitos termos em negrito e itálico meramente para notação; logo se u usasse estas tags estaria abusando delas e com certeza seria penalizado pelo Google. Estudei um pouco das tags HTML antigas e simplesmente não entendo o porque de se ter <b> e <i> no HTML 4.01 Strict apenas para declarar estilo sendo que a tag <u> e <s> (sublinhado e tachado) são obsoletas. Até parece que fizeram vista grossa ao <b> e <i>. Assim formei minha opinião de que <b> e <i> só faz sentido no HTML5 onde ganhou esta se tornaram verdadeiramente semânticas. Obrigado a todos, a discussão de vocês foi fundamental para que eu pudesse formar uma opinião e isto me ajudará muito no futuro.