Come Collegare una Pagina Web: Metodi HTML, CSS e JavaScript

Il collegamento è la primitiva fondamentale del web. Ecco i tre livelli di implementazione.

1. HTML: Il fondamento semantico (inizia sempre qui)

<a href="https://example.com">Testo del link</a>

Attributi essenziali:

• href: Destinazione (URL assoluto, percorso relativo, mailto:, tel:, #anchor)
• target="_blank": Nuova scheda — aggiungi sempre rel="noopener noreferrer"
• rel: nofollow, sponsored, ugc (segnali SEO)
• title: Tooltip (supplementare, non sostituto di testo chiaro)
• download: Forza il download del file

Accessibilità: Il testo del link deve descrivere la destinazione ("Leggi prezzi" non "Clicca qui").

2. CSS: Styling visivo e di interazione

a { color: #0066cc; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s, color 0.2s; }
a:hover, a:focus { color: #004499; border-bottom-color: currentColor; text-decoration: none; }
a:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; border-radius: 2px; }
/* Indicatore link esterno */
a[href^="http"]:not([href*="tuodominio.com"])::after { content: " ↗"; font-size: 0.8em; opacity: 0.7; }

3. JavaScript: Comportamento avanzato

// Progressive enhancement: intercetta per SPA, analisi, conferma
document.querySelectorAll('a[data-confirm]').forEach(link => {
  link.addEventListener('click', e => {
    if (!confirm(link.dataset.confirm)) e.preventDefault();
  });
});
// Router link SPA (nessuna ricarica completa)
function navigate(href) {
  history.pushState(null, '', href);
  renderApp(); // la tua funzione di render
}
document.querySelectorAll('a[href^="/"]').forEach(link => {
  link.addEventListener('click', e => {
    if (e.metaKey || e.ctrlKey || e.shiftKey) return; // nuova scheda
    e.preventDefault();
    navigate(link.getAttribute('href'));
  });
});

Tipi speciali di link

Sicurezza

• Non inserire mai segreti negli URL (log, referrer, cronologia)
• Valida/sanifica i link generati dagli utenti
• CSP: direttive connect-src, navigate-to

HTML fa il lavoro. CSS lo rende chiaro. JS aggiunge comportamento. In quest'ordine.