Che cos'è href = “#” e perché viene utilizzato?

Su molti siti web vedo i link che hanno href="#" . Cosa significa? A cosa serve?

Informazioni sui collegamenti ipertestuali:

L'uso principale dei tag di ancoraggio - <a></a>- è come collegamenti ipertestuali . Ciò significa sostanzialmente che ti portano da qualche parte. I collegamenti ipertestuali richiedono la hrefproprietà, poiché specifica una posizione.

hash:

Un hash - #all'interno di un collegamento ipertestuale specifica un ID elemento HTML a cui deve essere fatta scorrere la finestra.

href="#some-id"scorrerebbe fino a un elemento nella pagina corrente come <div id="some-id">.

href="https://stackoverflow.com//site.com/#some-id"andrebbe su site.come scorrere fino all'id su quella pagina.

Scorri verso l'alto:

href="#"non specifica un nome ID, ma ha una posizione corrispondente: la parte superiore della pagina. Facendo clic su un'ancora con href="#"si sposta la posizione di scorrimento verso l'alto.

Guarda questa demo.

Questo è il comportamento previsto in base alla documentazione di w3.

Segnaposto hyperlink:

Un esempio in cui un segnaposto di collegamento ipertestuale ha senso è nelle anteprime dei modelli. Nelle demo a pagina singola per i modelli, ho visto spesso <a href="#">che il tag di ancoraggio è un collegamento ipertestuale, ma non va da nessuna parte. Perché non lasciare hrefvuota la proprietà? Una hrefproprietà vuota è in realtà un collegamento ipertestuale alla pagina corrente. In altre parole, causerà un aggiornamento della pagina. Come ho già detto, href="#"è anche un collegamento ipertestuale e causa lo scorrimento. Pertanto, la migliore soluzione per i segnaposto dei collegamenti ipertestuali è in realtà href="#!"L'idea qui è che si spera che non ci sia un elemento nella pagina conid="!" (chi lo fa !?) e che quindi il collegamento ipertestuale non si riferisca a nulla, quindi non accade nulla.

Informazioni sui tag di ancoraggio:

Un'altra domanda che potresti chiederti è: "Perché non lasciare la proprietà href disattivata?". Una risposta comune che ho sentito è che la hrefproprietà è obbligatoria, quindi "dovrebbe" essere presente sulle ancore. Questo è FALSO! La hrefproprietà è richiesta solo perché un'ancora sia effettivamente un collegamento ipertestuale! Leggi questo da w3. Quindi, perché non lasciarlo fuori solo per i segnaposto? I browser rendono gli stili predefiniti per gli elementi e cambieranno lo stile predefinito di un tag anchor che non ha la proprietà href. Invece, sarà considerato come un testo normale. Cambia anche il comportamento del browser rispetto all'elemento. La barra di stato (parte inferiore dello schermo) non verrà visualizzata quando si passa con il mouse su un'ancora senza la proprietà href.

Guarda questa demo che dimostra le differenze di stile e comportamento.

Mettere il simbolo "#" come href per qualcosa significa che non punta a un URL diverso, ma piuttosto a un altro ID o tag nome nella stessa pagina. Per esempio:

<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>

Tuttavia, se non esiste un ID o un nome, va "no where".

Ecco un'altra domanda simile posta HTML Anchors con 'nome' o 'id'?

