L’elemento di ancoraggio viene utilizzato per creare collegamenti ipertestuali tra un ancoraggio di origine e un ancoraggio di destinazione. L’origine è il testo, l’immagine o il pulsante che si collega a un’altra risorsa e la destinazione è la risorsa a cui l’ancoraggio di origine si collega.,

I collegamenti ipertestuali sono una delle tecnologie fondamentali che rendono il web l’autostrada dell’informazione e capire come utilizzare gli elementi di ancoraggio è una delle prime cose che devi padroneggiare quando impari l’HTML.

L’elemento di ancoraggio

Il tag dell’elemento di ancoraggio è la lettera “a” circondata da parentesi angolari come questa:<a>. Sono richiesti sia gli attributi di apertura che di chiusura e tutto il contenuto tra i tag costituisce l’origine di ancoraggio.,

Mentre gli esempi sopra produrranno elementi di ancoraggio, non sono di grande utilità poiché non abbiamo incluso alcuna istruzione aggiuntiva. In questo momento questi elementi di ancoraggio si collegano a nulla. Per collegare un ancoraggio di origine a un ancoraggio di destinazione, è necessario applicare alcuni attributi aggiuntivi all’elemento di ancoraggio.

In questo breve tutorial tratteremo gli attributi che puoi usare per aggiungere un ancoraggio di destinazione ai tuoi collegamenti ipertestuali, dire al browser cosa fare con il collegamento e aggiungere un significato semantico agli elementi di ancoraggio per browser e web crawler da usare.,

Gli attributi di ancoraggio più importanti

Ci sono tre attributi di ancoraggio che devi sapere per creare collegamenti ipertestuali funzionali. Questi attributi sonohref,target edownload.

Specifica una destinazione di collegamento ipertestuale: href

Il riferimento ipertestuale, ohref, attributo viene utilizzato per specificare una destinazione o una destinazione per l’elemento di ancoraggio. È più comunemente usato per definire un URL a cui l’elemento di ancoraggio dovrebbe collegarsi.,

In this example, the <a href="http://example.com">anchored text</a>links to the URL <em>www.example.com</em>.

An href può fare molto di più di un semplice collegamento a un altro sito web.

• Può essere utilizzato per collegare direttamente a qualsiasi elemento di una pagina web a cui è stato assegnato un id.
• Può essere utilizzato per collegarsi a una risorsa utilizzando un protocollo diverso da http.
• Può essere utilizzato per eseguire uno script.

Il seguente HTML include esempi di tutte e tre queste azioni:

Nella casella sottostante vedrai che HTML come viene visualizzato nel browser. Prova ogni link per vedere cosa succede.,

L’elemento hrefè abbastanza facile da usare, ma possiamo ottenere molto più chilometraggio dai nostri elementi di ancoraggio conoscendo l’attributo target.

Specifica una posizione per aprire il link: target

Guardiamo indietro al linkmailto che abbiamo creato nell’esempio precedente. Ecco di nuovo quel codice:

We'd love for you to <a href="mailto:">get in touch</a> with us!

Mentre quel collegamento è utile, il modo in cui si apre non è l’ideale., A seconda di come sono configurati il computer e il browser, è possibile che facendo clic sul link creato da quel testo reindirizzerà la finestra del browser da questo sito Web a un’applicazione di posta elettronica basata sul Web come Gmail o Yahoo! Posta. Mentre certamente vogliamo incoraggiare i nostri visitatori a contattarci, non vogliamo farlo a scapito di inviare visitatori dal nostro sito web.

La risposta a questo enigma è l’attributo target associato al valore _blank.,

We'd love for you to <a href="mailto:" target="_blank" rel="noopener">get in touch</a> with us!

Quando aggiungiamo l’attributo targete _blank al nostro link diciamo al browser dei visitatori di aprire il link in una nuova scheda o finestra del browser (vuota). Se renderizziamo quel codice nel browser, quando un visitatore fa clic sul collegamento si aprirà in una nuova scheda.

