Gli attributi HTML me­mo­riz­za­no in­for­ma­zio­ni ag­giun­ti­ve in un tag HTML. Per farlo, basta ag­giun­ger­li nel codice. Oltre agli attributi uni­ver­sa­li, per la gestione di eventi e data, esistono numerosi attributi in­di­vi­dua­li.

Per cosa vengono uti­liz­za­ti gli attributi HTML?

Gli attributi HTML vengono uti­liz­za­ti per me­mo­riz­za­re in­for­ma­zio­ni ag­giun­ti­ve sugli elementi di un tag HTML. Sono co­sti­tui­ti da un nome e da un valore. Gli attributi HTML si trovano nel tag di apertura e sono case in­sen­si­ti­ve, ossia non fanno di­stin­zio­ne tra maiuscole e minuscole. Sebbene i loro valori non debbano ne­ces­sa­ria­men­te essere scritti tra vir­go­let­te, si consiglia comunque di scriverli in questo modo, onde evitare errori. Gli attributi HTML si in­se­ri­sco­no nel codice in questo modo:

<elemento nome="" dell’attributo="Valore dell’attributo"></elemento>

Se, ad esempio, si vuole inserire un link in un sito web, questo avviene tramite il tag e l’attributo href. Uniti, appaiono così:

<!DOCTYPE html>
<html>
<head>
<title>Titolo d’esempio</title>
</head>
<body>
<a href="https://www.esempio.it">Fate clic qui per la pagina di esempio.</a>
</body>
</html>
Consiglio

Per saperne di più sui col­le­ga­men­ti interni ed esterni at­tra­ver­so l’HTML e gli attributi cor­ri­spon­den­ti, potete con­sul­ta­re il nostro articolo det­ta­glia­to su a href.

Quali attributi HTML esistono?

Esistono molti attributi HTML diversi, anche se dall’in­tro­du­zio­ne di HTML5 alcune opzioni non sono più uti­liz­za­bi­li. Gli attributi HTML possono essere suddivisi ap­pros­si­ma­ti­va­men­te in cinque gruppi diversi:

  • Classici attributi uni­ver­sa­li che possono essere uti­liz­za­ti in quasi tutti gli elementi e man­ten­go­no un ruolo costante. Tuttavia, con alcuni elementi non hanno alcun effetto.
  • Attributi specifici che in­fluen­za­no i singoli elementi e ne de­fi­ni­sco­no i parametri.
  • Attributi che valgono dall’in­tro­du­zio­ne di HTML5: questi creano in parte nuove pos­si­bi­li­tà o so­sti­tui­sco­no vecchi attributi HTML.
  • Attributi di gestione degli eventi che attivano un evento definito per un elemento non appena gli utenti eseguono una de­ter­mi­na­ta azione.
  • Attributi data che possono contenere in­for­ma­zio­ni, ma non sono visibili per le/gli utenti.

Classici attributi uni­ver­sa­li

I classici attributi uni­ver­sa­li sono con­sen­ti­ti nella maggior parte dei tag HTML. Di seguito trovate i più noti:

Attributo HTML De­scri­zio­ne Esempio
id Serve a iden­ti­fi­ca­re in modo univoco un elemento HTML. id="esempio"
class Si usa per assegnare un elemento a una o più classi. class="au­to­mo­bi­li"
style Definisce lo stile di un elemento HTML e può quindi impostare, ad esempio, il colore, il font o la di­men­sio­ne del carattere. style="color: blue; font-size: 2em"
title Contiene in­for­ma­zio­ni ag­giun­ti­ve sul contenuto di un elemento; queste vengono vi­sua­liz­za­te, ad esempio, in una finestra separata quando si passa il mouse sull’elemento. title="testo d’esempio"
lang Determina la lingua di base di un documento. <html lang="it">
dir Definisce la direzione di scor­ri­men­to di un testo da sinistra a destra o viceversa. <html dir="ltr">esempio</html>

Attributi HTML specifici

Esistono numerosi attributi HTML specifici per definire i singoli elementi. Di seguito i più comuni:

Attributo HTML De­scri­zio­ne Esempio
alt Vi­sua­liz­za un testo al­ter­na­ti­vo se non è possibile caricare o vi­sua­liz­za­re un’immagine. <img src="https://www.ionos.it/digitalguide/auto rossa.jpg" alt="auto sportiva rossa al semaforo.">
height Imposta l’altezza di un elemento in pixel. <img alt="l’auto rossa" height="220">
width Imposta la larghezza di un elemento in pixel. <img alt="l’auto rossa" width="220">
href Definisce l’URL di un link. <a href="https://www.si­to­we­be­sem­pio.it" title="Per saperne di più">
hreflang Imposta la lingua del documento collegato. <a href="https://www.si­to­we­be­sem­pio.it" lang="it" hreflang="en">In­for­ma­zio­ni in inglese</a>
target Determina dove deve essere aperto un link. <a href="https://www.si­to­we­be­sem­pio.it" target="_blank">
rel Definisce la relazione tra il documento di de­sti­na­zio­ne e quello collegato. <a rel="nofollow" href="https://www.si­to­we­be­sem­pio.it/">pagina d’esempio</a>
src Definisce l’origine di un elemento. <img src="https://www.ionos.it/digitalguide/auto rossa.jpg" alt="l’auto rossa>
autoplay Assicura che un de­ter­mi­na­to contenuto mul­ti­me­dia­le venga ri­pro­dot­to au­to­ma­ti­ca­men­te; tuttavia, la maggior parte dei browser può ignorare questa im­po­sta­zio­ne. <video autoplay>
poster Imposta un’immagine di anteprima quando si inserisce un video in HTML. <video controls poster="anteprima.png">

