Attributi HTML: un riepilogo degli attributi più importanti
La redazione di IONOS7 mins
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>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.
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!