Specifica una risorsa da scaricare: download

I collegamenti vengono utilizzati anche per indicare a un browser di iniziare a scaricare un file., L’attributodownload viene utilizzato per identificare un collegamento che deve avviare un download e il valore assegnato all’attributodownload è il nome del file da scaricare.

L’attributohref entra in gioco anche quando si imposta un elemento di ancoraggio che avvia un download. Mentre l’attributodownload nomina il file, l’attributohref punta alla posizione in cui è ospitato il file.,

Ecco un esempio di come apparirebbe un elemento di ancoraggio che avvia il download:

Sehref nell’esempio sopra indicava un file reale, quando il download era completo il file scaricato sarebbe chiamato Example_File.ext dove .ext sarebbe il formato del file che è stato scaricato. Non è necessario includere l’estensione del tipo di file nel valore assegnato all’attributo download. L’estensione del file verrà identificato automaticamente quando il browser scarica il file, e automaticamente aggiunto al nome del file scaricato.,

Collegamenti interni ed esterni

Ci sono due tipi di risorse a cui possiamo collegarci usando l’elementoa: interno ed esterno. I link interni sono quelli che rimandano ad altre pagine del nostro sito web. I collegamenti esterni puntano a pagine web che non fanno parte del nostro sito web.

La creazione di collegamenti interni è importante per diversi motivi:

• I collegamenti interni vengono utilizzati per creare menu di navigazione che aiutano i visitatori del sito web a navigare nel nostro sito web.
• I collegamenti interni sono utilizzati nel testo del contenuto del sito web per aiutare i visitatori del sito web a individuare i contenuti correlati.,
• I collegamenti interni sono utilizzati anche dai web crawler dei motori di ricerca per individuare le pagine di un sito Web e per condividere l’autorità (nota anche come link juice) con le altre pagine di un sito web.

Quando scrivi link interni assicurati di non esagerare. Il succo di collegamento di una determinata pagina web è condiviso tra i link sulla pagina. Quindi più link metti su una pagina, più diluito diventa il succo passato a ciascun link. Una buona regola empirica è quella di avere non più di 100 link per pagina, anche se ci sono eccezioni nel caso di siti web estremamente grandi e complessi.,

I collegamenti esterni sono importanti anche per diversi motivi:

• I collegamenti esterni possono essere raccomandati, richiesti o semplicemente best-practice per fornire una corretta attribuzione alla fonte di un’idea o di una risorsa.
• I link esterni ci consentono di indirizzare i visitatori del sito web a contenuti utili correlati.
• Quando altri siti web pubblicano link esterni che puntano al nostro sito web, questi link noti come backlinks consentono a link juice di fluire sul nostro sito Web e migliorare la posizione del nostro sito Web nelle pagine dei risultati dei motori di ricerca (SERP).,

Durante la scrittura di link esterni cercare di evitare il collegamento a concorrenti diretti. Non si vuole aiutare il loro posizionamento SERP per i termini di ricerca che si stanno prendendo di mira per il proprio sito web. È anche una buona idea usare l’attributotarget="_blank" quando si scrivono collegamenti esterni. Aprendo collegamenti esterni in una nuova scheda si mantiene i visitatori sul tuo sito più a lungo.,

Non dire mai “Clicca qui”

Sicuramente hai visto e forse anche creato link che assomigliano a questo:

To learn more <a href="http://example.com">click here</a>!

Ci sono almeno tre buone ragioni per cui usare un testo di elemento di ancoraggio generico come “Clicca qui” è una pratica terribile.

