Hyperlinks

Por: Henrique Pereira

Categoria: HTML / CSS / JavaScript

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:

• id, class (document-wide identifiers)
• lang (language information), dir (text direction)
• title (element title)
• style (inline style information )
• shape and coords (image maps)
• onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events )
• target (target frame information)
• tabindex (tabbing navigation)
• accesskey (access keys)
• href, hreflang, type, rel, rev (links and anchors)

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.

Artigos relacionados:

• Target Blank
• Microformats: o mundo de significado do atributo class
• A semântica do span e do div
• Media Print
• Usando entities e referências numéricas de caracteres – NCR
• Hyperlinks: o atributo target e algumas querelas morais.
• CSS Signatures

Este texto não pode ser copiado ou reproduzido em nenhum outro site na íntegra sem autorização do autor!. Mais detalhes sobre licença de uso aqui!