Devo fazer HTML Âncoras com 'nome' ou 'id'?

https://stackoverflow.com/questions/484719

20-08-2019
|

Pergunta

Quando se quer referir-se a uma parte de uma página web com o método "http://example.com/#foo", se uma utilização

<h1><a name="foo"/>Foo Title</h1>

<h1 id="foo">Foo Title</h1>

Ambos trabalham, mas são eles igual, ou têm diferenças semânticas?

Solução

De acordo com a especificação HTML 5, 5.9.8 Navegar a um fragmento identificador :

Para documentos HTML (eo text / html MIME tipo), o modelo de processamento seguinte devem ser seguidas para determinar o que a parte indicada do documento é.

Parse o URL, e deixe fragid ser o componente da URL.

Se fragid é a string vazia, então a parte indicada do documento é a parte superior do documento.

Se houver um elemento no DOM que tem um ID exactamente igual à fragid, então o primeiro desses elementos, a fim de árvore é a parte indicada do documento; parar o algoritmo aqui.

Se houver um a elemento no DOM que tem um atributo nome cujo valor é exatamente igual a fragid, então o primeiro desses elementos, a fim de árvore é a parte indicada do documento; parar o algoritmo aqui.

Caso contrário, não há nenhuma parte indicada do documento.

Então, ele vai olhar para id="foo", e depois seguirá para name="foo"

Edit: Como apontado por @hsivonen, em HTML5 o elemento a tem nenhum atributo nome. No entanto, as regras acima ainda se aplicam a outros elementos nomeados.

Outras dicas

Você não deve usar <h1><a name="foo"/>Foo Title</h1> em qualquer sabor do HTML serviu como text/html, porque o XML elemento vazio sintaxe não é suportada no text/html. No entanto, <h1><a name="foo">Foo Title</a></h1> é OK em HTML4. Não é válido em HTML5 na sua redacção actual.

<h1 id="foo">Foo Title</h1> é OK em ambas HTML4 e HTML5. Isso não vai funcionar no Netscape 4, mas você provavelmente vai usar uma dúzia de outras características que não funcionam no Netscape 4.

Eu tenho que dizer se você está indo para estar ligando para essa área na página ... como page.html # foo e Foo Título não é um link que você deve usar:

<h1 id="foo">Foo Title</h1>

Se você, em vez colocar uma referência <a> em torno dele seu título será influenciado por um CSS específico <a> dentro do seu site. É só marcação extra, e você não deve precisar dele. Eu recomendo colocar um id no título, não só é melhor formada, mas vai permitir que você quer endereço esse objeto no Javascript ou CSS.

Wikipedia faz uso intenso desse recurso como este:

<a href="#History">[...]</a>
<span class="mw-headline" id="History">History</span>

E Wikipedia está trabalhando para todos, por isso gostaria de sentir a aderência segura com este formulário.

Também não se esqueça, você pode usar isto não só com vãos mas com divs ou células, mesmo mesa, e então você tem acesso ao:-alvo de classe pseudo no elemento. Apenas atente para não alterar a largura, como com texto em negrito, causa que se move em torno do conteúdo, o que é preocupante.

âncoras com nome - o meu voto é para evitar:

"Os nomes e ids estão no mesmo namespace ..." - dois atributos com o mesmo namespace é uma loucura. Vamos apenas dizer que já obsoleto.
"âncoras elementos sem atribute href" - Mais uma vez, a natureza de um elemento (hyperlink ou não) é definida por ter um atribute ?! Duplo louco. O senso comum diz para evitá-lo por completo.
Se você nunca estilizar uma âncora sem um pseudo-classe, o estilo se aplica a cada um. Em CSS3 você pode contornar isso com seletores de atributos (ou mesmo estilo para cada pseudoclass), mas ainda é uma solução alternativa. Isso geralmente não surgem, porque você escolhe cores por pseudo-classe, eo ser sublinhado presente por padrão ela só faz sentido para remover, o que torna o mesmo que outro texto. Mas você decidir fazer suas ligações negrito, ele vai causar problemas.
Netscape 4 poderá não suportar o recurso id, mas ainda um atributo desconhecido não vai causar nenhum problema. Isso é o que chamados de compatibilidade para mim.

