« Voltar
em html usabilidade

Pra que serve a tag nav e o atributo alt no HTML5?.

Depois de muito tempo, finalmente comecei a estudar front-end no meu tempo live. Sempre soube só o básico do básico porque em praticamente todos os empregos que tive eu era "programador back-end".
Confesso que algumas vezes já mexi em html/css sem saber exatamente o que estava fazendo hahahahaha(você também vai, confesse).

(dei uma pausinha nos meus posts sobre o .NET Core, mas vou continuar viu? Você pode ler a parte 1 e 2 por enquanto, se quiser).

Mas enfim, o post de hoje é curto! É só pra falar mesmo sobre duas coisas que já mexi e não sabia pra que servia: a tag nav e o atributo alt.

A tag nav

Vamos supor que eu tenha o seguinte código em meu site para montar um menu:

<div>  
  <h3>Noticiash3>
  <ul>
    <li><a href="#">Economia</a></li>
    <li><a href="#">Esportes</a></li>
    <li><a href="#">Mundo</a></li>
    <li><a href="#">Famosos</a></li>
  </ul>
</div>  

Cada item desse menu é um link que aponta para uma seção dentro do site. Você usa esse menu pra navegar no meu site.
Então, pra indicar no html que esse menu faz parte da seção de navegação do meu site, ao invés de usar div eu posso usar a tag nav:

<nav>  
  <h3>Noticiash3>
  <ul>
    <li><a href="#">Economia</a></li>
    <li><a href="#">Esportes</a></li>
    <li><a href="#">Mundo</a></li>
    <li><a href="#">Famosos</a></li>
  </ul>
</nav>  

Mas pra que eu quero isso?

EDIT: depois que escrevi esse post, dei mais uma lida sobre o assunto e descobri que não necessariamente o Google irá indexar seu site de acordo com as tags nav. A tag nav pode, sim, ajudar. Mas não há uma regra específica para isso.

Entrei no Google e busquei por Vivareal, um portal de imóveis:

Vê esses links em baixo? "Aluguel", "Imóveis à venda", "Corretor-Anuncie"?
Esses links estão aí porque o menu do site foi montado com tags nav. Cada link desse é um item do menu no site dos caras. É só entrar aqui e olhar.
Pra quem trabalha com internet e quer acessos em seu site, isso é muito importante. Tem vários links diferentes que aparecem ali na busca que chamam a atenção do usuário que está fazendo a pesquisa. A possibilidade de ele ver ali uma palavra que contém o que ele quer e ir direto pra esse conteúdo é maior.
E quando estamos concorrendo com outras empresas na internet, isso faz diferença.

Ou seja, quando você usa a tag nav no seu html você dá semântica à ele, você dá significado ao seu conteúdo.
Seu site deixa de ser só um monte de texto.

O atributo alt

Já viu o link pra uma imagem assim?

<img src="minhafoto.jpg" alt="Foto do Gabriel">

Esse atributo alt serve para você colocar uma descrição de uma imagem.
Mas pra que descrever uma imagem?

Pouco mais de 1% da população do Brasil tem deficiência visual. E essas pessoas também tem acesso à internet como nós, eles querem consumir informação. Essa semana mesmo atendi um aluno na Caelum que gostaria de fazer um curso de Java e era deficiente visual.
Essas pessoas utilizam leitores de tela e outras ferramentas para navegar na internet. O atributo alt serve para descrever pra essas ferramentas e também para os sites de busca o que contém essa imagem.
Ou seja, usando o atributo alt você melhora a usabilidade de sua página.

Você quer que todos consigam utilizar seu site, não é? (:

Enfim, essas coisas parecem ser bestas mas podem fazer muita diferença.

Já que você leu até aqui, porque não curte minha página lá no Facebook pra ficar em dia com as minhas postagens e outras novidades legais? (:
O endereço é https://www.facebook.com/devgabsferreira

comments powered by Disqus