È essenzialmente un collegamento che non si collega al nulla (aggiunge semplicemente "#" all'URL). È usato per una serie di ragioni diverse. Ad esempio, se stai usando una sorta di JavaScript / jQuery e non vuoi che l'HTML reale si colleghi da nessuna parte.

Viene anche utilizzato per le ancore di pagina, che viene utilizzato per reindirizzare a una parte diversa della pagina.

Sfortunatamente, l'uso più comune <a href="#">è da parte di programmatori pigri che desiderano elementi codificabili javascript non ipertestuali cliccabili che si comportano come ancore, ma non possono essere aggiunti cursor: pointer;o aggiunti :hovera una classe per i loro elementi non ipertestuali e sono inoltre troppo pigro per impostare hrefa javascript:void(0);.

Il problema è che l'uno <a href="#" onclick="some_function();">o l'altro finisce inevitabilmente con un errore javascript e un ancoraggio con un errore javascript onclick finisce sempre per seguirlo href. Normalmente questo finisce per essere un fastidioso salto all'inizio della pagina, ma nel caso dei siti che usano <base>, <a href="#">viene gestito come <a href="[base href]/#">, risultando in una navigazione inaspettata. Se vengono generati errori registrabili, non li vedrai in quest'ultimo caso a meno che non abiliti i log persistenti.

Se un elemento anchor viene usato come non anchor, dovrebbe essere hrefimpostato su javascript:void(0);per il bene di un gradevole degrado.

Ho appena perso due giorni a eseguire il debug di un reindirizzamento casuale imprevisto della pagina che avrebbe dovuto semplicemente aggiornare la pagina e infine l'ho rintracciato in una funzione che genera l'evento click di un <a href="#">. Sostituendo #con javascript:void(0);riparato.

La prima cosa che sto facendo lunedì è l'eliminazione del progetto di tutti i casi di <a href="#">.

Gli elenchi non ordinati vengono spesso creati con l'intento di usarli come menu, ma una livoce di elenco è il testo. Poiché l' lielemento dell'elenco è testo, il puntatore del mouse non sarà una freccia, ma un "cursore I". Gli utenti sono abituati a vedere un dito puntato per un puntatore del mouse quando qualcosa è cliccabile. L'uso di un tag di ancoraggio aall'interno del litag fa sì che il puntatore del mouse si trasformi in un dito puntato. Il dito puntato è molto meglio per usare l'elenco come menu.

<ul id="menu">
   <li><a href="#">Menu Item 1</a></li>
   <li><a href="#">Menu Item 2</a></li>
   <li><a href="#">Menu Item 3</a></li>
   <li><a href="#">Menu Item 4</a></li>
</ul>

Se l'elenco viene utilizzato per un menu e non richiede un collegamento, non è necessario designare un URL. Ma il problema è che se si omette l' hrefattributo, il testo nel <a>tag viene visto come testo e quindi il puntatore del mouse torna su un I-cursore. Il cursore I potrebbe far pensare all'utente che la voce di menu non sia selezionabile. Pertanto, hai ancora bisogno di un href, ma non hai bisogno di un link da nessuna parte.

Potresti usare molti divo ptag per un elenco di menu, ma il puntatore del mouse sarebbe un cursore a I anche per loro.

È possibile utilizzare molti pulsanti sovrapposti l'uno sull'altro per un elenco di menu, ma l'elenco sembra essere preferibile. Ed è probabilmente per questo href="#"che il punto non viene utilizzato nei tag anchor all'interno dei tag list.

Puoi impostare lo stile del puntatore in CSS, quindi questa è un'altra opzione. Il href="#"nulla potrebbe essere solo il modo pigro di impostare un po 'di stile.

Il problema con l'utilizzo di href = "#" per un collegamento vuoto è che ti porterà all'inizio della pagina che potrebbe non essere l'azione desiderata. Per evitarlo, utilizzare per browser meno recenti o doctype non HTML5

<a href="javascript:void(0)">Goes Nowhere</a>

Per quanto ne so, di solito è un segnaposto per i collegamenti a cui è associato JavaScript. Il punto principale del collegamento viene servito eseguendo il codice JavaScript; i browser con supporto JS quindi ignorano la destinazione del collegamento reale. Se il browser non supporta JS, il segno di hash essenzialmente trasforma il collegamento in no-op. Vedi anche JavaScript discreto .

Come hanno sottolineato alcune altre risposte, l' aelemento richiede un hrefattributo e #viene utilizzato come segnaposto, ma è anche un artefatto storico.

Dalla rete di sviluppatori Mozilla :

href

Questo era il singolo attributo richiesto per le ancore che definivano un collegamento sorgente ipertestuale, ma non è più richiesto in HTML5. L'omissione di questo attributo crea un collegamento segnaposto. L'attributo href indica la destinazione del collegamento, un URL o un frammento di URL. Un frammento di URL è un nome preceduto da un segno di hash (#), che specifica una posizione di destinazione interna (un ID) all'interno del documento corrente.

Inoltre, secondo le specifiche HTML5 :

Se l'elemento a non ha alcun attributo href, allora l'elemento rappresenta un segnaposto per il quale altrimenti sarebbe stato inserito un collegamento, se fosse stato rilevante, costituito solo dal contenuto dell'elemento.

L'attributo href definisce l'URL della risorsa di un collegamento. Se il tag anchor non ha tag href, non diventerà hyperlink. L'attributo href ha i seguenti valori:

1. Absolute path: move to another site like href="http://www.google.com"
2. Relative path: move to another page within the site like herf ="defaultpage.aspx"
3. Move to an element with a specified id within the page like href="#bottom"
4. href="javascript:void(0)", it does not move anywhere.
5. href="#" , it does not move anywhere but scroll on the top of the current page.
6. href= "" , it will load the current page but some browsers causes forbidden errors.

Note: When we do not need to specified any url inside a anchor tag then use 
<a href="javascript:void(0)">Test1</a>