Ancore sono da tempo utilizzati per il collegamento a parti specifiche di pagine Web. Un ancoraggio è costituito da un collegamento ipertestuale creato da tag di ancoraggio e un elemento - intestazioni, paragrafi, immagini e div, per citare alcuni esempi - che contiene un ID. Finché un div ha un ID, è utilizzabile come un'ancora.

Ancore HTML

Un'ancora HTML utilizza le "<a>" tag di ancoraggio per collegare a qualsiasi elemento con il suo "nome" o attributo "ID". Anche se "nome" è stato utilizzato in passato, l'uso di "ID" è considerato una best practice da "nome" è ora un deprecato - attributo in HTML 4 e sopra - non aggiornate. Invece di creare un link che punta a un percorso di file, è possibile creare un link che punta a ID o il nome di qualsiasi elemento HTML.

Usi di ancore

Ancore sono in genere utilizzati nelle pagine Web che contengono grandi quantità di testo. In una pagina Web che ha molte sezioni con sottotitoli, è possibile creare un elenco di collegamenti che agiscono come una tabella di contenuti. Ogni link potrebbe puntare a un tag intestazione o div dal suo ID. Un altro uso di ancore è creare legami "salto" che portano l'utente alla parte superiore di una pagina Web lunga, che riduce la necessità di scorrimento. È anche possibile collegare ad una parte specifica di un'altra pagina.

Ancoraggio un Div

Aggiunta di un ID di un div vi permetterà di collegare ad esso utilizzando tag "<a>":

<Div id = "my_stuff">

Content...

</ Div>

L'ID è ora accessibile da tag di ancoraggio, fogli di stile e JavaScript. Se si dispone di un div che contiene già un ID, è necessario utilizzare tale ID.

Collegamento a un Div Anchor

Il metodo per la creazione di un collegamento a un elemento ancorato comporta impostando l'attributo "href" di un paio di tag "<a>" al nome ID, preceduti da un simbolo cancelletto:

<a href="#my_stuff"> Vai a My Stuff </a>
<a href="page2.html#mystuff"> Vai a My Stuff a pagina 2 </a>

Il primo collegamento invierà all'utente all'elemento con l'ID "my_stuff" finché è sulla stessa pagina che viene visualizzata nel browser. Il secondo link caricherà una pagina diversa nel browser e passare alla div "my_stuff".