Devo usar a tag <i> para ícones em vez de <span>? [fechadas]

Eu olhei para a fonte do Facebook, eles usam a <i>tag para exibir ícones.

Além disso, hoje olhei para o Bootstrap do Twitter. Ele também usa <i>tag para exibir ícones.

Mas,

A partir da especificação HTML5 :

O elemento I representa um espaço de texto em uma voz ou humor alternativo ou, de outro modo, desviado da prosa normal, como uma designação taxonômica, um termo técnico, uma frase idiomática de outro idioma, um pensamento, um nome de navio ou algum outro prosa cuja apresentação tipográfica típica esteja em itálico.

Por que eles estão usando a <i>tag para exibir ícones?

Não é uma prática ruim?

Ou estou faltando alguma coisa aqui?

Estou usando spanpara exibir ícones e parece estar funcionando para mim até agora.

Atualizar:

O Bootstrap 3 agora usa spanpara ícones. Doc oficial

Por que eles estão usando a <i>tag para exibir ícones?

Porque é:

• Baixo
• eu significa ícone (embora não em HTML)

Não é uma prática ruim?

Péssima prática. É um triunfo do desempenho sobre a semântica.

Estou pulando aqui um pouco tarde, mas me deparei com esta página ao refletir sobre isso sozinha. É claro que não sei como o Facebook ou o Twitter justificaram, mas aqui está o meu próprio processo de pensamento sobre o que vale a pena.

No final, concluí que essa prática não é tão semântica (isso é uma palavra?). De fato, além da falta e da boa associação de "i é para ícone", acho que é realmente a escolha mais semântica para um ícone quando uma <img>tag direta não é prática.

1. O uso é consistente com as especificações.

Embora possa não ser o que o W3 tinha principalmente em mente, parece-me que a especificação oficial <i>poderia acomodar um ícone com bastante facilidade. Afinal, o símbolo da seta de resposta está dizendo "resposta" de outra maneira. Ele expressa um termo técnico que pode não ser familiar para o leitor e que normalmente está em itálico. ("Aqui no Twitter, é o que chamamos de seta de resposta .") E é um termo de outro idioma: um idioma simbólico.

Se, em vez do símbolo de seta, o Twitter usasse <i>shout out</i>ou <i>[Japanese character for reply]</i>(em uma página em inglês), isso seria consistente com as especificações. Então porque não <i>[reply arrow]</i>? (Estou falando estritamente de semântica HTML aqui, não de acessibilidade, a qual abordarei.)

Tanto quanto posso ver, a única parte da especificação explicitamente violada pelo uso do ícone é a frase "extensão de texto" (quando a tag também não contém texto). É claro que a <i>tag se destina principalmente ao texto, mas esse é um detalhe bem pequeno comparado à intenção geral da tag. A questão importante para essa tag não é qual formato de conteúdo, mas qual é o significado desse conteúdo.

Isso é especialmente verdade quando você considera que a linha entre "texto" e "ícone" pode ser quase inexistente em sites. O texto pode parecer mais com um ícone (como no exemplo japonês) ou um ícone com texto (como em um botão jpg que diz "Enviar" ou uma foto de gato com uma legenda sobreposta) ou o texto pode ser substituído ou aprimorado por uma imagem via CSS. Texto, imagem - quem se importa? É todo o conteúdo. Desde que todos - humanos com deficiências, navegadores com deficiências, aranhas de mecanismos de pesquisa e outras máquinas de vários tipos possam entender esse significado, fizemos o nosso trabalho.

Portanto, o fato de os autores das especificações não terem pensado (ou escolhido) para esclarecer isso não deve comprometer o que faz sentido e é consistente com o espírito da etiqueta. A <a>tag foi originalmente projetada para levar o usuário para outro lugar, mas agora pode aparecer uma caixa de luz. Grande grito, certo? Se alguém tivesse descoberto como exibir uma caixa de luz ao clicar antes da especificação, ainda assim deveria ter usado a <a>tag, não uma <span>, mesmo que não fosse totalmente consistente com a definição atual - porque chegou mais perto e foi ainda consistente com o espírito da tag ("algo acontecerá quando você clicar aqui"). O mesmo trato <i>- qualquer que seja o tipo de coisa que você coloque nela ou, por mais criativo que seja,

