Usando as Tags <i> e <span> para Ícones em HTML
Resumo Rápido
Quando você precisa inserir ícones, incluindo o FontAwesome, é mais apropriado usar a tag <span> com o atributo aria-hidden="true", pois isso melhora a acessibilidade do conteúdo e se alinha melhor com os padrões atuais de desenvolvimento web.
Veja como fica no código:
<!-- As estrelas são invisíveis, mas ainda mais bonitas! -->
<span class="fa fa-star" aria-hidden="true"></span>Embora a tag <i> seja tradicionalmente usada para ícones, é melhor substituí-la pela <span> para cumprir as diretrizes semânticas e de acessibilidade.
Semântica Acima de Tudo
A estrutura semântica das páginas web desempenha um papel muito importante para os usuários e agentes de software que interpretam o conteúdo da página. A tag <i>, de acordo com as especificações clássicas, é usada para enfatizar texto em itálico. Por outro lado, usar a tag <span> com atributos ARIA torna uma página web mais clara e acessível:
<!-- Uma janela para o mundo dos ícones, acessível a todos -->
<span class="icon" role="img" aria-label="estrela"></span>Acessibilidade em Primeiro Lugar
A acessibilidade em websites é um princípio fundamental de seu design. Usar funções e atributos ARIA em conjunto com a tag <span> permite que leitores de tela transmitam informações sobre ícones com precisão. Em contrapartida, a tag <i> muitas vezes é interpretada como um elemento de formatação de texto, sem transmitir um significado semântico adicional.
Evolução ao Invés de Revolução
Mudanças no design web refletem um compromisso com uma abordagem mais semântica e acessível. Isso é evidenciado pelo uso da tag <span> para a colocação de ícones em Bootstrap 3. Este é um exemplo claro onde a acessibilidade e a semântica prevalecem sobre a mera estética visual.
Visualização
As tags <i> e <span> podem ser vistas como duas ferramentas diferentes no seu kit de ícones:
🔧 `<i>` : 'Chave inglesa', tradicionalmente usada para **ícones**.
🔨 `<span>` : 'Martelo' – uma ferramenta versátil para **qualquer conteúdo em linha**.Escolha a ferramenta mais adequada dependendo da tarefa:
Gosta de **parafusos e porcas**? Então 🔧 `<i>` – é sua escolha!
Prefere **comida de reis**? Então 🔨 `<span>` – é exatamente o que você precisa!Ao estilizar seus elementos HTML, aja de forma consciente – que sua escolha seja pensada e justificada.
Desempenho Define Sucesso
O desempenho do site é um fator integral para seu sucesso. Utilizar corretamente elementos como <i> e evitar estruturas complexas apenas para colocar ícones pode melhorar a eficiência do site. Pseudo-elementos (:before e :after) podem ajudar a criar um código conciso e fácil de manter, enquanto reduzem a carga no sistema através de menos requisições.
Elementos Personalizados – Nosso Futuro
Uma olhada no futuro mostra uma tendência ao desenvolvimento de elementos personalizados e componentes a partir de frameworks como Angular Directives e Polymer, que oferecem funcionalidade, design moderno e suporte para navegadores desatualizados através de polyfills.
A História do Navegador
Para garantir uma exibição uniforme em diferentes plataformas, sejam elas Chrome, Firefox ou Safari, é importante aplicar a normalização de elementos personalizados. Enquanto a tag <i> funciona bem para suporte a navegadores desatualizados, ela não define mais o tom do desenvolvimento web hoje.
HTML Limpo – A Chave para a Ordem
Manter a limpeza da estrutura HTML desempenha um papel significativo. Abandonar elementos desnecessários e estruturas complexas de estilos visuais melhorará o desempenho da página web e facilitará tanto a escrita quanto a leitura do código.