Definindo relacionamentos semanticamente entre documentos XHTML

Quando temos páginas que se relacionam entre si ou que pertencem a um grupo de páginas, podemos definir o relacionamento entre elas de forma que parsers e crawlers possam identificá-los corretamente.

O responsável por isso é uma tag muito conhecida mas pouco compreendida: a tag link. Esta tag é conhecida por ser a responsável pela inclusão de arquivos CSS em documentos html mas pouca gente sabe por quê.

A tag link é responsável por definir qualquer relacionamento direto ou relacionamento reverso. Esta tag é uma short-tag e portanto não possui tag de fechamento, seguindo o terminador XHTML de short-tag <tag />

Análise

A tag de link possui a seguinte estrutura básica:

1

<link [direção]=[tipo] href='[documento relacionado]' />

Tipos e direções de relacionamento

Direção do relacionamento

Um relacionamento pode ter apenas duas direções: direta ou reversa.

Relacionamento direto

é o relacionamento do documento referenciado com o documento atual. Representado pelo atributo rel

Relacionamento reverso

é o relacionamento do documento atual com o documento referenciado. Representado pelo atributo rev

Tipos de relacionamento

Os relacionamentos entre documentos devem ter seu tipo especificado para que se possa saber como o documento se relaciona com o atual. Múltiplos tipos podem ser definidos através da mesma expressão sendo separados por espaços dentro do atributo rel ou rev. Ex: no caso da página anterior ser o índice.

Genéricos

alternate

Uma versão alternativa do documento (uma versão para impressão, versão em outra língua etc).

appendix

Um apêndice (como em livros) do documento.

bookmark

Documentos relacionados ao atual, como bibliografias ou artigos relacionados em geral

canonical

Um outro endereço para o documento atual.

copyright

A página de termos de uso e copyright do documento atual.

glossary

Um glossário (explicação) de termos empregados no documento.

help

Ajuda para o documento em questão. Muito útil para indicar páginas de FAQ.

stylesheet

Um arquivo de folha de estilo (CSS) alocado externamente.

Seção

Definem relacionamento entre documentos que pertencem ao mesmo grupo contínuo de documentos. Muito comum para arquivos seccionados como manuais ou artigos de múltiplas páginas.

start

O primeiro documento da série.

next

O próximo documento da série.

prev

O documento anterior da série.

contents

O documento é demonstra as páginas da série aninhadas por conteúdo. Uma espécie de índice geral.

index

O índice da série.

Referenciadores de índice

Usados para indicar relações específicas através do documento índice.

chapter

Um capítulo do documento.

section

Uma seção do documento.

subsection

Uma sub-seção do documento.

NOTA: Pode-se utilizar referências para seções no mesmo documento através de âncoras a.

Definindo o tipo de mídia

O tipo de mídia é o tipo de dispositivo de saída (monitor de PC, televisão, display de celular, display de handheld etc) onde a regra especificada no link

Definimos através do atributo media, dentro da tag link. O padrão (em caso de omissão da tag) é screen.

Tipos de mídia

screen

Monitores de computador

tty

Terminais Shell (navegadores texto como links ou lynx)

tv

Televisores

projection

Projetores multimídia / datashows (costuma ser setado pelo browser quando no modo “tela cheia”)

handheld

Palm-tops e handhelds em geral

print

Versão para impressão

braille

Impressoras e dispositivos braille.

aural

Leitores de texto para deficientes visuais.

all

Todos os dispositivos de mídia.

Definindo língua e a codificação de caracteres

As tags hreflang e charset definem, respectivamente, a língua e o conjunto de caracteres empregados no documento referenciado no relacionamento. Para isso a W3C disponibiliza a tabela de códigos de lingua (em inglês) e a tabela de códigos de conjunto de caracteres (charsets) (em inglês).

Mime-type

O mime-type do documento referenciado é identificado pelo atributo type comum em elementos XHTML. Uma lista de mime-types (em inglês) pode ser encontrado no site da IANA.

O caso do tipo de relacionamento icon

Os já conhecido favourite icon ou favicons foram introduzidos pela Microsoft como recurso do Internet Explorer 5 e eram reconhecidos pelo browser quando encontrava-se um arquivo Microsoft Icon Format (*.ico) na raiz do site com o seguinte nome: /favicon.ico

Como era de se esperar, a notação da tag link empregada pelo Internet Explorer era a definição de tipo de atributo rel como shortcut icon e violava o padrão W3C do atributo rel que deveria ter seus tipos de relacionamento separados por espaços (conforme dito previamente), transformando assim esta instrução nos tipos shortcut (que é inválido) e icon.

A Mozilla Labs implementou então que a tag deveria ficar apenas icon e foi seguida por navegadores como o Opera e está em vias de ser reconhecida como padrão.

NOTA: Algumas versões do Internet Explorer suportam apenas quando chamado por shortcut icon

Exemplos

Caso comum: Definindo CSS

Conforme citado no início deste artigo, o exemplo da definição de arquivos CSS externos é o caso mais comum e emprega os atributos type e media (opcional)

1
2
3

    <link rel="stylesheet" type="text/css" href="/css/site.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
    <link rel="stylesheet" type="text/css" href="/handheld.css" media="handheld" />

Páginas do grupo

1
2
3
4

 <link rel="contents" href="index.php" />
 <link rel="index" href="/secao/index.php" />
 <link rel="prev" href="/secao/artigo3.php" />
 <link rel="next" href="/secao/artigo5.php" />

Múltiplos tipos de relacionamento

O caso da primeira página da série

1

 <link rel="index prev" href="index.php" />

Documentos em outra língua

1

 <link rel="alternate" hreflang="en" href="/secao/en/artigo3.php" />

Feeds RSS

O Wordpress utiliza as tags link para especificar seus dois tipos de feeds RSS

1
2

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="/feed/" />
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="/feed/atom/" />

UPDATE: 23/05/2009
O Bruno Lustosa do Ataraxia! costuma acrescer uma querystring (texto após o ?) a URL para trackear a origem de algumas campanhas de email marketing e feeds e utilizou a tag link com o atributo canonical para evitar ter seu conteúdo dado como duplicado pelos buscadores que achariam que as páginas acrescidas da querystring seriam páginas distintas porém com o mesmo conteúdo.

NOTA: A tag link não deve ser usada para criar links de texto (apontadores de documento). São tags para definição de estrutura de documento e não são visíveis para o usuário final. Para isso utilize as tags a.

NOTA: Não há nenhuma declaração nem teste por minha parte de que o Google ou qualquer outro crawler considere esta tag em sua relevância entretanto programar corretamente nunca é demais.

Referências

• Documentação oficial da W3Schools (em inglês) sobre a tag link
• História do Favicon (em inglês) @ Wikipedia