HTML do básico ao avançado parte 5

Links

Todos os sites possuem imagens e links, raramente alguns utilizam apenas texto, mas todos têm links. O código de um link é muito simples, veja abaixo.

<a href="https://satellasoft.com" target="_blank" title="Título ao repousar o mouse">SatellaSoft</a>

• <a> - Significa Anchor (âncora)
• href="" - Hypertext Reference, é aqui que você inclui o seu link.
• title="" - Fornece um título que é exibido quando o mouse está repousado em uma âncora.
• target="" - É onde informamos como o link vai ser aberto

De acordo com a documentação da Mozilla, temos alguns valores para o parâmetro title, veja abaixo.

Imagem

Trabalhar com imagens é algo muito simples e rápido, seu código é:

<img alt="Imagem" src="imagem.png" title="Imagem" />

Note que não precisamos abrir e fechar img, como <img>, pois no HTML 5, img passa a ser uma tag órfão.

Onde img é abreviação de Image (Imagem),  src abreviação de source (Fonte)  e alt é abreviação de alternate (Alternar).

src =  deve conter o endereço da sua imagem, junto com a extensão.

alt = serve se caso a imagem não for exibida ele exibe um texto alternativo, porém é altamente recomendável a utilização desta propriedade, ela possibilita deficientes visuais saber do que se trata aquela imagem, já que eles não podem ver. Também serve para que motores de busca encontrem suas informações.

title = tem o mesmo objetivo do que foi explicado nas ancoras que é exibir um texto caso o usuário passe o mouse por cima da imagem.

É possível usar uma imagem como link, ao invés de colocar um texto dentro de um utilize a sintaxe da imagem.

<a href="https://google.com" title="Clique e vá para o Google">
     <img alt="Imagem" src="imagem.png" title="Imagem" />
</a>

Ainda no HTML 5, podemos usar a tag  figure para adicionar uma estrutura semântica.