Devo creare ancore HTML con 'nome' o 'id'?

Quando si desidera fare riferimento a una parte di una pagina Web con il http://example.com/#foometodo " ", si dovrebbe usare

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

o

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

Entrambi funzionano, ma sono uguali o hanno differenze semantiche?

Secondo la specifica HTML 5, 5.9.8 Navigazione verso un identificatore di frammento :

Per i documenti HTML (e il tipo MIME text / html), è necessario seguire il seguente modello di elaborazione per determinare qual è la parte indicata del documento.

1. Analizza l'URL e lascia che fragid sia il componente <fragment> dell'URL.
2. Se fragid è la stringa vuota, la parte indicata del documento è la parte superiore del documento.
3. Se nel DOM è presente un elemento che ha un ID esattamente uguale a fragile, il primo di questi elementi in ordine di struttura è la parte indicata del documento; ferma l'algoritmo qui.
4. Se nel DOM è presente un elemento con un attributo name il cui valore è esattamente uguale a fragido, il primo di questi elementi in ordine di struttura è la parte indicata del documento; ferma l'algoritmo qui.
5. Altrimenti, non esiste una parte indicata del documento.

Quindi, cercherà id="foo"e quindi seguiràname="foo"

Modifica: come sottolineato da @hsivonen, in HTML5 l' aelemento non ha alcun attributo name. Tuttavia, le regole precedenti si applicano ancora ad altri elementi denominati.

Non dovresti usarlo <h1><a name="foo"/>Foo Title</h1>in nessun tipo di HTML servito come text/html, perché la sintassi dell'elemento vuoto XML non è supportata in text/html. Tuttavia, <h1><a name="foo">Foo Title</a></h1>va bene in HTML4. Non è valido in HTML5 come attualmente redatto.

<h1 id="foo">Foo Title</h1>è OK in HTML4 e HTML5. Questo non funzionerà in Netscape 4, ma probabilmente utilizzerai una dozzina di altre funzionalità che non funzionano in Netscape 4.

Devo dire se stai per collegarti a quell'area nella pagina ... come page.html # foo e Foo Title non è un link che dovresti usare:

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

Se invece metti un <a>riferimento attorno ad esso, il titolo sarà influenzato da un <a>CSS specifico all'interno del tuo sito. È solo un markup extra e non dovresti averne bisogno. Consiglio vivamente di inserire un ID nel titolo, non solo è meglio formato, ma ti permetterà di indirizzare quell'oggetto in Javascript o CSS.

Wikipedia fa un uso intenso di questa funzione in questo modo:

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

E Wikipedia funziona per tutti, quindi mi sentirei al sicuro con questo modulo.

Inoltre, non dimenticare che puoi usarlo non solo con span ma con div o persino celle di tabella e quindi hai accesso alla pseudo-classe: target sull'elemento. Fai solo attenzione a non modificare la larghezza, come nel caso del testo in grassetto, perché ciò sposta i contenuti, il che è inquietante.

Ancoraggi nominati - il mio voto è di evitare:

• "Nomi e ID sono nello stesso spazio dei nomi ..." - Due attributi con lo stesso spazio dei nomi sono semplicemente pazzi. Diciamo solo deprecato già.
• "Ancora elementi senza href atribute" - Ancora una volta, la natura di un elemento (collegamento ipertestuale o no) è definita dall'avere un attributo ?! Doppio pazzo. Il buon senso dice di evitarlo del tutto.
• Se hai mai disegnato un'ancora senza una pseudo-classe, lo stile si applica a ciascuno. In CSS3 puoi aggirare questo problema con i selettori di attributo (o lo stesso stile per ogni pseudoclasse), ma è comunque una soluzione alternativa. Questo di solito non si presenta perché si scelgono i colori per pseudo-classe e la sottolineatura presente di default ha senso rimuoverla, il che lo rende uguale ad altri testi. Ma hai mai deciso di rendere i tuoi collegamenti in grassetto, causerà problemi.
• Netscape 4 potrebbe non supportare la funzione ID, ma comunque un attributo sconosciuto non causerà alcun problema. Questo è ciò che ha chiamato la compatibilità per me.

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

