HTML
Ancore e collegamenti ipertestuali

introduzione

Sintassi

• <a href="URL or anchor">Link Text</a>

Parametri

Link a un altro sito

Questo è l'uso di base dell'elemento <a> ( un elemento ncur) :

<a href="http://example.com/">Link to example.com</a>

Crea un collegamento ipertestuale, all'URL http://example.com/ come specificato dall'attributo href (riferimento ipertestuale), con il testo di ancoraggio "Link a example.com". Sarebbe simile al seguente:

Link a example.com

Per indicare che questo collegamento porta a un sito Web esterno, è possibile utilizzare il tipo di collegamento external :

<a href="http://example.com/" rel="external">example site</a>

È possibile collegare a un sito che utilizza un protocollo diverso da HTTP. Ad esempio, per collegare a un sito FTP, puoi farlo,

<a href="ftp://example.com/">This could be a link to a FTP site</a>

In questo caso, la differenza è che questo tag di ancoraggio richiede che il browser dell'utente si colleghi a example.com utilizzando il protocollo FTP (File Transfer Protocol) anziché HTTP (Hypertext Transfer Protocol).

Questo potrebbe essere un collegamento a un sito FTP

Apri il link in una nuova scheda / finestra

<a href="example.com" target="_blank">Text Here</a>

L'attributo target specifica dove aprire il link. Impostandolo su _blank , dici al browser di aprirlo in una nuova scheda o finestra (per preferenza dell'utente).

VULNERABILITÀ DI SICUREZZA ATTENZIONE!

L'utilizzo di target="_blank" fornisce al sito di apertura l'accesso parziale all'oggetto window.opener tramite JavaScript, che consente a tale pagina di accedere e modificare la proprietà window.opener.location della propria pagina e potenzialmente di reindirizzare gli utenti a malware o siti di phishing.

Ogni volta che usi questo per pagine che non controlli, aggiungi rel="noopener" al tuo link per impedire che l'oggetto window.opener venga inviato con la richiesta.

Attualmente, Firefox non supporta il noopener , quindi è necessario utilizzare rel="noopener noreferrer" per ottenere il massimo effetto.

Collegamento a un'ancora

Le ancore possono essere utilizzate per passare a tag specifici su una pagina HTML. Il tag <a> può puntare a qualsiasi elemento che abbia un attributo id . Per ulteriori informazioni sugli ID, consulta la documentazione su Classi e ID . Le ancore sono principalmente utilizzate per passare a una sottosezione di una pagina e vengono utilizzate insieme ai tag di intestazione.

Supponi di aver creato una pagina ( page1.html ) su molti argomenti:

<h2>First topic</h2>
<p>Content about the first topic</p>
<h2>Second topic</h2>
<p>Content about the second topic</p>

Una volta che hai diverse sezioni, potresti voler creare un sommario nella parte superiore della pagina con collegamenti rapidi (o segnalibri) a sezioni specifiche.

Se hai dato un attributo id ai tuoi argomenti, potresti quindi collegarti a loro

<h2 id="Topic1">First topic</h2>
<p>Content about the first topic</p>
<h2 id="Topic2">Second topic</h2>
<p>Content about the second topic</p>

Ora puoi usare l'ancora nel tuo sommario:

<h1>Table of Contents</h1>
    <a href='#Topic1'>Click to jump to the First Topic</a>
    <a href='#Topic2'>Click to jump to the Second Topic</a>

Questi ancoraggi sono anche collegati alla pagina Web in cui si trovano ( page1.html ). Quindi puoi collegare il sito da una pagina all'altra facendo riferimento alla pagina e al nome dell'ancora.

 Remember, you can always <a href="page1.html#Topic1">look back in the First Topic</a> for supporting information.

Link che esegue JavaScript

Basta usare il javascript: protocollo per eseguire il testo come JavaScript invece di aprirlo come un normale link:

<a href="javascript:myFunction();">Run Code</a>

Puoi anche ottenere la stessa cosa usando l'attributo onclick :

<a href="#" onclick="myFunction(); return false;">Run Code</a>

Il return false; è necessario per impedire alla pagina di scorrere verso l'alto quando si fa clic sul collegamento a # . Assicurati di includere tutto il codice che desideri eseguire prima di esso, poiché il ritorno interromperà l'esecuzione di ulteriori codici.

Inoltre, è possibile includere un punto esclamativo ! dopo l'hashtag per impedire alla pagina di scorrere verso l'alto. Funziona perché qualsiasi slug non valido farà sì che il link non scorra in alcun punto della pagina, perché non è in grado di individuare l'elemento a cui fa riferimento (un elemento con id="!" ). Puoi anche utilizzare qualsiasi slug non valido (come #scrollsNowhere ) per ottenere lo stesso effetto. In questo caso, return false; non è richiesto:

<a href="#!" onclick="myFunction();">Run Code</a>

Dovresti usare qualcosa di questo?

La risposta è quasi certamente no . L'esecuzione di JavaScript in linea con l'elemento come questo è una pratica abbastanza negativa. Prendi in considerazione l'utilizzo di soluzioni JavaScript pure che cercano l'elemento nella pagina e associano invece una funzione ad esso. Ascoltando un evento

Considera anche se questo elemento è in realtà un pulsante anziché un link . Se è così, dovresti usare <button> .

Link a una pagina sullo stesso sito

È possibile utilizzare un percorso relativo per collegarsi a pagine sullo stesso sito Web.

<a href="/example">Text Here</a>

L'esempio precedente passare al file example nella directory root ( / ) del server.

Se questo link era su http://example.com , i seguenti due link porterebbero l'utente nella stessa posizione

<a href="/page">Text Here</a>
<a href="http://example.com/page">Text Here</a>

Entrambi di quanto sopra sarebbe andato alla page file alla directory principale di example.com .

Link che esegue il client di posta elettronica

Utilizzo di base

Se il valore del href -attribute inizia con mailto: si tenta di aprire un client di posta elettronica al clic:

<a href="mailto:[email protected]">Send email</a>

Ciò inserirà l'indirizzo email [email protected] come destinatario per l'email appena creata.

Cc e Ccn

È inoltre possibile aggiungere indirizzi per i destinatari cc o bcc utilizzando la seguente sintassi:

<a href="mailto:[email protected][email protected]&[email protected]">Send email</a>

Oggetto e testo del corpo

Puoi popolare l'oggetto e il corpo anche per la nuova email:

<a href="mailto:[email protected]?subject=Example+subject&body=Message+text">Send email</a>

Questi valori devono essere codificati URL .

Cliccando su un link con mailto: tenterà di aprire il client email predefinito specificato dal tuo sistema operativo o ti chiederà di scegliere quale client desideri utilizzare. Non tutte le opzioni specificate dopo l'indirizzo del destinatario sono supportate in tutti i client di posta elettronica.

Link che compone un numero

Se il valore del href -attribute inizia con tel: , il dispositivo comporrà il numero, quando si fa clic su di esso. Funziona su dispositivi mobili o su computer / tablet con software in esecuzione, come Skype o FaceTime, che possono effettuare chiamate telefoniche.

<a href="tel:11234567890">Call us</a>

La maggior parte dei dispositivi e dei programmi richiederà all'utente in qualche modo di confermare il numero che stanno per comporre.