Collegamenti ipertestuali in HTML

Questo è il post #22 di 31 nella serie “HTML 101 - Le basi

L’elemento anchor, rappresentato dal tag a, viene utilizzato per trasformare del contenuto in un collegamento ipertestuale.

Il tag a supporta l’uso dell’attributo href il quale viene usato per definire l’ URL a cui navigare quando il link viene selezionato.

<a href="https://www.programmando.net">programmando.net Web Site</a>

Il contenuto all’interno dell’elemento a, “programmando.net Web Site” in questo caso, sarà visualizzato e quando il contenuto viene cliccato, il browser renderizzerà l’ URL specificata all’interno dell’attributo href. Normalmente i browser renderizzano il contenuto all’interno del tag a come testo sottolineato.

L’attributo href può anche contenere un link a un elemento specifico all’interno della stessa pagina e questo prende il nome di collegamento ipertestuale interno.

La prima parte dell’ URL che specifichiamo all’interno dell’attributo href è il protocollo (per esempio http è il più usato) ma possiamo avere altri tipi di risorse che possiamo linkare:

  • http: protocollo legato a una risorsa Web
  • ftp: protocollo di trasferimento di files
  • mailto: protocollo utilizzato per inviare emails
  • tel: protocollo utilizzato per effettuare una chiamata telefonica (particolarmente utile su apparecchi mobile)
  • file: utilizzato per aprire un file sul file system

Un altro attributo importante è target e viene utilizzato per specificare dove la risorsa linkata deve essere renderizzata dal browser. Ci sono diversi valori per questo attributo ma quelli più comunemente utilizzati sono _self (che quello di default se non specificato) e _blank. Se non specifichiamo l’attributo target o se settiamo il suo valore a _self, allora la risorsa linkata sarà renderizzata nella stessa pagina in cui si trova il link. Se invece usiamo il valore _blank, allora la risorsa sarà renderizzata in una nuova tab o finestra.

Vediamo un esempio:

Esempio di hyperlinks

Per maggiori informazioni e la documentazione potete consultare il Mozilla Developer Network.