Che cos'è quando un collegamento ha un cancelletto "#"

93

Ho ispezionato alcuni siti e hanno un segno cancelletto (#) nell'URL. Che cosa fa?

 <a href="#" >Link name</a>

html

— Luca101
fonte

105

È un "frammento" o "ancora con nome". È possibile utilizzare per collegare a una parte di un documento. In genere, quando si collega a una pagina, il browser la apre nella parte superiore della pagina. Ma ti colleghi a una sezione a metà, puoi usare il frammento per collegarti a quell'intestazione (o qualsiasi altra cosa).

Se non è presente alcun <a name="whatever"/>tag nella pagina, il browser si collegherà semplicemente alla parte superiore della pagina. Se il frammento è vuoto, si collegherà anche alla parte superiore della pagina.

Per un frammento unico <a href="#">Link name</a> , allora questo è solo un link alla parte superiore della corrente pagina.

Vedi spesso quel tipo di collegamento usato in combinazione con javascript. L'HTML conforme agli standard richiede un hrefattributo, ma se prevedi di gestire la richiesta con javascript, "#" funge da ragionevole segnaposto.

— Dean Harding
fonte

1

+1 Sebbene il termine ufficiale sia un frammento di URL, non un "riferimento hash": w3.org/TR/WD-html40-970708/htmlweb.html#h-4.1.1

— Jason Hall

Sì, l'ho cambiato in "frammento" nella mia risposta, perché è quello che la maggior parte delle persone usa. Non ho mai saputo che avesse un nome "ufficiale" :)

— Dean Harding

2

Perché i browser lo considerano "vai all'inizio della pagina": tecnicamente, hai cambiato la pagina. Dopo aver fatto clic sul collegamento, noterai che # è effettivamente aggiunto all'URL nella barra degli indirizzi e se fai clic sul pulsante Indietro lo rimuoverà di nuovo. Non direi che è un collegamento a una parte di un documento, più un collegamento a un punto all'interno del documento. Altrimenti, praticamente la stessa cosa che stavo digitando ...

— animuson

Un URI che termina con # è consentito dalla sintassi generica e potrebbe essere considerato come una sorta di frammento vuoto. Nei tipi di documento MIME come testo / html o qualsiasi tipo XML, non sono consentiti identificatori vuoti che corrispondano a questo costrutto sintatticamente legale. I browser Web in genere visualizzano la parte superiore del documento per un frammento vuoto. - en.wikipedia.org/wiki/Fragment_identifier

— IcyBrk

Anche da "Se non esiste una tale rappresentazione, la semantica del frammento è considerata sconosciuta ed è effettivamente non vincolata." Da rfc3986 ( tools.ietf.org/html/rfc3986#page-24 )

— IcyBrk

23

... solo per aggiungere alcuni suggerimenti utili extra.

Puoi accedervi e modificarlo con document.location.hashin JavaScript.

Può puntare a un'ancora con nome (ad esempio <a name="top"></a>) oa un elemento con un id corrispondente (ad esempio <div id="top"></div>).

Vederne uno da solo (ad esempio <a href="#" onclick="pop()">popup</a>) generalmente significa che un collegamento viene utilizzato per eseguire esclusivamente JavaScript. Questa è una cattiva pratica.

Ogni aelemento dovrebbe avere un hrefche punta a una risorsa valida. Se uno non esiste, considera l'utilizzo di un altro elemento, come button.

— alex
fonte

1

Questo è un buon punto a riguardo non particolarmente buono ... ma solo perché non è buono non significa che non lo troverai usato in quel modo dappertutto :)

— Dean Harding

1

@alex, se è una cattiva pratica, allora dicci quale sarebbe la buona pratica da usare invece.

— Ryan Lundy

@Kyralessa Era proprio lì nel paragrafo successivo. Ad ogni modo, ho apportato una modifica quindi spero che sia più chiara.

— alex

2

@alex, presumibilmente uno dei motivi per cui le persone usano i link invece dei pulsanti è che vogliono l'aspetto dei link. Che ne dici di un collegamento a una pagina che descrive come far sembrare un pulsante un collegamento? Ad esempio , test del pulsante HTML

— Ryan Lundy

1

@alex, non più che dire che usare # su un link è una cattiva pratica. Tutto ciò che l'OP ha chiesto è cosa fa.

— Ryan Lundy

11

# indica un collegamento a un'ancora.

Pensavo di menzionare anche qualcos'altro:

Usare "#" come href per un collegamento che attiva JavaScript non è corretto perché scorre la pagina fino all'inizio, il che probabilmente non è quello che desideri. Invece, usa javascript:void(0).

— Nathan Osman
fonte

+1 per aver menzionato che facendo clic su questi collegamenti si forza lo scorrimento della pagina verso l'alto.

— Chris Calo

4

Non hai più bisogno di un'ancora. A partire da HTML5 (e forse HTML 4) qualsiasi elemento con un tag <id> può essere targetizzato da un identificatore di frammento. Consulta la documentazione HTML5: whatwg.org/specs/web-apps/current-work/multipage/…

— Basil Bourque

2

Non usare javascript:void(0)nessuno dei due - usa un buttonse non è un collegamento.

— alex

10

Il cancelletto ( #) indica di individuare un ancoraggio sulla pagina. Ad esempio, se includi questo da qualche parte nella pagina:

<a name="foo"></a>

o, più recentemente:

<div id="foo">*part of page*</div>

e quindi fai clic su un collegamento nella pagina che ha l'href #foo, navigherà all'ancora con il nome o divcon l'ID foo.

Tuttavia, se hai solo href #, porterà all'inizio della pagina.

— ElectroBit
fonte

2

Questo si collega alla pagina stessa. Viene spesso utilizzato con collegamenti che eseguono effettivamente alcuni JavaScript.