Attributi HTML: un riepilogo degli attributi più importanti

Gli attributi HTML memorizzano informazioni aggiuntive in un tag HTML. Per farlo, basta aggiungerli nel codice. Oltre agli attributi universali, per la gestione di eventi e data, esistono numerosi attributi individuali.

Per cosa vengono utilizzati gli attributi HTML?

Gli attributi HTML vengono utilizzati per memorizzare informazioni aggiuntive sugli elementi di un tag HTML. Sono costituiti da un nome e da un valore. Gli attributi HTML si trovano nel tag di apertura e sono case insensitive, ossia non fanno distinzione tra maiuscole e minuscole. Sebbene i loro valori non debbano necessariamente essere scritti tra virgolette, si consiglia comunque di scriverli in questo modo, onde evitare errori. Gli attributi HTML si inseriscono 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 collegamenti interni ed esterni attraverso l’HTML e gli attributi corrispondenti, potete consultare il nostro articolo dettagliato su a href.

Quali attributi HTML esistono?

Esistono molti attributi HTML diversi, anche se dall’introduzione di HTML5 alcune opzioni non sono più utilizzabili. Gli attributi HTML possono essere suddivisi approssimativamente in cinque gruppi diversi:

  • Classici attributi universali che possono essere utilizzati in quasi tutti gli elementi e mantengono un ruolo costante. Tuttavia, con alcuni elementi non hanno alcun effetto.
  • Attributi specifici che influenzano i singoli elementi e ne definiscono i parametri.
  • Attributi che valgono dall’introduzione di HTML5: questi creano in parte nuove possibilità o sostituiscono vecchi attributi HTML.
  • Attributi di gestione degli eventi che attivano un evento definito per un elemento non appena gli utenti eseguono una determinata azione.
  • Attributi data che possono contenere informazioni, ma non sono visibili per le/gli utenti.

Classici attributi universali

I classici attributi universali sono consentiti nella maggior parte dei tag HTML. Di seguito trovate i più noti:

Attributo HTML Descrizione Esempio
id Serve a identificare in modo univoco un elemento HTML. id="esempio"
class Si usa per assegnare un elemento a una o più classi. class="automobili"
style Definisce lo stile di un elemento HTML e può quindi impostare, ad esempio, il colore, il font o la dimensione del carattere. style="color: blue; font-size: 2em"
title Contiene informazioni aggiuntive sul contenuto di un elemento; queste vengono visualizzate, 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 scorrimento 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 Descrizione Esempio
alt Visualizza un testo alternativo se non è possibile caricare o visualizzare 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.sitowebesempio.it" title="Per saperne di più">
hreflang Imposta la lingua del documento collegato. <a href="https://www.sitowebesempio.it" lang="it" hreflang="en">Informazioni in inglese</a>
target Determina dove deve essere aperto un link. <a href="https://www.sitowebesempio.it" target="_blank">
rel Definisce la relazione tra il documento di destinazione e quello collegato. <a rel="nofollow" href="https://www.sitowebesempio.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 determinato contenuto multimediale venga riprodotto automaticamente; tuttavia, la maggior parte dei browser può ignorare questa impostazione. <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’introduzione di HTML5 e HTML 5.1 sono stati aggiunti alcuni attributi HTML. Tra questi, rientrano i seguenti:

Attributo HTML Descrizione Esempio
contenteditable Definisce se il contenuto di un elemento può essere modificato; i valori possibili sono true e false. <p contenteditable="false">
hidden Attributo universale che può nascondere un elemento. <p hidden> Questo testo viene nascosto </p>
dropzone Definisce se un elemento viene copiato (copy), collegato (link) o spostato (move) durante il trascinamento con drag&drop. <p dropzone="move">
draggable Attributo universale che definisce se il contenuto di un elemento può essere trascinato tramite drag&drop. <p draggable="false">
loading Determina la modalità di caricamento dei file multimediali esterni; i valori ammessi sono auto, eager e lazy. <img src="https://www.ionos.it/digitalguide/autorossa.jpg" alt="l’auto rossa" loading="lazy"
spellcheck Determina se deve essere attivato il controllo ortografico; i valori ammessi sono true e false. <p contenteditable="true" spellcheck="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 JavaScript.

Attributo HTML Descrizione Esempio
onclick Attivazione di un evento in JavaScript 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 JavaScript non appena viene inserita una ricerca nella maschera di ricerca. <input type="search" onsearch="Funzione d’esempio ( ) ">
onerror Può eseguire JavaScript 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 JavaScript non appena viene selezionato 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 utilizzati con i CSS. In questo modo, è possibile fornire informazioni che non devono essere presentate visivamente. Questi attributi HTML iniziano sempre con data-. È possibile impostarli con setAttribute e leggerli con getAttribute. 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>

Conclusione: gli attributi HTML sono importanti per quasi tutti i siti web

Quando imparerete l’HTML, vi accorgerete subito che gli attributi HTML sono un elemento importante per la costruzione di un sito web ottimale e pienamente funzionale. Soprattutto se avete bisogno di funzioni che si discostano dalla gestione quotidiana, gli attributi HTML sono il modo migliore e più sicuro per farlo. Le informazioni memorizzate assicurano che tutti gli aspetti del vostro nuovo sito web lavorino di pari passo. Inoltre, l’utilizzo è semplicissimo grazie a uno dei tanti editor HTML.

Consiglio

Un sito web perfetto, proprio come piace a voi: con MyWebsite Now di IONOS avrete a disposizione tutti gli strumenti necessari per costruire la vostra pagina web in totale autonomia. In alternativa, il nostro team di esperte ed esperti creerà il vostro sito web interamente secondo i vostri desideri. Scegliete il modello giusto per i vostri scopi!

Per offrirti una migliore esperienza di navigazione online questo sito web usa dei cookie, propri e di terze parti. Continuando a navigare sul sito acconsenti all’utilizzo dei cookie. Scopri di più sull’uso dei cookie e sulla possibilità di modificarne le impostazioni o negare il consenso.