Tags HTML que devem ser usadas para Acessibilidade e SEO
Tags HTML que devem ser usadas para Acessibilidade e SEO
Existem Tags HTML esquecidas ou desconhecidas que podem melhorar a funcionalidade do seu site em termos de acessibilidade, rastreadores da web e até mesmo SEO.
Além disso, a semântico HTML adiciona o contexto
certo ao conteúdo do seu site, o que melhorar significativamente a experiência
do usuário.
Aqui estão algumas das tags HTML mais úteis que você
pode estar ignorando. Mostrarei o que cada tag faz e como você pode usar HTML
para agilizar o processo de desenvolvimento e aprimorar a experiência do
usuário em seu aplicativo ou site.
Tags HTML para Acessibilidade e SEO
Abaixo estão algumas Tags que você pode estar esquecendo de
usar ou desconhece.
- <base>
- <abbr>
- <dfn>
- <fig>
- <figcaption>
- <details>
- <summary>
- <cite>
- <blockquote>
- <address>
Tag <base>
A tag <base> permite que você crie um cenário onde
existe um URL base que atua como um prefixo para todos os URLs relativos em um
documento. Ou seja, a tag <a> vai receber no HREF o URL base definido.
Essa tag <base> fica localizada no <head>.
Abaixo o exemplo.
<html>
<head>
<base
href = "https://www.google.com/" target = "_blank">
</head>
<a href="gmail">Gmail</a>
<a href="hangouts">Hangouts</a>
</body>
</html>
Tags <abbr> e <dfn>
Isso é ótimo para acessibilidade porque escrever um código
HTML semântico permite que os leitores de tela e o navegador interpretem o
que está na página no contexto certo para o usuário.
Essa descrição será exibida ao passar e para o cursor do mouse sobre o termo ou palavra.
Exemplo <dfn>
<p><dfn title="HyperText Liguagem de
marcação">O HTML</dfn>
é utilizado para
criar sites......
</p>
Exemplo <abbr>, ele funciona como o outro porem fica
com umas bolinhas abaixo da palavra.
<abbr title = "Utilizado para criar escilo no
site" > CSS </abbr>
Tags <fig> e <figcaption>
Essas duas tags que geralmente aparecem juntas, use a tag
<figure> para marcar uma foto em um documento e a tag <figcaption>
para definir uma legenda para a foto.
A tag <figure> especifica conteúdo independente, como
ilustrações, diagramas, fotos, vídeo e áudio.
<figure>
<img
src="caminho/imagem/google.png" alt="google >
<figcaption>Logo tipo google</figcaption>
</figure>
Tags <details> e <summary>
Essa duas tags são usadas juntas, a tag <details> e
<summary> vão criar uma seção que pode ser alternada.
A <summary> tag vai dentro da <details> tag e ao
clicar vai exibir automaticamente o conteúdo oculto sem o uso de CSS ou JS.
Qualquer tipo de conteúdo pode ser colocado dentro da
<details> tag.
<details>
<summary>O que
é uma imagem...</summary>
<p>É um
elemento que poder fazer....</p>
</details>
Tags <cite> e <blockquote>
A <cite> tag define o título de um trabalho criativo
(por exemplo, um livro, um poema, uma música, um filme, uma pintura, uma
escultura, etc.), o nome de uma pessoa não é o título de uma obra.
Os navegadores geralmente recuam a tag <blockquote>
colocando um espaço no lado esquerdo, quando usado a tag <cite> dentro do
<blockquote> como um atributo é adicionado para indicar a fonte.
<p><cite>The Scream</cite> obra de arte
criada por Munch. Pintado em 1893.</p>
<blockquote cite="http://www.google.com.br">
Este é um site muito bom para buscar...
</blockquote>
Tag <address>
A <address> tag define as informações de contato do
autor / proprietário de um documento ou artigo.
<address>
Escreva para <a
href="mailto:contato@example.com">contato@example.com</a>.<br>
Rua .....
<br>
CEP: 00000-100
</address>
Comentários
Postar um comentário