<h1 id="foo">Foo Title</h1>

é o que deve ser usado. Não use uma âncora menos que você queira um link.

Heads up para usuários de JavaScript: todas as identificações tornam-se variáveis ??globais sob a janela

<h1 id="foo">Foo Title</h1>

Apenas criou o JS mundial:

window.foo

O valor da window.foo será o HTMLElement para o h1.

A menos que você pode garantir todos os valores utilizados em atributos id são seguros, você pode preferir furar a name:

<h1 name="foo">Foo Title</h1>

método ID não irá funcionar em navegadores mais antigos, método nome da âncora será depreciado em versões HTML mais recentes ... eu iria com id.

Não há nenhuma diferença semântica; a tendência nos padrões é para o uso de id em vez de name. No entanto, existem diferenças que podem levar a preferir name em alguns casos. As HTML 4.01 ofertas de especificação as seguintes dicas :

Use id ou name? Os autores devem considerar as seguintes questões quando decidir se deve usar id ou name para um nome de âncora:

O atributo id pode actuar como mais do que apenas um nome de ancoragem (por exemplo, o selector de folha de estilo, identificador de processamento, etc.).
Alguns agentes mais antigos não suportam âncoras criadas com o atributo id.
O atributo name permite nomes de âncoras mais ricos (com entidades).

I têm uma página da web que consiste de um número de recipientes de div, empilhadas verticalmente idênticos no formato e diferindo apenas no número de série. Eu queria esconder a âncora nome no topo de cada div, então a solução mais econômica acabou por ser incluindo a âncora como um id dentro da abertura div tag, ou seja,

<div id="[serial number]" class="topic_wrapper">

Apenas uma observação sobre a marcação A forma de marcação em versões anteriores do HTML fornecido um ponto de ancoragem. As formas de marcação em HTML5 usando o atributo id, enquanto na maior parte equivalente, exigem um elemento para identificar, quase todos os quais são normalmente esperado para conter conteúdo.

Um espaço vazio ou div poderia ser usado, por exemplo, mas isso parece uso e cheira degenerado.

Um pensamento é usar o elemento wbr para esta finalidade. O WBR tem um modelo de conteúdo vazio e simplesmente declara que uma quebra de linha é possível; este ainda é um uso ligeiramente gratuita de uma etiqueta de marcação, mas muito menos do que as divisões de documentos gratuitos ou vãos de texto vazios.

A segunda amostra atribui um ID exclusivo para o elemento em questão. Este elemento pode então ser manipulado ou acedida utilizando DHTML.

O primeiro, por outro lado, define um local nomeado dentro do documento, semelhante a um marcador. Anexado a uma "âncora", faz todo o sentido.

Em HTML 5, o atributo id="" define um identificador exclusivo para um elemento, que também é uma âncora para um link fragmento. Em padrões HTML anteriores, o atributo name="" do elemento <a> define uma âncora para a ligação de um fragmento. Eu recomendo algo como:
<a name="foo" id="foo"></a><h1>Foo Title</h1>
Como o suporte para o atributo id="" é um irregular bit (embora os últimos lançamentos de todos os principais navegadores apoiá-lo, os lançamentos que não o fazem não são mais do que alguns anos [E é melhor não quebrar alguma coisa se há isn' t uma boa razão para]). É compatível, e isso não acontece estilo tudo o que está no elemento link'd, para o fechamento ainda está fora do elemento, mas ainda é válida em todos os padrões atuais.

Certifique-se de que os name="" e id="" atributos do elemento <a> são os mesmos.

Como sobre usando o atributo nome para navegadores antigos e atributo id para os novos navegadores. Ambas as opções serão utilizados e método de fallback será implementado por padrão !!!

O conceito inteiro "chamado âncora" usa o atributo nome, por definição. Você deve se ater apenas ao uso do nome, mas o atributo ID pode ser útil para algumas situações de JavaScript.

Como nos comentários, você sempre pode usar tanto para proteger suas apostas.

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow