Devo criar âncoras HTML com 'nome' ou 'id'?

Quando alguém deseja se referir a alguma parte de uma página da web com o http://example.com/#foométodo " ", deve-se usar

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

ou

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

Ambos funcionam, mas são iguais ou possuem diferenças semânticas?

De acordo com a especificação do HTML 5, 5.9.8 Navegando para um identificador de fragmento :

Para documentos HTML (e o tipo MIME text / html), o seguinte modelo de processamento deve ser seguido para determinar qual é a parte indicada do documento.

1. Analise a URL e deixe fragid o componente <fragment> da URL.
2. Se fragid for a string vazia, a parte indicada do documento será a parte superior do documento.
3. Se houver um elemento no DOM que tenha um ID exatamente igual a fragid, o primeiro desses elementos em ordem de árvore será a parte indicada do documento; pare o algoritmo aqui.
4. Se houver um elemento no DOM que possua um atributo de nome cujo valor seja exatamente igual a fragid, o primeiro elemento desse tipo em ordem de árvore será a parte indicada do documento; pare o algoritmo aqui.
5. Caso contrário, não há parte indicada do documento.

Então, ele procurará id="foo"e seguirá paraname="foo"

Editar: como apontado por @hsivonen, no HTML5 o aelemento não tem atributo de nome. No entanto, as regras acima ainda se aplicam a outros elementos nomeados.

Você não deve usar <h1><a name="foo"/>Foo Title</h1>nenhum tipo de código HTML text/html, porque a sintaxe do elemento vazio XML não é suportada text/html. No entanto, <h1><a name="foo">Foo Title</a></h1>está OK no HTML4. Não é válido no HTML5, conforme redigido atualmente.

<h1 id="foo">Foo Title</h1>está OK no HTML4 e no HTML5. Isso não funcionará no Netscape 4, mas você provavelmente usará uma dúzia de outros recursos que não funcionam no Netscape 4.

Eu tenho que dizer se você irá criar um link para essa área na página ... como page.html # foo e Foo Title não é um link que você deve usar:

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

Se você colocar uma <a>referência, seu título será influenciado por um <a>CSS específico em seu site. É apenas uma marcação extra e você não precisa dela. Eu recomendo colocar um ID no título, não só é melhor formado, como também permitirá que você endereça esse objeto em Javascript ou CSS.

A Wikipedia faz uso pesado desse recurso assim:

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

E a Wikipedia está funcionando para todos, então eu me sentiria seguro em seguir este formulário.

Além disso, não se esqueça, você pode usar isso não apenas com extensões, mas também com divs ou mesmo células de tabela e, em seguida, terá acesso à pseudo-classe: target no elemento. Cuidado para não alterar a largura, como em texto em negrito, porque isso move o conteúdo, o que é perturbador.

Âncoras nomeadas - meu voto é para evitar:

• "Nomes e IDs estão no mesmo espaço para nome ..." - Dois atributos com o mesmo espaço para nome são loucos. Vamos apenas dizer preterido.
• "Ancora elementos sem o atributo href" - Mais uma vez, a natureza de um elemento (hiperlink ou não) é definida por ter um atributo ?! Louco duplo. O senso comum diz para evitá-lo completamente.
• Se você estilizar uma âncora sem uma pseudo-classe, o estilo será aplicado a cada uma. No CSS3, você pode contornar isso com seletores de atributos (ou o mesmo estilo para cada pseudoclasse), mas ainda assim é uma solução alternativa. Isso geralmente não aparece porque você escolhe cores por pseudo-classe, e o sublinhado presente por padrão faz sentido remover, o que faz com que seja o mesmo que outro texto. Mas você decide tornar seus links em negrito, isso causará problemas.
• O Netscape 4 pode não suportar o recurso de identificação, mas ainda assim um atributo desconhecido não causará nenhum problema. Isso é o que chamou de compatibilidade para mim.

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

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

Atenção para usuários de JavaScript: todos os IDs se tornam variáveis ​​globais na janela .

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

Acabou de criar o JS global:

window.foo

O valor de window.fooserá o HTMLElementpara o h1.

A menos que você possa garantir que todos os valores usados ​​nos idatributos sejam seguros, você pode preferir seguir name:

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

Não há diferença semântica; a tendência nos padrões é mais para o uso do idque para name. No entanto, existem diferenças que podem levar a pessoa a preferir nameem alguns casos. A especificação HTML 4.01 oferece as seguintes dicas :

Use idou name? Os autores devem considerar os seguintes problemas ao decidir usar idou namepara um nome de âncora:

• O atributo id pode atuar como mais do que apenas um nome de âncora (por exemplo, seletor de folha de estilo, identificador de processamento etc.).
• Alguns agentes de usuário mais antigos não suportam âncoras criadas com o atributo id.
• O atributo name permite nomes de âncoras mais ricos (com entidades).

O método de ID não funcionará em navegadores antigos, o método de nome da âncora será preterido nas versões HTML mais recentes ... Eu usaria o id.

Eu tenho uma página da Web que consiste em um número de contêineres div empilhados verticalmente, idênticos em formato e diferindo apenas no número de série. Eu queria ocultar o nome âncora na parte superior de cada div. Portanto, a solução mais econômica foi incluir a âncora como um ID na tag div de abertura, ou seja,

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

O segundo exemplo atribui um ID exclusivo ao elemento em questão. Este elemento pode ser manipulado ou acessado usando 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.

Apenas uma observação sobre a marcação O formulário de marcação nas versões anteriores do HTML forneceu um ponto de ancoragem. As formas de marcação em HTML5 usando o atributo id, embora sejam equivalentes, requerem um elemento para identificar, quase todo que normalmente se espera que contenha conteúdo.

Um span ou div vazio pode ser usado, por exemplo, mas esse uso parece e cheira degenerado.

Um pensamento é usar o elemento wbr para esse fim. O wbr possui um modelo de conteúdo vazio e simplesmente declara que é possível uma quebra de linha; ainda é um uso ligeiramente gratuito de uma tag de marcação, mas muito menos do que divisões de documentos gratuitas ou extensões de texto vazias.

No html 5, o id=""atributo define um identificador exclusivo para um elemento, que também é uma âncora para um link de fragmento. Nos padrões html anteriores, o name=""atributo do <a>elemento define uma âncora para um link de fragmento. Eu recomendo algo como: como o
<a name="foo" id="foo"></a><h1>Foo Title</h1>
suporte ao id=""atributo é um pouco irregular (mesmo que os lançamentos mais recentes de todos os principais navegadores o suportem, os lançamentos que não têm mais do que alguns anos de idade [E é melhor não quebrar algo se não houver uma boa razão para]). É compatível e não estiliza o que está no elemento vinculado, pois o fechamento ainda está fora do elemento, mas ainda é válido em todos os padrões atuais.

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

Que tal usar o atributo name para navegadores antigos e o atributo id para os novos navegadores. Ambas as opções serão usadas e o método de fallback será implementado por padrão !!!

Todo o conceito de "âncora nomeada" usa o atributo name, por definição. Você deve continuar usando o nome, mas o atributo ID pode ser útil para algumas situações em javascript.

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