Hyperlinks

Introdução

As vezes pensamos que determinado assunto já foi esgotado até a última gota. Um desses assuntos até que poderia ser sobre hyperlinks. Não é possível viver sem eles na web. Muitas pessoas ainda não sabem usá-los com eficiência, as vezes por estarem fadados a fazer toda a codificação em programas wysiwyg ou então por falta de conhecimento. Uma das formas mais geniais de navegação na internet anda deficiente e muito.

Com este texto eu espero atingir usuários iniciantes e avançados. Se você não sabe quase nada sobre o assunto, espero que encontre aqui tudo o mais digerido possível. Se você já sabe muito, espero que algumas relações e discussões que eu trarei aqui talvez te ajude a se lembrar de uma coisa ou outra, discutindo não só o lado técnico mas também o lado conceitual. Boa parte da eficiência da utilização de um código semântico, nem sempre está relacionado ao conhecimento somente técnico. Entender a “lógica” é a base para uma aplicação técnica perfeita, e não o contrário. Se você está estudando web standards, aprender a usar bem hyperlinks é o caminho para o cálice sagrado. Vamos ver todos os padrões  e recomendações da W3C existentes para os hyperlinks, seus atributos, valores e em contextos de acessibilidade e técnicas de otimização de mecanismos de busca (SEO). Como este assunto é muito extenso e meu documento acabou ficando com mais de 10 páginas, resolvi dividir o assunto em alguns capítulos bem menores, mas melhores dissecados.

Dissecando

A principal referência normativa que você pode se basear para estudar hyperlinks nos documentos da W3C continua sendo a do HTML 4.01. Basicamente nada mudou deste então. Lá você encontra tudo o que precisa dissecado ponto a ponto em uma linguagem mais técnica mas completa sobre o assunto. No início quando estamos aprendendo web standards, é comum ter certo medo das documentações da W3C. Parecem técnicas demais e ou fazem referências demais. Mas beba sempre da fonte. Se dedique a ler estas documentações e com o tempo, você aprende todo o vocabulário que vai te fazer compreender aqueles textos mais facilmente. Este texto pretende ser mais abrangente, conceitual, técnico e informativo o quanto for possível. Sem exageros. Atributos que cairam em desuso não serão explorados aqui.

Âncoras

As âncoras representam uma forma de fazer referência a um trecho específico dentro de um documento. Observe os “links permanente” de cada comentário inserido pelos leitores neste site. Cada comentário possuiu um número em ordem crescente e uma âncora individual que não se repete no site. Através dele, você pode citar apenas trechos específicos de um documento ou comentário em um site. São as âncoras que me permite ficar citando trechos específicos da documentação da W3C. Elas são compostas de basicamente duas partes distintas, o link que chama a âncora e a âncora propriamente dita.

Ancora: <a name="exemplo" id="exemplo"></a>

A âncora é formada pelos atributos “name”

e ou “id” que podem ser inseridos juntos dentro da tag a. Além dos dois atributos terem o mesmo nome, não podem existir na mesma página elementos que tenham o mesmo nome ou id. Eles devem ser únicos na página e tanto o name quanto o id devem possuir o mesmo nome. A razão de colocar ambos os atributos é a compatibilidade com browsers antigos. Por isso comumente sempre se utiliza o name e id juntos. Se você não está muito preocupado com browsers antigo, basta apenas atribuir um id ou um name (geralmente a preferência é pelo id).

Link: <a href="#exemplo">Veja o Exemplo</a>

