Tag <a>
A tag <a>, conhecido como tag de âncora, é usada para vincular uma página a outra, utilizando o atributo “href”. Esta tag é responsável por vincular os demais documentos que o nosso HTML possui, links internos e externos. Para conseguirmos declarar essa tag, devemos incluir o atributo href e um texto como corpo da tag <a>.
O ideal é que todos os acessos para outras página, internas ou externas, sejam feitos através das tags <a> .
Nota
Ao utilizar um texto na tag
<a>é possível colocar uma imagem por meio da [[Tag IMG|Tag]].
Atributos
Atributo href
Adicionar um link de imagem, site, etc.
Atributo target
target="_blank": abrir uma nova aba do navegar quando for acessar o link dohref
Atributo rel
Especificar a relação entre o arquivo (documento HTML) e o link (do href)
Nota
Esse atributo é muito importante para o SEO. Para saber mais clique aqui.
Exemplo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navegação por IDs</title>
</head>
<body>
<header>
<h1>Minha Página</h1>
</header>
<nav>
<ul>
<li><a href="#section1">Seção 1</a></li>
<li><a href="#section2">Seção 2</a></li>
<li><a href="#section3">Seção 3</a></li>
</ul>
</nav>
<section id="section1">
<h2>Seção 1</h2>
<p>Conteúdo da Seção 1.</p>
</section>
<section id="section2">
<h2>Seção 2</h2>
<p>Conteúdo da Seção 2.</p>
</section>
<section id="section3">
<h2>Seção 3</h2>
<p>Conteúdo da Seção 3.</p>
</section>
</body>
</html>Neste exemplo, temos um cabeçalho, uma barra de navegação com links para as seções e três seções distintas identificadas pelos IDs section1, section2, e section3.
Links de Navegação
Os links na barra de navegação apontam para os IDs das seções correspondentes. Ao clicar em um link, o navegador rolará automaticamente até a seção associada.