L’elemento anchor e l’attributo href
Creare link con il tag anchor e l’attributo href
L’elemento anchor e l’attributo href è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Che cos'è un link?
L'elemento <a> (anchor) crea un collegamento ipertestuale, il componente fondamentale del web.
- Gli utenti fanno clic sui link per spostarsi tra le pagine
- I link collegano documenti, risorse e posizioni
- Senza link, il web sarebbe una raccolta di pagine isolate
L'attributo href
L'attributo href (riferimento ipertestuale) specifica la destinazione del link:
<a href="https://example.com">Visit Example</a>
<a href="/about">About Us</a>
<a href="../contact.html">Contact</a>
<!-- href = destination URL or path
Content between tags = clickable text -->
<!-- Without href, a is still valid but not a hyperlink -->L'importanza del testo del link
Il testo tra i tag <a> (il testo del link) dovrebbe descrivere la destinazione:
<!-- Bad: uninformative -->
<a href="/docs/guide">Click here</a>
<a href="/docs/guide">Read more</a>
<!-- Good: descriptive -->
<a href="/docs/guide">Read the Getting Started Guide</a>
<!-- Screen readers list all links — "click here" is meaningless out of context -->Tipi di valori href
href può contenere diversi tipi di valori:
<a href="https://example.com">External URL</a>
<a href="/page">Root-relative path</a>
<a href="page.html">Relative path</a>
<a href="#section">Fragment (same page)</a>
<a href="mailto:hi@example.com">Email link</a>
<a href="tel:+1234567890">Phone link</a>
<a href="javascript:void(0)">JS (avoid this)</a>Collegamenti a email e telefono
Gli schemi URI speciali creano link per email e telefono:
<a href="mailto:support@example.com">Email Support</a>
<a href="mailto:support@example.com?subject=Hello&body=Hi%20there">
Email with Subject
</a>
<a href="tel:+15555551234">Call Us: (555) 555-1234</a>
<!-- Tapping tel: links on mobile opens the phone dialer -->L'attributo title sui link
Aggiunga un tooltip con l'attributo title:
<a href="/glossary" title="View the full HTML glossary">Glossary</a>
<!-- title appears as a tooltip on hover
But: not accessible via keyboard or touch — never rely on title alone for critical info -->Applicare stili ai link
I browser applicano stili predefiniti ai link, che dovrebbe mantenere per garantire l'accessibilità:
/* Default link states */
a:link { color: blue; text-decoration: underline; }
a:visited { color: purple; }
a:hover { color: red; }
a:focus { outline: 2px solid blue; } /* keyboard focus */
a:active { color: red; }
/* Never remove :focus outline — keyboard users need it */Link attivi e link correnti
Utilizzi aria-current per il link di navigazione corrente:
<nav>
<a href="/">Home</a>
<a href="/about" aria-current="page">About</a>
<a href="/contact">Contact</a>
</nav>
<!-- aria-current="page" tells screen readers this link is the current page -->
<!-- CSS: [aria-current="page"] { font-weight: bold; } -->Anchor senza href
Un <a> senza href è un link segnaposto, non interattivo:
<a>Not a link yet</a>
<!-- No href = no hyperlink, no default pointer cursor, not keyboard-focusable -->
<!-- If you need a clickable element without navigation, use button:
<button onclick="doSomething()">Click Me</button> -->Racchiudere elementi block
In HTML5, <a> può racchiudere elementi block, rendendo cliccabili intere sezioni:
<a href="/products/widget">
<div class="card">
<h2>Widget Pro</h2>
<p>The best widget available.</p>
<img src="widget.jpg" alt="Widget Pro product image">
</div>
</a>
<!-- Valid in HTML5 (not in HTML4) -->
<!-- Ensure the link text is still descriptive for screen readers -->Focus dei link e accesso da tastiera
I link devono essere accessibili da tastiera:
- Gli utenti passano da un link all'altro con il tasto Tab
- Attivano i link con Enter
- Non rimuova mai il contorno del focus dai link
- L'ordine di tabulazione dovrebbe seguire l'ordine di lettura
Verifica rapida
Che cosa rende accessibile il testo di un link per gli utenti di screen reader?
Riepilogo: elemento anchor
Concetti fondamentali sui link:
<a href="url">crea un collegamento ipertestuale- Il testo del link deve descrivere la destinazione
- Supporta URL esterni, percorsi relativi, frammenti, mailto:, tel:
- HTML5 consente di racchiudere elementi block in
<a> - Non rimuova mai il contorno
:focus - Utilizzi
aria-current="page"per gli elementi di navigazione correnti
Domande Frequenti
La lezione «L’elemento anchor e l’attributo href» è gratuita?
Sì — il testo completo di «L’elemento anchor e l’attributo href» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «L’elemento anchor e l’attributo href»?
Creare link con il tag anchor e l’attributo href Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «L’elemento anchor e l’attributo href»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- L’elemento anchor e l’attributo href
- URL assoluti e relativi
- Aprire i link in nuove schede e attributo download
- Collegare sezioni e identificatori fragment