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


572

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


5
Exemplo: A resposta seta abaixo tweets no Twitter: <i class="sm-reply"></i>.
kay - SE é mau

2
Por que não deveria <span>ser usado?
perfil completo de Jashwant

6
Parece-me que, para semântica e acessibilidade, a tag img deve sempre ser usada para ícones, com o texto alternativo.
Nrose

12
@nroose Minha opinião é que as imagens usadas para ícones não fazem parte do conteúdo, mas do estilo da página (ao contrário, por exemplo, da foto de uma vaca na página da Wikipedia sobre vacas). Portanto, eles devem ser definidos no css, não como uma imagem em uma tag img.
CJStuart

6
Não acho que as decisões semânticas no HTML5 devam ser consideradas "baseadas em opiniões".
Aaron

Respostas:


597

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.


87
É o meu primeiro dia para aprender a inicialização do twitter e é ruim que eles não estejam seguindo as práticas recomendadas.
Jashwant

25
algumas pessoas vão além e <tt>usam mal outros elementos, como = dica de ferramenta e assim por diante ... quer me ajudar a encontrar o ATSMOHE? "Contra o uso indevido semântico de elementos HTML"
Christoph

18
Esses sites têm milhões de páginas visualizadas todos os dias. Se eles salvarem 100 bytes de dados sempre que um cliente solicitar uma página com essa prática, eles economizarão uma quantidade significativa de largura de banda.
Dalmas

62
Para economizar 100 bytes, eles teriam que incluir 16 ícones e não ativar a compactação .
Quentin

7
Com o uso de ligaduras , o uso da itag para exibir ícones é semântico. De fato, o Google sugere o uso da itag com ligaduras no guia de ícones de materiais .
Aust

269

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.


33
Mas já existem maneiras de fazer isso sem abusar <i>: use qualquer elemento de texto, incluindo botões ou links, e adicione um ícone usando um gráfico de plano de fundo e algum preenchimento, da mesma maneira que é feito <i>. O HTML seria semelhante <a ...>Reply</a>, semântico, a página estilizada mostra um ícone adicional. Se o ícone for o único elemento principal , ele deverá ser um <img src="..." alt="Reply">.
deceze

36
@ Holly, Você levou para um lado completamente diferente, mas desculpe, eu discordo de cada linha que você disse.
Jashwant

11
No entanto, o vazio (mesmo um ícone) não é texto, e o texto é o que está especificamente escrito nas especificações.
Ry-

17
Especificamente escrito na especificação significa jack. Você sabe disso e todo mundo sabe disso. É um guia. Nada mais. Você acha que o IE se preocupa com as especificações? Eles estão melhorando. Você acha que todo navegador está lá fora, tentando obter as especificações perfeitas? Você acha que todos no planeta estão usando <code> nav, header, rodapé, seção, aparte, ... n </code> corretamente? Não. Eu vou para página após página, onde aparte é um substituto para <code> <div class = "sidebar"> </code> E você sabe o que? A maneira como as pessoas continuam a usar é o que definirá "semântica" no futuro.
o_O

17
Ótimos argumentos, acho que você me convenceu. Especialmente convincente é o número 3, "o uso comum dá certo". Assim como na linguagem comum, se todos começarem a usar uma palavra dessa maneira, isso se tornará o uso padrão. A especificação HTML tem sido um documento em evolução há algum tempo, e a adesão a ela dogmaticamente é simplesmente boba. Aderir a uma convenção comum é um caminho mais sustentável, na minha opinião. Além disso, o elemento <i> está praticamente obsoleto neste momento, então me sinto bem em dar-lhe uma nova vida semanticamente rica! Estou curioso para saber como as especificações evoluirão com esse uso, como acho que sem dúvida ocorrerá.
Logic Artist

59

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.


6
@GeorgeMauer, todos os designers de HTML / web que se prezam se preocupam com as tags alt. a especificação está lá por uma razão. como rampas em prédios, existem tags alt, title e ária por um motivo.
Osíris

3
@osiris agora espere, as especificações são alteradas o tempo todo. Concordo que é bom seguir, mas você deve levar em consideração a intenção subjacente. Dito isto, desde que procurei, eu concordo com você, já que não é apenas para leitores de tela / imagens ausentes / dicas de ferramentas - na verdade, existe uma semântica de que eu desconhecia. MDN: "Omitir esse atributo indica que a imagem é uma parte essencial do conteúdo, mas nenhum equivalente textual está disponível. A configuração desse atributo para a sequência vazia indica que essa imagem não é uma parte importante do conteúdo; os navegadores não visuais podem omitir a renderização ".
George Mauer

3
Como uma observação lateral, acredito que a função correta da ária para um ícone é a apresentação . Não img .
Sylvain Leroux

2
@SylvainLeroux, acho que se o ícone for usado em um botão junto com o texto, o papel será a apresentação. Mas se apenas o ícone for usado no botão (sem texto), seu papel será img.
Jashwant

2
NÃO O torna acessível! Você já testou com leitores de tela ?! Substituir a solução nativamente acessível <img alt="...">por <span role="img">tudo piora. Não use aria-labelem um elemento SPAN não focalizável. Nem sempre funcionará como esperado. Não use rolese você não sabe o que está fazendo. O uso excessivo da ARIA está tornando tudo pior para todos. Tornar um produto inacessível e o código mais difícil de ler e manter. E quanto ao SEO? ARIA é bom, mas use com sabedoria - accessibility-developer-guide.com/knowledge/aria/bad-practices
Hrvoje Golcic

12

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.


3
Nem por isso, Se você olhar para lá código dentro do I é um elemento antes
DCdaz

12

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.


2
E então você vai para o validador do W3C e entra <!doctype html> <html lang="en"> <head> <title>Hello</title> </head> <body> <icon></icon> </body> </html>e recebe um único erro, dizendoError: Element icon not allowed as child of element body in this context.
Digital Ninja

6

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.


7
<i>não está obsoleto.
User2867288

3
A tag "img" não funciona para ícones de fontes. Quero dizer que sim, mas seu navegador envia uma solicitação ao seu site toda vez que é analisado.
Navin

1
Em vez de <span style="font-style:italic" />você poderia simplesmente ter usado que é mais recente alternativa -<strong />
ewino

@ewino Eu acredito que você quer dizer <em> </ em>, que é a substituição semântica para enfatizar palavras (em vez de apenas aplicar itálico)
amklose

Você está realmente correta :-)
ewino

2

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.


Ok. Aqui está o porquê de eu achar que é uma má prática. Historicamente, <B> era para negrito e <I> era para itallic. Portanto, se você usou <i>, crie uma tag itallic vazia, que não é para isso. Eles foram substituídos por <strong> e <em>. Então, com o objetivo de eu acho que navegadores antigos você não gostaria de marcar uma página com tags itálicas vazias, e quanto aos leitores de tela para cegos, esses ícones não deveriam estar dentro do link seja dizer TEXTO. Portanto, <span> é uma escolha melhor, pois você pode zerar o tamanho da fonte e também ter o ícone.
user1712691

1
@ user1712691 É um mito comum de que <b>e <i>foram substituídos por <strong>e <em>respectivamente. Mas a verdade é, <b>e <i>não é depreciada, e assumiu novos significados semânticos. Leia as especificações oficiais para saber mais.
precisa saber é o seguinte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.