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

https://stackoverflow.com/questions/484719

20-08-2019
|

Domanda

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

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

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

Entrambi funzionano, ma sono uguali o presentano differenze semantiche?

Soluzione

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.


Analizza l'URL e lascia che fragid sia < fragment > componente dell'URL.

Se fragid è la stringa vuota, la parte indicata del documento è la parte superiore del documento.

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.

Se nel DOM è presente un elemento un con un attributo name il cui valore è esattamente uguale a fragile, il primo di questi elementi in ordine di struttura è la parte indicata del documento; ferma l'algoritmo qui.

Altrimenti, non vi è alcuna parte indicata del documento.

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

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

Altri suggerimenti

Non dovresti & # 8217; t usare <h1><a name="foo"/>Foo Title</h1> in qualsiasi stile di HTML servito come text/html, perché la sintassi dell'elemento vuoto XML non è & # 8217; t supportata in <h1><a name="foo">Foo Title</a></h1>. Tuttavia, <h1 id="foo">Foo Title</h1> è OK in HTML4. Non è valido in HTML5 come attualmente redatto.

<=> è OK sia in HTML4 che HTML5. Questo non funziona & # 8217; t funziona in Netscape 4, ma tu & # 8217; probabilmente utilizzerai una dozzina di altre funzioni che non funzionano & # 8217; t funzionano in Netscape 4.

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

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

Se invece inserisci un <a> riferimento al suo interno, il titolo sarà influenzato da un <=> 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 è quello 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 gli 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 modifichi mai 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 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.

Si rivolge agli utenti JavaScript: tutti gli ID diventano variabili globali nella finestra .

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

Ho appena creato il JS globale:

window.foo

Il valore di window.foo sarà HTMLElement per h1.

A meno che non sia possibile garantire che tutti i valori utilizzati negli id attributi siano sicuri, è preferibile attenersi a name:

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

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.

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

Usa <=> o <=>? Gli autori dovrebbero considerare i seguenti problemi quando decidono se usare <=> o <=> per 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à).

Ho una pagina web composta da un numero di contenitori div impilati verticalmente, identici nel formato e diversi solo nel numero seriale. 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">

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 normalmente contenere contenuto.

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

Un pensiero è usare 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 markup, ma molto meno delle divisioni di documenti gratuiti o di intervalli di testo vuoti.

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 denominata all'interno del documento, simile a un segnalibro. Collegato a un & Quot; anchor & Quot; ha perfettamente senso.

In HTML 5, l'attributo id="" definisce un identificatore univoco per un elemento, che è anche un'ancora per un collegamento di frammento. Nei precedenti standard html, l'attributo name="" dell'elemento <a> definisce un ancoraggio per un collegamento frammento. Raccomando qualcosa del tipo:
<a name="foo" id="foo"></a><h1>Foo Title</h1>
Poiché il supporto per l'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 ci non è un buon motivo per]). È compatibile, & Amp; non ha lo stile di ciò che è nell'elemento link'd, per la chiusura < / a > è ancora esterno all'elemento, ma è ancora valido in tutti gli standard attuali.

Assicurati che gli attributi <=> e <=> dell'elemento <=> siano gli stessi.

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 " chiamato anchor " concept 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.

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow