Guida HTML interattiva: Link (a href)

Q: Come si crea un link in HTML?

Usa l'elemento ancora: Example . href è la destinazione e il testo tra i tag è ciò che il lettore clicca.

Q: Come faccio un link a un punto preciso di una pagina?

Dai un id all'elemento di destinazione, poi collegalo con un cancelletto: FAQ e FAQ . Da un'altra pagina, aggiungi il cancelletto all'URL: .

Q: Perché il mio link va alla pagina sbagliata quando scrivo www?

Senza https:// il browser tratta www.example.com come un percorso relativo del tuo sito, quindi il link porta a qualcosa come yoursite.com/www.example.com. Scrivi sempre lo schema nei link esterni: href="https://www.example.com".

Q: Un tag a può contenere un div?

Sì. In HTML5 un può racchiudere contenuto a blocchi come un , un titolo e un paragrafo, ed è così che si costruiscono le schede interamente cliccabili. Non può contenere un altro link, un pulsante o qualsiasi altro elemento interattivo.

Come creare un link in HTML

Un link è un elemento ancora, <a>, con un attributo href. href indica dove porta il link; il contenuto tra i tag è ciò che il lettore clicca.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Links</title>
</head>
<body>
  <p>
    Read the <a href="https://developer.mozilla.org/">MDN web docs</a>
    or go back to the <a href="/">home page</a>.
  </p>
  <p>This is <a>an anchor with no href</a>: it is not a link.</p>
</body>
</html>

I browser mostrano i link in blu e sottolineati e trasformano il cursore in una mano. L'ultima riga mostra perché href conta: senza, <a> è testo semplice. Non riceve il focus, non è cliccabile e non ha lo stile di un link.

URL assoluti e relativi

Il valore di href decide dove va il link. Le forme principali:

`href`	Porta a
`https://example.com/page`	Un URL assoluto: esattamente quell'indirizzo
`/about`	`about` nella radice del sito corrente
`about.html`	`about.html` nella stessa cartella della pagina corrente
`../index.html`	`index.html` una cartella più su
`#pricing`	L'elemento con `id="pricing"` in questa pagina
`/help#faq`	La sezione `faq` di un'altra pagina di questo sito
`mailto:hi@example.com`	Una nuova email nell'app di posta del lettore
`tel:+15551234567`	Una telefonata, sui dispositivi che possono farla

Usa URL assoluti per gli altri siti e percorsi relativi alla radice (/about) dentro il tuo: continuano a funzionare quando la pagina che li contiene viene spostata in un'altra cartella.

<a href="https://www.wikipedia.org/">Wikipedia</a>  <!-- another site -->
<a href="/pricing">Pricing</a>                     <!-- same site, from the root -->
<a href="www.wikipedia.org">Broken</a>              <!-- relative path, not a site! -->

L'ultima riga è il bug più comune nei link. Senza https://, il browser legge www.wikipedia.org come il nome di un file nella cartella corrente.

I link email e telefono hanno una pagina tutta loro: link email in HTML.

Link a una sezione della pagina

Qualsiasi elemento con un id è una destinazione. Collegalo con # seguito dall'id, e il browser scorre fino a lì. Clicca i link nell'anteprima:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Anchor links</title>
  <style>
    section { min-height: 220px; padding: 8px; border-top: 2px solid #e5e7eb; }
    :target { background: #fef3c7; }
  </style>
</head>
<body>
  <nav>
    <a href="#install">Install</a> |
    <a href="#usage">Usage</a> |
    <a href="#faq">FAQ</a>
  </nav>

  <section id="install"><h2>Install</h2></section>
  <section id="usage"><h2>Usage</h2></section>
  <section id="faq">
    <h2>FAQ</h2>
    <a href="#top">Back to top</a>
  </section>
</body>
</html>

Alcuni dettagli:

L'id deve corrispondere esattamente, maiuscole comprese. href="#FAQ" non trova id="faq".
href="#top" e href="#" scorrono all'inizio della pagina anche se nessun elemento ha l'id top.
Il selettore :target dà uno stile alla sezione a cui punta l'URL in quel momento. Su una pagina vera la evidenzia; l'anteprima scorre senza cambiare indirizzo, quindi lì l'evidenziazione non si vede.
Per collegare una sezione di un'altra pagina, aggiungi il cancelletto all'URL di quella pagina: <a href="/docs/html/table#caption">.

Link interni sotto un header fisso

Un header sticky o fisso copre la parte alta della sezione a cui salti. scroll-margin-top sulle destinazioni gli lascia spazio, e scroll-behavior: smooth anima il salto:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    html { scroll-behavior: smooth; }
    body { margin: 0; font-family: system-ui, sans-serif; }
    header {
      position: sticky;
      top: 0;
      padding: 12px 16px;
      background: #111827;
    }
    header a { color: #fff; margin-inline-end: 12px; }
    h2 { scroll-margin-top: 60px; margin: 0; padding: 8px 16px; background: #e5e7eb; }
    p { height: 320px; margin: 0; padding: 16px; }
  </style>
</head>
<body>
  <header>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
  </header>
  <h2 id="one">Section one</h2>
  <p>Content</p>
  <h2 id="two">Section two</h2>
  <p>Content</p>
  <h2 id="three">Section three</h2>
  <p>Content</p>
</body>
</html>

Cancella la riga scroll-margin-top e clicca di nuovo Two: il titolo finisce nascosto dietro l'header scuro.

Link di download

L'attributo download chiede al browser di salvare il file invece di aprirlo. Il suo valore, se lo indichi, è il nome di file suggerito:

<a href="/files/report-2026.pdf" download>Download the report</a>
<a href="/files/r-8f2a.pdf" download="report.pdf">Download (saved as report.pdf)</a>

download funziona solo per i file sulla stessa origine della pagina (stesso schema, host e porta) e per gli URL data: e blob:. Per un file su un'altra origine, anche un sottodominio, i browser lo ignorano e aprono il file come un normale link. Il server può forzare il download di qualsiasi file con l'header Content-Disposition: attachment.

Testo dei link che abbia senso

Chi usa uno screen reader spesso si muove nella pagina di link in link, sentendo solo il testo del link. "Clicca qui" e "Leggi di più" non dicono niente.

<!-- Vague: -->
To see our prices, <a href="/pricing">click here</a>.

<!-- Clear: -->
See the <a href="/pricing">pricing plans</a>.

L'attributo title mostra un tooltip al passaggio del mouse ma non compare sugli schermi touch né per la maggior parte di chi usa la tastiera, quindi non metterci niente di importante.

Rendere cliccabile un'intera scheda

Un <a> può racchiudere contenuto a blocchi: un titolo, un'immagine e un paragrafo possono formare un unico link. È così che si costruiscono le schede cliccabili.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .card {
      display: block;
      max-width: 280px;
      padding: 16px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      color: #111827;
      text-decoration: none;
    }
    .card:hover { border-color: #2563eb; }
    .card h3 { margin: 0 0 6px; color: #2563eb; }
    .card p { margin: 0; }
  </style>
</head>
<body>
  <a class="card" href="https://developer.mozilla.org/">
    <h3>MDN web docs</h3>
    <p>Reference pages for HTML, CSS and JavaScript.</p>
  </a>
</body>
</html>

display: block rende cliccabile l'intero riquadro, non solo il testo. Tieni breve il contenuto della scheda, perché uno screen reader lo legge tutto come nome del link. E non metterci mai dentro un altro link o un pulsante: gli elementi interattivi non si possono annidare in <a>.

Altri attributi del tag a

Attributo	Cosa fa
`href`	La destinazione. Senza, `<a>` non è un link
`target`	Dove aprirlo; `target="_blank"` apre una nuova scheda, vedi aprire un link in una nuova scheda
`rel`	La relazione con la destinazione: `noopener`, `nofollow`, `sponsored`, `ugc`
`download`	Salva il file invece di aprirlo
`hreflang`	La lingua della pagina collegata, come suggerimento
`referrerpolicy`	Quanta parte dell'URL corrente inviare come referrer

Errori comuni

Nessuno schema in un URL esterno. href="www.site.com" è un percorso relativo. Scrivi https://.
<a href="#"> per un'azione JavaScript. Scorre all'inizio e aggiunge # all'URL. Se il clic non porta da nessuna parte, usa un <button>.
Un link dentro un link, o un pulsante dentro un link. Sono entrambi HTML non valido: un secondo <a> fa chiudere in anticipo il primo al parser, e un clic su un pulsante dentro un link non ha una destinazione chiara.
Spazi nei nomi dei file. href="my file.html" di solito funziona perché il browser codifica lo spazio, ma my-file.html evita del tutto il problema.
"Clicca qui" come testo del link. Descrivi invece la destinazione.
Maiuscole diverse nell'id. #Pricing e id="pricing" sono diversi.

Domande frequenti

Come si crea un link in HTML?

Usa l'elemento ancora: <a href="https://example.com">Example</a>. href è la destinazione e il testo tra i tag è ciò che il lettore clicca.

Cosa significa href?

Hypertext reference, riferimento ipertestuale. Contiene l'URL a cui punta il link: un indirizzo completo, un percorso nello stesso sito come /about, una sezione della pagina come #pricing o uno schema come mailto:.

Come faccio un link a un punto preciso di una pagina?

Dai un id all'elemento di destinazione, poi collegalo con un cancelletto: <h2 id="faq">FAQ</h2> e <a href="#faq">FAQ</a>. Da un'altra pagina, aggiungi il cancelletto all'URL: <a href="/help#faq">.

Perché il mio link va alla pagina sbagliata quando scrivo www?

Senza https:// il browser tratta www.example.com come un percorso relativo del tuo sito, quindi il link porta a qualcosa come yoursite.com/www.example.com. Scrivi sempre lo schema nei link esterni: href="https://www.example.com".

Un tag a può contenere un div?

Sì. In HTML5 un <a> può racchiudere contenuto a blocchi come un <div>, un titolo e un paragrafo, ed è così che si costruiscono le schede interamente cliccabili. Non può contenere un altro link, un pulsante o qualsiasi altro elemento interattivo.

Concetti correlati