Links em HTML

Olá pessoal, hoje vamos aprender sobre links em HTML. A Internet não existiria como conhecemos hoje sem a criação dos links, que serve para estabelecer uma forma de ligação entre as páginas web.

Imagine que você precisa chegar a um determinado local, a primeira coisa que viria a pensar seria "onde?" Então os links servem para isso, para informar para onde devemos ir. Em uma página web, o local pode ser na própria página ou uma página externa.

A tag a é utilizada para criar uma ligação entre páginas e também para podemos navegar na própria página.

Não confunda a tag a com tag link, a tag link é utilizada para vincular (anexar) arquivos externos ao documento HTML, por exemplo, um arquivo de estilo CSS.

Link na própria página.

<a href="#lorem1">Lorem 1</a>

<a href="#lorem2">Lorem 2</a>

<div id="lorem1">
Donec sit amet ante volutpat, sodales tellus sit amet, posuere ipsum. Maecenas vel ultricies nibh. Proin metus tellus, ullamcorper non aliquet nec, gravida a odio. Curabitur ornare lacus vulputate, bibendum lectus sed, euismod felis. Maecenas eget sapien felis. Praesent ut mattis tortor. Fusce sodales augue vel imperdiet cursus. Etiam ut tempor leo, nec fermentum dui. Etiam ornare cursus dapibus. Suspendisse eget augue neque. Nam quis lacus porta, ultricies turpis et, efficitur dui.
</div>

<div id="lorem2">
Vestibulum id erat feugiat, efficitur tortor eu, gravida turpis. Vivamus tincidunt urna lacus, eu ullamcorper nisl volutpat id. Aliquam viverra at augue vitae fermentum. Nulla non nulla ligula. Praesent gravida tortor eu turpis cursus blandit. Nam dictum hendrerit rutrum. Donec fermentum gravida interdum. Phasellus et laoreet libero. Vestibulum ut nulla et dolor tincidunt vulputate a eu massa. Nulla facilisi. Praesent at imperdiet massa.
</div>

Link entre páginas do mesmo projeto, veja a estrutura de pasta abaixo.

project/
  - index.html
  - about.html

Caso queiramos acessar a página about, sendo que estamos na página index, podemos utilizar o caminho relativo, o caractere ponto representa o local atual do arquivo.

<a href="./about.html">About</a>

Também temos como utilizar links para páginas externas.

<a href="https://www.google.com" target="_self">Google</a>

<a href="https://www.google.com" target="_blank">Google</a>

Podemos observar o atributo target, utilizado para direcionar onde a página HTML vinculada será exibida:

• _self
  • É o padrão, abre a página na mesma janela.
• _blank
  • Abre a página em uma nova janela.

Valeu pessoal 😎✌!