2. A <i>tag adiciona significado semântico a um elemento de ícone.

A opção alternativa para carregar uma classe de ícones por si só é <span>, que obviamente não tem significado semântico. Quando uma máquina pergunta o <span>que ela contém, diz: "Não sei. Pode ser qualquer coisa". Mas a <i>etiqueta diz: "Eu contenho uma maneira diferente de dizer algo do que o habitual, ou talvez um termo desconhecido". Não é o mesmo que "Eu contenho um ícone", mas é muito mais próximo do que o <span>obtido!

3. Eventualmente, o uso comum dá certo.

Além do exposto, vale a pena considerar que os leitores de máquinas (seja o mecanismo de pesquisa, o leitor de tela ou o que for) podem, a qualquer momento, levar em consideração que o Facebook, o Twitter e outros sites usam a <i>tag como ícones. Eles não se preocupam tanto com as especificações quanto com a extração de significado do código, por qualquer meio necessário. Portanto, eles podem usar esse conhecimento de uso comum para simplesmente registrar que "pode ​​haver um ícone aqui" ou fazer algo mais avançado, como dar uma olhada no CSS para obter uma dica de significado ou quem sabe o quê. Portanto, se você optar por usar os <i>ícones for no seu site, poderá fornecer mais significado do que as especificações.

Além disso, se esse uso se generalizar, provavelmente será incluído nas especificações no futuro. Então você estará analisando seu código, substituindo <span>s por <i>'s! Portanto, pode fazer sentido adotar o que parece ser a direção da especificação, especialmente quando ela não conflita claramente com a especificação atual. O uso comum tende a ditar as regras de linguagem mais do que o contrário. Se você tem idade suficiente, lembra-se de que "site" era a grafia oficial quando a palavra era nova? Os dicionários insistiam que deveria haver um espaço e a Web deveria estar em maiúsculas. Havia razões semânticas para isso. Mas o uso comum dizia: "Seja como for, isso é estúpido. Estou usando o 'site' porque é mais conciso e parece melhor". E em pouco tempo,

4. Então, eu vou em frente e usá-lo.

Portanto, <i>fornece mais significado às máquinas por causa das especificações, fornece mais significado aos seres humanos porque associamos facilmente "i" a "ícone", e possui apenas uma letra. Ganhar! E se você incluir texto equivalente na <i>tag ou ao lado (como o Twitter), os leitores de tela entenderão onde clicar para responder, o link será utilizável se o CSS não carregar, e os leitores humanos com boas informações. visão e um navegador decente vêem um ícone bonito. Com tudo isso em mente, não vejo a desvantagem.

A resposta de Quentin afirma claramente que a itag não deve ser usada para definir ícones.

Holly, porém, sugeriu que spanisso não tem significado em si e votou a favor do que ao iinvés do spantag.

Poucos sugeriram usar imgcomo é semântico e contém alttag. Mas também não devemos usá-lo imgporque mesmo vazio srcenvia uma solicitação ao servidor. Leia aqui

Eu acho que a maneira correta seria

<span class="icon-fb" role="img" aria-label="facebook"></span>

Isso resolve o problema da falta de altetiqueta spane a torna acessível para usuários com deficiência visual. É semântico e não usa indevidamente (hacking) qualquer tag.

Meu palpite: como o Twitter vê a necessidade de oferecer suporte a navegadores herdados, caso contrário, eles usariam os :before/ :afterpseudoelementos.

Os navegadores herdados não suportam os pseudoelementos que mencionei, portanto, eles precisam usar um elemento HTML real para os ícones, e como os ícones não têm uma tag 'exclusiva', eles apenas foram com a <i>tag e todos os navegadores suportam essa tag.

