Navigare tra i contenuti della pagina

Relazione fra anchor tag e id

creativecode avatar Giulio Tiseo

26 Giu, 2019

~4min.

In questo ultimo articolo della Guida base all’HTML vedrai come navigare rapidamente tra i contenuti della pagina attraverso gli anchor tags. # Casi di applicazione degli anchor tag Fino ad ora hai fatto uso degli anchor tags solo per spostarti da una pagina all’altra, ma come possiamo sfruttarli per puntare ad una determina sezione della stessa

Requisiti

Questo è un articolo di approfondimento sugli anchor tag. Se non sai nulla su come costruire Hyperlinks all’interno di una pagina web, non puoi trascurare l’articolo Collegare le pagine web, in cui vado a mostrarti i casi di utilizzo più classici del tag <a>.

# Casi di applicazione degli anchor tag

Fino ad ora hai fatto uso degli anchor tags solo per spostarti da una pagina all’altra, ma come possiamo sfruttarli per puntare ad una determina sezione della stessa pagina?

Ad esempio, immagina di avere un articolo particolarmente lungo e di avere bisogno di un indice ipertestuale per navigare più facilmente fra i contenuti della pagina.

Per farlo, hai bisogno di creare un nuovo tag <a> per definire il punto di partenza dell’ancora, dopodiché dovrai applicare l’attributo id all’elemento di destinazione.  Il collegamento fra le due sezioni avverrà quando andrai a specificare nell’href dell’anchor tag, l’id dell’elemento di destinazione.

Osserva qui sotto come creare questo tipo di collegamento in modo da comprendere meglio il funzionamento dei link interni e capire come navigare tra i contenuti della pagina. Procediamo per step:

# 1. Creo l’indice ipertestuale

<a href="#html">Guida Base all'HTML</a>
<a href="#css">Guida avanzata ai CSS</a>
<a href="#javascript">Guida universale al Javascript</a>

Osserva con attenzione i valori specificati per gli attributi href. Quello che dovrebbe risaltare subito ai tuoi occhi è la presenza nell’href del carattere che precede quello che sarà l’ID dell’elemento a cui punterà il link. Attraverso questo carattere comunichiamo al browser di non cercare risorse nella directory del sito, come hai visto nell’articolo precedente, ma di ricercare all’interno della pagina corrente un elemento che abbia quell’id.

Quindi, <a href="#html">Guida base all'HTML</a> non è altro che un link che cercherà all’interno della pagina web corrente un elemento che abbia specificato nell’attributo id il valore html.

# 2. Creo i contenuti con le relative destinazioni

<h1 id="html">GUIDA BASE ALL'HTML</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu felis lacus. Etiam sit amet tristique est, at accumsan tortor. Nullam eget erat laoreet, accumsan libero et, maximus turpis. Morbi non nisl id arcu pellentesque dapibus vitae id metus. Donec suscipit rutrum rhoncus. Aliquam nisi tortor, porttitor quis nisl id, vulputate varius dui.</p>
<hr />

<h1 id="css">GUIDA AVANZATA AI CSS</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu felis lacus. Etiam sit amet tristique est, at accumsan tortor. Nullam eget erat laoreet, accumsan libero et, maximus turpis. Morbi non nisl id arcu pellentesque dapibus vitae id metus. Donec suscipit rutrum rhoncus. Aliquam nisi tortor, porttitor quis nisl id, vulputate varius dui.</p>
<hr />

<h1 id="javascript">GUIDA UNIVERSALE AL JAVASCRIPT</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu felis lacus. Etiam sit amet tristique est, at accumsan tortor. Nullam eget erat laoreet, accumsan libero et, maximus turpis. Morbi non nisl id arcu pellentesque dapibus vitae id metus. Donec suscipit rutrum rhoncus. Aliquam nisi tortor, porttitor quis nisl id, vulputate varius dui.</p>
<hr />

Come puoi notare, ho applicato al titolo di ciascun paragrafo un attributo id. In questo modo ho impostato sui titoli i punti di destinazione dei relativi link presenti nell’indice. Ciò significa che al click sul link Guida base all’HTML, l’utente verrà correttamente indirizzato all’inizio del paragrafo e più precisamente in corrispondenza del titolo.

Puoi trovare un chiaro esempio di indici interattivi realizzati con questa tecnica, in alto ad ogni articolo di questa guida. Prova ad osservare come l’ho realizzato e cerca di ciascun elemento della pagina. Il codice HTML non è più così difficile, vero?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *