HTML SEMÂNTICO
- #HTML
Aproveitando que concluí o módulo de HTML Semântico, vou aproveitar e compartilhar algumas boas práticas sobre o tema.
Além de estruturar de forma correta, dar o significado aos conteúdos do documento web, a semântica incorpora acessibilidade à página.
Outro fator importantíssimo é que a semântica aprimora o site contribuindo com técnicas de SEO (otimização de motores de busca, em português), fazendo a página obter melhores posicionamentos pelos buscadores da web.
Seguem as dicas:
- Não usar tag’s de containers para estruturar toda a página. Não saia usando apenas div como se não houvesse amanhã. Essa tag não tem peso semântico para acessibilidade e motores de busca;
- Entretanto, tag div são importantes sim, mas use com sabedoria;
- Divida a estrutura da página em ao menos 3 partes: cabeçalho (header), pincipal (main) e rodapé (footer);
- Dentro da main, o conteúdo para ser divido para um layout e uma experiência do usuário mais agradáveis. As tags indicadas para essa divisão são section e aside. Sendo aside usada para os conteúdos laterais;
- Para o título principal, usar h1.É indicado usar apenas uma tag h1 para a página inteira. Alguns testes mostram que o conteúdo desta tag é uma das principais encontradas pelos motores de busca;
- Para navegação, sejam links ou algum tipo de menu, usar a tag nav;
- Para imagens, use a tag img dentro da tag figure. Dois atributos importantes que ajudam na semântica são: title e alt. Title exibe o título ao passar o mouse por cima, alt é a descrição. Ambas são lidas pelos robôs de acessibilidade;
- A tag figcaption dentro de figure é usada para inserir e associar a legenda a imagem;
- A tag time para as informações de datas e publicações. Nela, usar o atributo datetime e o seu valor será a própria data, mas no padrão americano.
