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

votos
688

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

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

ou

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

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

Publicado 27/01/2009 em 19:57
fonte usuário
Em outras línguas...                            


14 respostas

votos
553

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

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

  1. Analisar a URL, e deixe fragid ser o <fragmento> componente da URL.
  2. Se fragid é a cadeia vazia, em seguida, a parte indicada do documento é o topo do documento.
  3. Se há um elemento no DOM que tem um ID exatamente igual a fragid, então o primeiro desses elementos, a fim de árvore é a parte indicada do documento; parar o algoritmo aqui.
  4. Se houver um um elemento no DOM que tem um atributo nome cujo valor é exatamente igual ao fragid, então o primeiro desses elementos, a fim de árvore é a parte indicada do documento; parar o algoritmo aqui.
  5. Caso contrário, não há nenhuma parte indicada do documento.

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

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

Respondeu 27/01/2009 em 20:10
fonte usuário

votos
166

Você não deve usar <h1><a name="foo"/>Foo Title</h1>em qualquer sabor do HTML serviu 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 outros recursos que não funcionam no Netscape 4.

Respondeu 27/01/2009 em 20:37
fonte usuário

votos
47

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 estar usando:

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

Se você, em vez colocar uma <a>referência ao seu redor que você está título vai ser influenciado por uma <a>CSS específicas em seu site. É só marcação extra, e você não deve precisar dele. É altamente recomendável para ir com a colocação de um id no título, não só é melhor formados, mas vai permitir que você quer endereço que objeto em Javascript ou CSS.

Respondeu 27/01/2009 em 20:03
fonte usuário

votos
21

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 se sentir seguro furar com esta forma.

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 move o conteúdo em torno, o que é preocupante.

âncoras nomeadas - 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 completamente.
  • Se você já se denominar 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, e o sublinhado estar presente por padrão, ele 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 chamou de compatibilidade para mim.
Respondeu 25/03/2013 em 15:46
fonte usuário

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

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

Respondeu 25/06/2009 em 20:49
fonte usuário

votos
9

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.

Respondeu 27/01/2009 em 20:02
fonte usuário

votos
8

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

Use idou name? Os autores devem considerar as seguintes questões quando decidir se deve 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 mais antigos não suportam âncoras criadas com o atributo id.
  • O atributo name permite nomes de âncoras mais ricos (com entidades).
Respondeu 27/01/2009 em 20:26
fonte usuário

votos
5

Heads-up para usuários de JavaScript: todos os IDs se tornam variáveis globais sob a janela .

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

Acabou de criar a JS mundial:

window.foo

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

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

<h1 name="foo">Foo Title</h1>
Respondeu 17/02/2015 em 18:23
fonte usuário

votos
3

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 tag div de abertura, ou seja,

<div id="[serial number]" class="topic_wrapper">
Respondeu 13/06/2012 em 03:10
fonte usuário

votos
2

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.

Respondeu 31/12/2011 em 05:23
fonte usuário

votos
1

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.

Respondeu 27/01/2009 em 20:04
fonte usuário

votos
0

Em html 5, o id=""atributo define um identificador único para um elemento, o que também é uma âncora para a ligação de um fragmento. Em padrões HTML anteriores, o name=""atributo do <a>elemento 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 id=""atributo é um pouco irregular (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 não houver uma boa razão para]). É compatível, e isso não acontece estilo tudo o que está no elemento link'd, para o fechamento </a> 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 <a>elemento são os mesmos.

Respondeu 25/06/2017 em 17:45
fonte usuário

votos
0

Que tal usar 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 !!!

Respondeu 20/06/2013 em 08:36
fonte usuário

votos
-2

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 javascript.

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

Respondeu 27/01/2009 em 19:59
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more