Nuovi attributi da HTML5

Dall’in­tro­du­zio­ne di HTML5 e HTML 5.1 sono stati aggiunti alcuni attributi HTML. Tra questi, rientrano i seguenti:

Attributo HTML De­scri­zio­ne Esempio
con­ten­te­di­ta­ble Definisce se il contenuto di un elemento può essere mo­di­fi­ca­to; i valori possibili sono true e false. <p con­ten­te­di­ta­ble="false">
hidden Attributo uni­ver­sa­le che può na­scon­de­re un elemento. <p hidden> Questo testo viene nascosto </p>
dropzone Definisce se un elemento viene copiato (copy), collegato (link) o spostato (move) durante il tra­sci­na­men­to con drag&drop. <p dropzone="move">
draggable Attributo uni­ver­sa­le che definisce se il contenuto di un elemento può essere tra­sci­na­to tramite drag&drop. <p draggable="false">
loading Determina la modalità di ca­ri­ca­men­to dei file mul­ti­me­dia­li esterni; i valori ammessi sono auto, eager e lazy. <img src="https://www.ionos.it/digitalguide/autorossa.jpg" alt="l’auto rossa" loading="lazy"
spell­check Determina se deve essere attivato il controllo or­to­gra­fi­co; i valori ammessi sono true e false. <p con­ten­te­di­ta­ble="true" spell­check="false">

Attributi per la gestione di eventi

Esistono diversi attributi HTML che attivano eventi nel browser. I seguenti attributi HTML sono quindi una piccola selezione dei diversi eventi che vengono integrati nell’HTML tramite Ja­va­Script.

Attributo HTML De­scri­zio­ne Esempio
onclick At­ti­va­zio­ne di un evento in Ja­va­Script con un clic del mouse. <button onclick="Funzione d’esempio ( ) ">Cliccate qui</button>
onscroll Viene attivato quando l’elemento viene fatto scorrere. <div onscroll="Funzione d’esempio ( ) ">
onkeydown Viene attivato quando viene premuto un pulsante. <input type="text" onkeydown=Funzione d’esempio ( ) ">
onsearch Attiva Ja­va­Script non appena viene inserita una ricerca nella maschera di ricerca. <input type="search" onsearch="Funzione d’esempio ( ) ">
onerror Può eseguire Ja­va­Script in caso di errore. <img src="https://www.ionos.it/digitalguide/autorossa.jpg" onerror="Funzione d’esempio ( ) ">
oncopy Viene attivato quando un testo viene copiato. <input type="text" oncopy="Funzione d’esempio ( ) " value="Copiate questo testo">
onselect Attiva Ja­va­Script non appena viene se­le­zio­na­to un testo nell’elemento di input. <input type="text onselect="Funzione d’esempio ( ) " value="Testo d’esempio">

Attributi data

Oltre agli attributi HTML elencati sopra, esistono attributi separati che possono essere valutati solo tramite uno script o uti­liz­za­ti con i CSS. In questo modo, è possibile fornire in­for­ma­zio­ni che non devono essere pre­sen­ta­te vi­si­va­men­te. Questi attributi HTML iniziano sempre con data-. È possibile im­po­star­li con se­tAt­tri­bu­te e leggerli con ge­tAt­tri­bu­te. Anche i motori di ricerca non valutano questi attributi HTML. Per gli attributi data sono ammesse solo lettere minuscole, numeri, trattini, punti e virgole.

<article
id="elementi d’esempio"
data-columns="5"
data-index-number="1385"
data-parent="html5">
</article>

Con­clu­sio­ne: gli attributi HTML sono im­por­tan­ti per quasi tutti i siti web

Quando im­pa­re­re­te l’HTML, vi ac­cor­ge­re­te subito che gli attributi HTML sono un elemento im­por­tan­te per la co­stru­zio­ne di un sito web ottimale e pie­na­men­te fun­zio­na­le. So­prat­tut­to se avete bisogno di funzioni che si di­sco­sta­no dalla gestione quo­ti­dia­na, gli attributi HTML sono il modo migliore e più sicuro per farlo. Le in­for­ma­zio­ni me­mo­riz­za­te as­si­cu­ra­no che tutti gli aspetti del vostro nuovo sito web lavorino di pari passo. Inoltre, l’utilizzo è sem­pli­cis­si­mo grazie a uno dei tanti editor HTML.

Consiglio

Un sito web perfetto, proprio come piace a voi: con MyWebsite Now di IONOS avrete a di­spo­si­zio­ne tutti gli strumenti necessari per costruire la vostra pagina web in totale autonomia. In al­ter­na­ti­va, il nostro team di esperte ed esperti creerà il vostro sito web in­te­ra­men­te secondo i vostri desideri. Scegliete il modello giusto per i vostri scopi!

Vai al menu prin­ci­pa­le