Fábrica de Software » Tipos de Links no HTML5

A possibilidade de linkar determinados documentos de uma página na WEB, torna a vida do usuário bem mais simples. Imagina como seria se você precisasse procurar um artigo dentre vários outros sem nenhum tipo de marcação a não ser o titulo dele? Ou algum texto ou de um autor especifico? Seria bastante complicado e cansativo, já que as páginas na WEB são diferentes de livros, que contém um índice para localizar um determinado conteúdo e abrir diretamente na página desejada. Para deixar tudo mais fácil e dinâmico existem os links.

Há duas formas principais de linkar um documento, os elementos âncora e link. O elemento âncora é representado pela tag a e cria um link do conteúdo da página.

Exemplo:

<a href=”http://fabricadesoftware.com.br”>Fábrica de Software</a>

Já o link, cria um metadado e não aparece no conteúdo, o uso mais comum é vincular um documento a uma folha de estilos

Exemplo:

O elemento rel pode estar presente no dois elementos citados à cima e podem conter determinados valores como:

Metadados de navegação

Archives: Onde estão localizados os arquivos do site;
Author: A página do autor do documento, pode encaminhar para redes sociais, outros blogs do mesmo, contato, etc;
Bookmark: O permalink da sessão a que este documento pertence;
First: O primeiro documento da série a qual o mesmo pertence;
Help: Ajuda para a página;
Index: O índice ou sumário que inclui o link para página;
License: A licença que cobre o documento;
Next: Ir para o próximo documento da série em que o mesmo pertence;
Prefetch: O agente de usuário deve fazer cache do link em segundo plano logo que o documento atual tenha sido carregado. O autor indica que o link é o provavelmente o próximo destino do usuário;
Prev: ir para o documento anterior da série em que o mesmo pertence;
Seach: Busca no site;
Up: Um documento um nível acima do mesmo;

O navegador Opera é um exemplo de como cada um desses links podem ser exibidos:

Exemplo de links no navegador Opera

Metadados da página

Alternate: Um formato alternativo para o conteúdo atual. Precisa estar acompanhado do atributo type, contendo o tipo de MIME do formato.

Icon: O ícone que representa a página;
Pingback: A URL de pingback desta página. Através desse endereço um sistema de blogging ou gerenciador de conteúdo, pode avisar automaticamente quando um link for inserido para a página;
Stylesheet: A folha de estilo linkada deve ser vinculada ao documento para exibição;

Comportamento dos links na página

External: Indica um link externo ao domínio do documento atual;
Nofollow: Indica que o autor do documento atual não endossa o conteúdo desse link;
Noreferrer: O agente de usuário deve enviar o header HTTP Referer se o usuário acessar esse link;
Sidebar: O link deve ser aberto numa sidebar do navegador. se este recurso estiver disponível;

Conforme o artigo, podemos perceber a importância dos links em uma página da WEB, dessa forma os sites se tornam muito mais organizados e dinâmicos, facilitando a navegação, e possibilitando ao usuário uma forma mais rápida de localizar determinados conteúdos.

Muito obrigado por ter lido este artigo, fique atento aos próximos!

Gostou do texto? Já pensou em se qualificar e entrar para o mercado que mais cresce atualmente? Conheça e participe do curso Programador Web da Fábrica de Software para um Varejo mais competitivo em Campo Grande(MS). Este texto foi produzido como parte das atividades relacionadas com os estudos sobre os Princípios do Designer e páginas Web para Programadores, sobre a orientação do professor Marco Aurélio Dias de Oliveira.

Leia outros textos relacionados com Princípios do Designer e páginas Web para Programadores.

Aplicações offline com HTML5
Novos tipos de campos no HTML5
Usando MathML e SVG com HTML5
Tipos de Links no HTML5
O que são SERVER-SENT EVENTS no HTML5
O DOM e o HTML5
Menus e Toolbars no HTML5
O que é HTML5
Compatibilidade entre os navegadores com o HTML5
Novos elementos e atributos do HTML5