• I visitatori del sito Web che dipendono da tecnologie assistive come gli screen reader avranno difficoltà a decifrare il significato dei link che fanno uso di testo generico di link come “Clicca qui”.,
• I visitatori del sito Web che stanno scansionando una pagina dovranno impiegare diversi secondi aggiuntivi per indagare il testo attorno al link per avere un’idea di ciò a cui si collega l’ancoraggio.
• I crawler web dei motori di ricerca associano il testo dell’elemento di ancoraggio all’URL del collegamento. Il testo dell’elemento di ancoraggio correttamente selezionato aiuta i motori di ricerca a determinare la rilevanza di una pagina Web per parole chiave specifiche. Testo generico dice motori di ricerca nulla circa la pagina web collegata.

Il testo dell’elemento di ancoraggio ideale è succinto e identifica una o più parole chiave rilevanti per la pagina web., Ecco una frase che include due esempi di testo del link correttamente selezionato:

Il primo link indica ai web crawler e ai visitatori del sito Web che il sito web ha qualcosa a che fare con le parole chiave”motori di ricerca”. Il secondo indica ai visitatori e ai motori di ricerca che la pagina trovata all’URL relativo /seo/ è relativa alle parole chiave”SEO tutorial”.

URL assoluti vs relativi

C’erano due link nel nostro ultimo esempio:e/seo/. Il primo è un esempio di URL assoluto., Gli URL assoluti sono quelli che includono una descrizione completa (assoluta) della destinazione del collegamento. Gli URL assoluti includono il protocollo (http) e il nome di dominio completo e il percorso del file necessari per raggiungere l’ancora di destinazione.

Il secondo è un esempio di URL relativo. Gli URL relativi si collegano a una pagina Web descrivendo la posizione della pagina rispetto alla posizione della pagina corrente. Quando si scrivono link interni che puntano ad altre pagine dello stesso sito web, abbiamo la possibilità di scrivere URL relativi piuttosto che URL assoluti.,

Per esempio, se siamo a questo indirizzo: e vogliamo link blu pagina del prodotto, siamo in grado di utilizzare uno dei seguenti elementi di ancoraggio:

<a href="/products/blue-product/">Go check out the blue product!</a><a href="../blue-product/">Go check out the blue product!</a>

Che la prima sintassi dice: “guarda, il più basso livello di directory di file per i file prodotti, e cercare blu prodotti all’interno di quel file”. Ciò che dice la seconda sintassi è: “cerca nella cartella principale della directoryred-product per una directory con il nome blue-product., Entrambi questi elementi di ancoraggio puntano all’URL:

Diciamo che vogliamo collegarci a About Us – una pagina che esiste come discendente diretto della home page. Ecco come potremmo farlo:

<a href="/about-us/">Learn more about us.</a>

Quella sintassi dice “torna al livello più basso dell’albero delle directory dei file e poi cerca una directory intitolata about-us”.

Come ultimo esempio, diciamo che siamo ancora una volta a questo indirizzo: , e che vogliamo collegare a una pagina di sottocategoria che esiste all’interno della categoria /red-products/.,

<a href="large.php">See all Red Products available in Large!</a>

Ciò che l’URL relativo farà è dire al browser di cercare nella cartella corrente un file chiamatolarge.phpe si risolverà a questo URL:

To summarize, when we write relative URLs we have three options:

• When we start a relative URL with “/” we tell the browser to look for the specified file or folder in the lowest level of the file directory.
• If we start a relative URL with “../” we tell the browser back up in the directory tree one level.
• If we start a relative URL with a file or folder name we tell the browser to look for the specified resources in the current file.

Why Are Relative URLs Used?

Relative URLs are very popular with web developers. It is common for websites to be developed on a staging server with a domain name that is not the same as the eventual permanent domain name. If relative URLs are used, when the site is transferred from the staging server to being live on the web all of the relative URLs will continue to work just fine. However, if absolute URLs are used the development team will have to go through the site fixing all of the URLs.

While the benefit of using relative URLs during the development of a site on a staging server not inconsiderable, it comes at a cost.

While you should know how relative URLs work, many experienced developers and SEO experts recommend sticking to absolute URLs as much as possible.

Other Useful Anchor Attributes

