Il tag “a” è la vera rivoluzione del web.
Internet come lo conosciamo ora (lasciamo perdere Arpanet) nasce tutto da li, da link ipertestuali che fanno muovere il lettore tra una parola ed un’altra, tra un paragrafo ed un altro, tra un testo ed un’altro. Prima del tag a c’erano le librerie (non quelle java, quelle fisiche intendo…), gli scaffali e gli infiniti elenchi delle varie posizioni dei libri. Poi la rivoluzione digitale, un click e passi dalla Londra del 1829, dove uomini e topi convivevano a braccetto, alla composizione chimica della molecola principale del veleno per topi, agli orari del corso di chimica supramolecolare dell’università di Firenze.
Scusate, sono vecchio e faccio molte digressioni…voi non siete qui per questo, vero?
L’uso classico del tag a è il seguente
<a href:”https://www.professionistidelweb.com”>Il tuo sito di riferimento per la creazione di un sito</a>
Questo tipo di codice genererà un classico link che (se non modificato dal codice CSS) apparirà blu se non cliccato e viola una volta cliccato.
Cioè una zozzeria.
Quindi mettete mano al codice CSS e date un tono al vostro link se non volete rimanere a vivere negli anni 90.
Ovviamente il tag a ha una serie di opzioni per poter adattare al meglio il link alle nostre esigenze, che vanno inserite subito dopo la parte href, una dopo l’altra. Ecco un breve elenco delle più interessanti
-
Download
Serve per far capire al browser che il link che stiamo seguendo non è legato ad una pagina, ma ad un file da scaricare. Se si specifica un valore dell’opzione download il file verrà rinominato con quel nome
<a href=”/images/profressionistidelweb.jpg” download=”logoProfessionisti”>Logo</a>
-
Media
Specifica con che tipo di device/media deve essere aperto il link (è solo un “suggerimento” al browser, non è obbligatorio). Si possono usare anche gli operatori and, not e ,(or) per concatenare le opzioni
Tipi di device
- aural (sintetizzatori vocali)
- braille (dispositivi di feddeback Braille)
- handheld (dispositivi con schermi piccoli. limita la banda)
- projection (proiettori)
- print (anteprima di stampa della modalità “stampa” delle pagine)
- screen (monitor del computer)
- tv (televisioni)
Tipi di attributi
- width (specifica la profondità della display area, si possono usare anche min-width e max-width. Esempio: media=”screen and (min-width:500px)”
- height (specifica l’altezza della display area, si possono usare anche min-height e max-height. Esempio: media=”screen and (max-height:700px)”
- orientation (specifica l’orientamento del display o della carta. Si può usare “portrait” or “landscape”. Esempio: media=”all and (orientation: landscape)”
- aspect-ratio (specifica il rapporto tra altezza e larghezza della display area- Esempio: media=”screen and (aspect-ratio:16/9)”
- color (specifica i bit per colore- Esempio: media=”screen and (color:3)”
- color-index (specifica il numero di colori che il display può gestire. Esempio: media=”screen and (min-color-index:256)”
- monochrome (specifica i bit per pixel in un frame monocromatico. Esempio: media=”screen and (monochrome:2)”
- resolution (specifica la densità di pixel (dpi)- Esempio: media=”print and (resolution:300dpi)”
<a href=”att_a_media.asp?output=print” media=”print and (resolution:300dpi)”>Stampa</a>
-
rel
L’attributo rel stabilisce che tipo di relazione c’è tra il link ed il documento che contiene. Ha diverse opzioni
- author (indica il nome dell’autore del testo/doccumento linkato)
- external (indica che il testo/documento non fa parte del sito nel quale state navigando)
- help (indica che il link è a una pagina di aiuto)
- license (indica le informazioni sul copyrights del documento)
- next (indica che il documento linkato è il successivo della lista)
- nofollow (indica ai motori di ricerca di non indicizzare quel link)
- noreferrer (indica ai browser di non trasmettere le informazioni di provenienza a quel link, come il tipo di browser, o il sistema operativo etc etc)
- noopener (indica ai browser di interrompere l’utilizzo dell’oggetto Javascript window.opener. Viene usato di default dai CMS come wordpress se si usa target=”blank” sul link, in modo da bloccare eventuali attacchi di intrusi che potrebbero prendere possesso della finestra secondaria aperta. E’ una cosa da smanettoni, si. Lasciatelo sempre perchè non è dannoso, non influisce sul SEO ed aumenta la sicurezza del vostro sito
- prev (indica che il documento linkato è il precedente della lista)
- search (indica che il link è a un tool per le ricerche)
<a rel=”nofollow” href=”https://www.professionistidelweb.com/”>Il meglio che puoi trovare</a>
-
target
Serve per stabilire dove aprire il link
- _blank (apre il link in una nuova finestra o scheda)
- _self (apre il link nella stessa scheda o finestra – è il valore di default)
- _parent (apre il link in un parent frame, se il frame principale è l’1 lo apre nel 2, e così via)
- _top (apre il link a finestra intera)
- framename (apre il link nel frame N)
<a href=”https://www.professionistidelweb.com” target=”_blank”>Il top del top per il tuo sitoo internet</a>