Link HTML
I link navigano verso altre pagine o parti di una pagina. Impara a creare link HTML con il tag <a>: href, URL assoluti e relativi, e target.
I siti web contengono diversi tipi di link che portano direttamente ad altre pagine o consentono di navigare verso una parte specifica della pagina. I link in HTML sono chiamati hyperlink. Vengono definiti usando il tag <a>.
Gli hyperlink si applicano a una frase, una parola, un'immagine o qualsiasi elemento HTML.
Il colore predefinito dei link in HTML è:
- link non visitati: sottolineati e blu
- link visitati: sottolineati e viola
- link attivi: sottolineati e rossi
Questo è lo stile predefinito dei link, ma è possibile rimuovere la sottolineatura o cambiare il colore dei link usando gli stili CSS.
Sintassi
Il tag <a> viene usato in coppia: il tag di apertura <a> indica dove inizia il link e il tag di chiusura </a> indica dove finisce.
Per creare un hyperlink, è necessario usare il tag <a> e l'attributo href, il cui valore è l'URL, o la posizione, verso cui punta il link.
Link HTML
<a href="url">your text</a>.Esempio del tag HTML <a> con l'attributo href:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Link example</h2>
<a href="https://www.w3docs.com/">W3Docs.com</a>
</body>
</html>Nell'esempio sopra, abbiamo usato <h2> per definire un sottotitolo e il tag <a> per creare un link. Tra i tag <a> e </a> abbiamo il testo W3Docs.com, che il browser visualizza come un link blu sottolineato. Cliccandoci sopra, l'utente viene reindirizzato alla homepage del nostro sito.
Attributo Target
Per aprire un link in una nuova pagina, è necessario aggiungere target="_blank" al codice. L'attributo target specifica dove esattamente aprire la pagina collegata. Con target="_blank" la pagina collegata si aprirà in una nuova finestra o in una nuova scheda.
I valori più comuni per target sono:
_self— apre nella stessa scheda (questa è l'impostazione predefinita, quindi raramente viene scritto)._blank— apre in una nuova scheda o finestra.
Link HTML
<a href="https://www.w3docs.com/" target="_blank" rel="noopener noreferrer">W3Docs.com</a>Perché rel="noopener noreferrer" è importante
Si noti il rel="noopener noreferrer" nel link sopra. Quando si apre un link con target="_blank", la nuova pagina può normalmente accedere alla pagina che l'ha aperta tramite la proprietà window.opener. Una pagina dannosa potrebbe usare questo meccanismo per reindirizzare silenziosamente la scheda originale verso una pagina di phishing — un attacco chiamato reverse tabnabbing.
Aggiungere rel="noopener" interrompe questo riferimento, in modo che la nuova pagina non possa interagire con la scheda originale. noreferrer fa la stessa cosa e impedisce inoltre al browser di inviare l'intestazione Referer alla nuova pagina. Come regola generale, aggiungere sempre rel="noopener noreferrer" quando si collega a un sito esterno con target="_blank".
Attributo ID
Per navigare verso una parte specifica della pagina, si usa l'attributo id.
Ecco come procedere:
-
Usare l'attributo
idper assegnare un nome alla parte della pagina verso cui l'utente deve essere reindirizzato dopo aver cliccato sul link. Il valore dell'attributo può essere una parola o una frase che descrive quella sezione (se si usa una frase, non devono esserci spazi — usare invece i caratteri di sottolineatura).
Es.<h2 id="jump">Link example with id attribute</h2>. Abbiamo usato l'attributoiddenominato "jump". -
Creare un hyperlink usando l'
iddel target del link, preceduto da un cancelletto (#)
Es.<a href="#jump">When you click on this link, you will be redirected to the part of the page with "jump" id</a>.
Vediamo ora come apparirà nel codice HTML. Nell'esempio seguente, scorrere fino al link in fondo, cliccare sul link e si tornerà di nuovo all'inizio.
Esempio del tag HTML <a> con l'attributo id:
Esempio di link con attributo id
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2 id="jump">Link example with id attribute</h2>
<p>
Here can be any part of the page you want to the user to end up clicking on hyperlink. We use attribute id called “jump”.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum ut ipsum quis elementum. Curabitur a sem a ante pulvinar tincidunt. Nullam posuere arcu in erat laoreet, vitae efficitur ex venenatis. Quisque in fermentum nunc, vel consequat risus. Suspendisse risus purus, semper quis tempus eget, iaculis euismod velit. Quisque mi nunc, cursus et suscipit eget, gravida et nisi. Duis eros massa, eleifend eget tincidunt in, porta sit amet ante. Nunc eu feugiat quam. Morbi vel sapien ac dolor ultricies dapibus quis quis libero. Cras et auctor leo.
</p>
<p>
Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem.
</p>
<p>
Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor.
</p>
<p>
Phasellus ultrices at neque sit amet varius. Fusce molestie lacinia lorem, eu interdum urna tempor malesuada. Etiam nec ultricies nisi, ut fringilla nibh. Phasellus arcu metus, ultrices eu ipsum eu, fermentum fermentum tellus. Cras blandit massa turpis, eu condimentum purus suscipit ut. In hac habitasse platea dictumst. Sed nec magna sit amet mi congue aliquam. Integer tempor lobortis eros, ut finibus tortor fringilla id. Mauris mollis sollicitudin justo, et condimentum lacus. Nam tellus velit, efficitur nec efficitur eu, pharetra ac tortor. Mauris vitae sagittis purus.
</p>
<p>
Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem.
</p>
<p>
Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor.
</p>
<p>
Fusce ultricies ex eros, et maximus est feugiat vel. Ut non nunc turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi viverra eu dui congue pulvinar. Donec tincidunt, nulla sed sodales iaculis, felis sem dapibus sem, et viverra justo massa sed magna. Vestibulum eleifend ex vitae mattis iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<a href="#jump">When we click on this link, we will be redirected to the part of the page with “jump” id</a>
</body>
</html>È anche possibile saltare a un id su una pagina diversa aggiungendo il frammento alla fine dell'URL di quella pagina. Ad esempio, se la pagina about ha un elemento con id="contact", questo link apre quella pagina e scorre direttamente fino a esso:
<a href="/about#contact">Contact us</a>Come applicare un hyperlink a un'immagine
Per applicare un hyperlink a un'immagine, è sufficiente inserire l'immagine nel tag <a>. Questo si fa con il tag <img>, che deve avere alcuni attributi obbligatori:
- src - la sorgente dell'immagine
- alt - testo alternativo per l'immagine
- width - larghezza dell'immagine
- height - altezza dell'immagine
Esempio dei tag <a> e <img> per applicare un hyperlink a un'immagine:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/">
<img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo" />
</a>
</body>
</html>Le immagini HTML verranno trattate in dettaglio nel capitolo successivo.
Titoli dei link
L'attributo title viene utilizzato per specificare informazioni aggiuntive su un elemento. Queste informazioni vengono spesso visualizzate come testo tooltip quando si sposta il mouse sopra l'elemento.
Esempio di titoli dei link:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Link Title Example</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>The <span class="attribute">title</span> attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.</p>
<a href="https://www.w3docs.com/learn-html.html" title="Learn HTML">Learn more about HTML</a>
</body>
</html>URL Assoluti vs. Relativi
Il valore inserito in href può essere uno di due tipi di indirizzo. Conoscere la differenza è una delle parti più importanti per creare link correttamente.
Un URL assoluto è l'indirizzo web completo, incluso il protocollo (https://) e il nome del dominio. Usarlo per collegare una pagina su un sito web diverso:
<a href="https://en.wikipedia.org/wiki/HTML">More about HTML</a>Un URL relativo punta a una pagina sullo stesso sito web, descritta rispetto alla posizione della pagina corrente. Il browser aggiunge automaticamente il protocollo e il dominio. Gli URL relativi esistono in diverse varianti:
<!-- Same folder as the current page -->
<a href="./contact.html">Contact</a>
<!-- One folder up, then into another folder -->
<a href="../images/logo.png">Logo</a>
<!-- Root-relative: starts at the site root, no matter where the current page is -->
<a href="/about">About us</a>Come scegliere:
- Un
/iniziale (un percorso root-relativo come/about) parte sempre dalla radice del sito, quindi lo stesso link funziona su ogni pagina. Di solito è la scelta più sicura per la navigazione a livello di sito. ./significa "questa cartella" e../significa "sali di una cartella". Questi percorsi relativi al documento si rompono se in seguito si sposta la pagina in una cartella diversa, quindi usarli con cautela.- Usare un URL assoluto completo solo quando il target si trova su un altro dominio.
Vedere HTML URL per un'analisi più approfondita su come vengono costruiti gli URL.
Esempio di link assoluti e relativi:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>External and internal paths</h1>
<p><a href="https://en.wikipedia.org/wiki/HTML">More about HTML (absolute)</a></p>
<p><a href="/about">About us (root-relative)</a></p>
</body>
</html>Link Email e Telefono
Il valore di href non è limitato alle pagine web. Con schemi URL speciali è possibile aprire il client di posta dell'utente o, su un telefono, avviare una chiamata.
Un link mailto: apre una nuova email indirizzata all'indirizzo specificato:
<a href="mailto:[email protected]">Email us</a>Un link tel: consente agli utenti mobile di toccare per comporre un numero di telefono:
<a href="tel:+15551234567">Call us</a>Gli attributi rel, download e hreflang
Oltre a href, target e title, il tag <a> accetta diversi altri attributi utili.
L'attributo rel descrive la relazione tra la pagina corrente e la pagina collegata. Abbiamo già visto rel="noopener noreferrer" per la sicurezza. Un altro valore comune è rel="nofollow", che indica ai motori di ricerca di non trasferire credito di ranking al link:
<a href="https://example.com" rel="nofollow">Sponsored link</a>L'attributo download indica al browser di scaricare il target invece di navigarci. È possibile assegnargli un valore per suggerire un nome di file:
<a href="/files/report.pdf" download="annual-report.pdf">Download the report</a>L'attributo hreflang indica la lingua del documento collegato. Non modifica il comportamento per gli utenti, ma aiuta browser e motori di ricerca a comprendere il target:
<a href="https://example.fr/" hreflang="fr">French version</a>Per l'elenco completo degli attributi supportati dal tag <a>, vedere il riferimento al tag HTML <a>.
Accessibilità: scrivere testo del link descrittivo
Gli utenti che utilizzano screen reader spesso passano da un link all'altro, ascoltando solo il testo del link fuori contesto. Etichette vaghe come "clicca qui" o "leggi di più" non indicano nulla sulla destinazione del link. Scrivere un testo del link che descriva la destinazione in modo autonomo:
<!-- Avoid: meaningless out of context -->
<p>To learn about our pricing, <a href="/pricing">click here</a>.</p>
<!-- Better: the link text describes the target -->
<p>See our <a href="/pricing">pricing plans</a>.</p>Mantenere le parole significative all'interno dei tag <a>, assicurarsi che i link abbiano un aspetto diverso dal testo circostante ed evitare di usare l'URL nudo come testo del link per i link importanti.