With just the three attributes we’ve covered so far, you can complete every hyperlinking task you will encounter on the web. However, there are additional attributes that can be used to tell a visitor’s web browser and search engines that index our website something about the meaning of the hyperlinks.

Specify the Language of the Anchor Destination: hreflang

This is optional tag can be used to tell a web browser the language of the document to which the anchor is linked. For example, if we were linking to a URL and wanted to tell the browser that the destination anchor was in Spanish we would use the appropriate language code in ISO 639-1 format as the value of the hreflang attributo.

Specificare la relazione tra origine e destinazione: rel

La relazione, orel, attributo viene utilizzato per descrivere la relazione tra l’ancora di origine e l’ancora di destinazione. Ad esempio, potremmo utilizzare il seguente codice per identificare la destinazione come una risorsa sull’autore del documento.,

This artile was written by <a href="https://plus.google.com/+AuthorName" rel="author">Great Author</a>.

Esistono diversi valori che possono essere utilizzati per descrivere la relazione tra il collegamento di origine e il collegamento di destinazione. Ecco alcuni dei più comuni:

• rel="nofollow": Usa questo attributo se stai collegando a una risorsa a cui non vuoi prestare la reputazione del tuo sito. Ad esempio, se si collega a un sito di spam come esempio di cosa non fare, si desidera utilizzare questo valore per evitare di contribuire alla visibilità sui motori di ricerca del sito.,
• rel="alternate": Se il tuo sito ha più di una versione, ad esempio una traduzione in una lingua diversa, usa questo valore per identificare la risorsa collegata come versione alternativa della pagina corrente.
• rel="bookmark": Questo valore viene utilizzato per identificare una formulazione URL permanente e può essere utilizzata per il bookmarking.
• rel="help": Identifica una risorsa collegata come file di aiuto per la pagina corrente con questo valore.
• rel="license": Utilizzare questo attributo quando si collega a una licenza di copyright riconosciuta.,
• rel="next": Se il documento corrente esiste in una serie di documenti, utilizzare questo valore quando si collega al documento successivo della serie.
• rel="prev": Se il documento corrente esiste in una serie di documenti, utilizzare questo valore quando si collega al documento precedente della serie.
• rel="noreferrer": Se si desidera collegarsi a un sito web esterno ma evitare di far sapere al sito web di destinazione chi è il referrer, utilizzare questo valore.,

Specificare il tipo di supporto Internet: type

L’attributotype è un attributo opzionale che può essere utilizzato per identificare il tipo di supporto Internet, o il tipo MIME, del documento di destinazione. Ad esempio, se si collega a un sito Web reso in HTML, è possibile aggiungere l’attributo type="text/html" per dire al browser di un visitatore che il collegamento punta a un documento HTML.,

In questo momento questo attributo non fa molto di nulla, ma il pensiero è che in futuro le informazioni contenute in questo attributo potrebbero essere utilizzate per comunicare in qualche modo a un visitatore del sito Web il tipo di contenuto a cui stanno per essere collegati prima di fare clic sul link.

Il valore type deve essere un tipo di supporto IANA valido. Alcuni dei valori più comunemente usati sono: text/html, text/css, application/javascripte multipart/form-data.,

Una rete di collegamenti

Il World Wide Web è meglio descritto come una massiccia libreria di documenti con collegamento ipertestuale in cui gli elementi di ancoraggio vengono utilizzati per creare ponti tra documenti correlati. In questa definizione, gli elementi di ancoraggio occupano il loro giusto posto come la colla che lega il web insieme e i ponti che consentono agli utenti Web di spostarsi da un documento a un documento correlato.

Un modo comune per i collegamenti da utilizzare è quello di costruire un menu di navigazione che delinea la struttura logica e gerarchica di un sito web., Se vuoi imparare come creare menu di navigazione efficaci leggi il nostro tutorial su questo argomento.

Jon è uno scrittore freelance, appassionato di viaggi, marito e padre. Scrive di tecnologie web come WordPress, HTML e CSS.