è ciò che dovrebbe essere usato. Non utilizzare un'ancora a meno che non si desideri un collegamento.

Per gli utenti JavaScript: tutti gli ID diventano variabili globali sotto la finestra .

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

Ho appena creato il JS globale:

window.foo

Il valore di window.foosarà il HTMLElementper h1.

A meno che non sia possibile garantire la sicurezza di tutti i valori utilizzati negli idattributi, è preferibile attenersi a name:

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

Non c'è differenza semantica; la tendenza negli standard è verso l'uso idpiuttosto che name. Tuttavia, ci sono differenze che possono portare a preferire namein alcuni casi. La specifica HTML 4.01 offre i seguenti suggerimenti :

Usa idoname ? Gli autori dovrebbero considerare i seguenti problemi quando decidono se usare ido nameper un nome di ancoraggio:

• L'attributo id può fungere da più di un semplice nome di ancoraggio (ad es. Selettore di fogli di stile, identificatore di elaborazione, ecc.).
• Alcuni agenti utente meno recenti non supportano gli ancoraggi creati con l'attributo id.
• L'attributo name consente nomi di ancoraggio più ricchi (con entità).

Il metodo ID non funzionerà su browser meno recenti, il metodo del nome di ancoraggio sarà deprecato nelle versioni HTML più recenti ... Andrei con id.

Ho una pagina web composta da un numero di contenitori div impilati verticalmente, identici nel formato e diversi solo per il numero di serie. Volevo nascondere il nome anchor nella parte superiore di ogni div, quindi la soluzione più economica è stata quella di includere l'ancoraggio come ID all'interno del tag div di apertura, ovvero,

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

Il secondo esempio assegna un ID univoco all'elemento in questione. Questo elemento può quindi essere manipolato o accessibile tramite DHTML.

Il primo, d'altra parte, imposta una posizione con nome all'interno del documento, simile a un segnalibro. Attaccato a un "ancoraggio", ha perfettamente senso.

Solo un'osservazione sul markup Il modulo markup nelle versioni precedenti di HTML ha fornito un punto di ancoraggio. I moduli di markup in HTML5 che utilizzano l'attributo id, sebbene per lo più equivalenti, richiedono un elemento per l'identificazione, che quasi tutti dovrebbero contenere contenuto.

Un intervallo vuoto o div potrebbe essere utilizzato, ad esempio, ma questo utilizzo sembra e ha un odore degenerato.

Un pensiero è quello di utilizzare l'elemento wbr per questo scopo. Il wbr ha un modello di contenuto vuoto e dichiara semplicemente che è possibile un'interruzione di riga; questo è ancora un uso leggermente gratuito di un tag di markup, ma molto meno delle divisioni di documenti gratuiti o di intervalli di testo vuoti.

In HTML 5, l' id=""attributo definisce un identificatore univoco per un elemento, che è anche un'ancora per un collegamento di frammento. Nei precedenti standard html, l' name=""attributo <a>dell'elemento definisce un ancoraggio per un collegamento frammento. Raccomando qualcosa del tipo:
<a name="foo" id="foo"></a><h1>Foo Title</h1>
Perché il supporto perid="" attributo è un po 'discutibile (anche se le ultime versioni di tutti i principali browser lo supportano, le versioni che non hanno più di qualche anno [Ed è meglio non rompere qualcosa se non c'è una buona ragione per]). È compatibile e non si adatta a ciò che è nell'elemento link'd, poiché la chiusura </a> è ancora esterna all'elemento, ma è ancora valida in tutti gli standard attuali.

Assicurati che gli attributi name=""e dell'elemento siano gli stessi. id=""<a>

Che ne dici di usare l'attributo name per i vecchi browser e l'attributo id per i nuovi browser. Verranno utilizzate entrambe le opzioni e il metodo di fallback verrà implementato per impostazione predefinita !!!

L'intero concetto di "ancoraggio denominato" utilizza l'attributo name, per definizione. Dovresti limitarti a usare il nome, ma l'attributo ID potrebbe essere utile per alcune situazioni javascript.

Come nei commenti, puoi sempre utilizzare entrambi per coprire le tue scommesse.