HTML5: O elemento link
O elemento <link> no HTML5 é utilizado para vincular recursos externos a uma página da web. Esses recursos podem ser folhas de estilo CSS, favicons, feeds RSS, entre outros. A tag <link> é essencial para estabelecer conexões entre o documento HTML e recursos externos, contribuindo para a formatação, o layout e a funcionalidade da página.
Sintaxe da tag <link>
<a href="url">texto do link</a>
Este é um exemplo de link para o nosso blog:
<a href="https://samory.sistemasresponsivos.com.br/">Veja o Samory Blog!</a>
O atributo target
é utilizado em um elemento de âncora (<a>) para especificar onde o navegador deve abrir o novo documento vinculado. O valor atribuído ao target define o contexto do navegador para exibir a página vinculada. Alguns valores comuns para o atributo target incluem:
_blank: Este valor instrui o navegador a abrir o link em uma nova janela ou aba, dependendo da configuração do navegador. Isso é útil quando se deseja manter o site original aberto para referência.
<a href="https://www.exemplo.com" target="_blank">Visite Exemplo</a>
_self: Este é o valor padrão. O link será aberto na mesma janela ou aba em que o link foi clicado.
<a href="https://www.exemplo.com" target="_self">Visite Exemplo</a>
_parent: Indica que o link será aberto na janela pai do documento que contém o link. Útil quando há frames ou iframes.
<a href="https://www.exemplo.com" target="_parent">Visite Exemplo</a>
_top: Este valor faz com que o link seja aberto no topo da hierarquia de janelas, substituindo qualquer frame existente.
<a href="https://www.exemplo.com" target="_top">Visite Exemplo</a>
O uso adequado do atributo target é importante para controlar como os links afetam a experiência de navegação do usuário. Por exemplo, ao usar <target="_blank">, os desenvolvedores devem estar cientes de que isso pode afetar a experiência do usuário, e devem considerar que devem fornecer indicações visuais de que o link abrirá em uma nova janela ou aba.
Exemplos práticos
Vinculando uma Folha de Estilo CSS
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="estilos.css"> <title>Minha Página</title> </head> <body> <!-- Conteúdo da página aqui --> </body> </html>
Neste exemplo, a folha de estilo externa chamada “estilos.css” está vinculada ao documento HTML usando a tag <link>. Isso permite a aplicação de estilos definidos no arquivo CSS à página HTML.
Vinculando um Ícone (Favicon)
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <title>Minha Página</title> </head> <body> <!-- Conteúdo da página aqui --> </body> </html>
Neste caso, a tag <link> é usada para vincular um ícone (favicon) à página. O atributo rel especifica o tipo de relação, que, neste caso, é “icon”, e o atributo href fornece o caminho para o arquivo de ícone.
Vinculando um Feed RSS
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="alternate" type="application/rss+xml" title="Feed RSS" href="feed.xml"> <title>Minha Página</title> </head> <body> <!-- Conteúdo da página aqui --> </body> </html>
Neste exemplo, a tag <link> é usada para vincular um feed RSS à página. O atributo rel indica que se trata de um link alternativo e o atributo type especifica o tipo de conteúdo do link. O atributo href fornece o caminho para o arquivo de feed RSS.
O elemento <link> é versátil e desempenha um papel fundamental na construção de páginas web, permitindo a conexão eficiente de recursos externos que contribuem para a experiência do usuário e o design da página.
Referência da tag <link> no W3C
https://html.spec.whatwg.org/multipage/semantics.html#the-link-element