Eles certamente poderiam ter usado um <span>, assim como você (o que é TOTALMENTE bom), mas provavelmente pelo motivo mencionado acima e pelos mencionados por Quentin , também é por isso que o Bootstrap está usando a <i>tag.

É uma prática ruim quando você usa marcação extra por motivos de estilo, é por isso que os pseudoelementos foram inventados para separar o conteúdo do estilo ... mas quando você vê a necessidade de oferecer suporte a navegadores herdados, às vezes você é forçado a fazer esse tipo de coisas.

PS. O fato de os ícones começarem com um 'i' e de haver uma <i>tag é completamente coincidência.

Eu adoto uma abordagem totalmente diferente das respostas de todos os outros aqui. Permitam-me prefixar minha solução e argumentar afirmando que às vezes os padrões e convenções devem ser quebrados, especialmente no contexto das definições de tags lexicais HTML padrão.

Não há nada que o impeça de criar elementos personalizados que sejam auto-descritivos para esse propósito.

Tanto os navegadores modernos quanto o IE 6+ (com calço) podem suportar coisas como:

<icon class="plus">

ou

<icon-add>

Apenas certifique-se de normalizar a tag:

 icon { display:block; margin:0; padding:0; border:0; ... }

e use um calço se precisar oferecer suporte ao IE9 ou anterior (veja a postagem abaixo).

Confira esta publicação StackOverflow:

Existe uma maneira de criar sua própria tag html em HTML5

Para aprofundar meu argumento, as Diretivas Angulares do Google e os novos projetos Polymer utilizam o conceito de tags HTML personalizadas.

Eu pensei que isso parecia muito ruim - porque eu estava trabalhando em um modelo do Joomla recentemente e continuei recebendo o modelo com falha no W3C porque ele estava usando a <i>tag e que havia sido descontinuado, pois seu uso original era colocar em itálico algo, o que agora é feito por meio do CSS não mais HTML.

Isso faz uma prática muito ruim, porque quando eu o vi, passei pelo modelo e mudei todas as <i>tags para, <span style="font-style:italic">em seguida, e me perguntei por que o modelo inteiro parecia estranho.

Esse é o principal motivo pelo qual é uma má idéia usar a <i>tag dessa maneira - você nunca sabe quem vai olhar seu trabalho posteriormente e "presume" que o que você realmente estava tentando fazer era colocar o texto em itálico, em vez de exibir uma ícone. Acabei de colocar alguns ícones em um site e fiz isso com o seguinte código

<img class="icon" src="electricity.jpg" alt="Electricity" title="Electricity">

Dessa forma, tenho todos os meus ícones em uma classe, para que quaisquer alterações que eu faça afetem todos os ícones (digamos que eu queira que eles sejam maiores ou menores ou bordas arredondadas etc.), o texto alternativo oferece aos leitores de tela a chance de dizer à pessoa o que o ícone é mais do que possivelmente apenas "texto em itálico, final de itálico" (não sei exatamente como os leitores de tela lêem as telas, mas acho que é algo assim), e o título também dá ao usuário a chance de passar o mouse a imagem e obtenha uma dica de ferramenta informando qual é o ícone, caso eles não consigam descobrir. Muito melhor do que usar <i>- e também passa no padrão W3C.

Eu também achei isso útil quando eu queria colocar um ícone com posicionamento absoluto dentro de uma <a>tag de link .

Pensei <img>primeiro na tag, mas o estilo padrão dessas tags nos links normalmente tem estilo de borda e / ou efeitos de sombra. Além disso, parece errado usar uma <img>tag sem definir um atributo "src", enquanto eu estou usando uma declaração de folha de estilo de imagem de plano de fundo para que a imagem não seja fantasma e arraste.

Neste ponto, você está pensando em tags como <span>ou <i>- nesse caso, <i>faz tanto sentido quanto esse tipo de ícone.

Em suma, acho que seu benefício, além de intuitivo, é que requer ajustes mínimos nas folhas de estilo para fazer com que essa tag funcione como um ícone.