O link que faz referência a âncora, deve trazer o caracter “sharp” ou “sustenido ( # ) seguido do nome da âncora como no exemplo acima. Agora, se a âncora estiver em outra página, por exemplo, será preciso colocar a URL completa do documento a ser linkado seguido de sustenido mais o nome da âncora, como no exemplo abaixo:


<a  href=”http://www.revolucao.etc.br/archives/microformats/#comment-193”>
  	Comentário do Henrique no artigo Microformats
</a>

Usar âncoras é uma forma muito inteligênte de permitir com que apenas partes de um documento ou artigo, ou o que for que você esteja compartilhando na web, sejam referências dentro do próprio documento ou fora dele. Artigos longos, que tratam de partes específicas e que se encontra dentro de um mesmo documento, sugere que você utilize âncoras, bem como comentários em blogs etc.

Hyperlinks

O mais importante sobre o uso de hyperlinks, através do elemento <a>, é a relação que ele tem com os atributos que podem ser inseridos. Um hyperlink elegante e semântico com certeza será a combinação de alguns atributos colocados no lugar correto e na hora certa. E é basicamente sobre a listagem abaixo que os próximos artigos vão tratar. Os atributos são:

Atributo id e class

Há varias razões pelas quais você pode inserir ids em um link específico ou em qualquer outro elemento de XHTML. Você pode querer manipulá-lo por JavaScript, alterar um elemento com um id específico dinâmicamente por programação e até mesmo estilizar ou posicionar um elemento de forma precisa e específica. Lembre-se somente que um id é um identificador (id = identificador) único que nunca deve se repetir na mesma página e que cada elemento ou tag do XHTML só pode ter um único id. Essas são as regras.

Além de ser um identificador, o id possui as mesmas características que o atributo class. A diferença é que apenas o “id” serve como identificador e não o class. Uma característica interessante do “id”, é que ele também serve para propósitos gerais processados por user agents.

Várias especificações Microformats utilizam nomes de classes padronizados, e se tornaram um tipo de design pattern, criando  semântica onde antes não existia. Já que estes atributos nos permite fornecer valores que podem ser utilizados com propósitos gerais, inclusive com propósito semântico, os microformats encontrou nesta “brecha” o DNA necessário para se tornar um “padrão”.  Este assunto, você pode ler mais detalhadamente no meu texto “microformats: o mundo de significado do atributo class.” Lá você você tem o restante das informações relacionadas com estes atributos.

  • Fábio Caparic

    Muito bom o artigo.

    MAS achei um pequeno erro:

    "A âncora é formada pelos atributos “name” e “id” inseridos juntos dentro da tag a."

    No próprio link para o W3c que vc disponibiliza está claro que a coisa não funciona assim:

    "An anchor name is the value of either the name or id attribute when used in the context of anchors."

    Não vi se havia mais algo precisando ser revisado… MAS, o artigo ainda é muito bom.

    []'s

  • http://revolucao.etc.br/ Henrique Costa Perei

    Valeu Fábio. Fiz a correção. Apesar de já saber disso o erro foi de atenção.

  • Fábio Caparic

    Beleza Henrique… eu sabia que era o sono. :D

  • Pedro Rogério

    Legal o artigo, esclareceu minhas dúvidas.

  • http://emanuelslima.blogspot.com Emanuel Santos Lima

    Gostei do artigo, bem referenciado, conciso e abrangente para iniciantes e para dar uma refrescada na memória dos mais antigos como sempre ótimo artigo cara, continue assim

  • Douglas d'Aquin

    Não caberia aqui também um toque sobre XFN e o atributo rel ?

    acho que seria interessante pra quem não conhece ainda

  • http://revolucao.etc.br/ Henrique Costa Perei

    Como eu disse no início do artigo Douglas, eu dividi este assunto em vários artigos. Com certeza eu vou falar de XFN dentre outros assuntos relacionados com os atributos possíveis de hyperlinks.

  • http://www.nghorta.com Newton de Góe

    A amostra ficou muito boa e bem explicada. Fico no aguardo do complemento.

  • http://www.robsonsobral.com [- sObRaL -]

    Henrique, os links não podem ser apontados para qualquer elemento identificado, dispensando muitas vezes a criação de âncoras?

  • http://www.mercadoshop.com.br Everton Figueiredo

    Muito boa o artigo, os Hyperlinks tem uma importância bem grande em documento XHTML, esse artigo é bom para abrir mais o horizonte de quem está meio popr fora do assunto…

  • http://www.renanandrade.com.br Renan

    Ae gostei muito do artigo, estava com uma dúvida que foi sanada, muito obrigado !!!!

  • Pingback: Tem gente que não sabe linkar! » Revolução Etc()