HTML5 - Attributi
Come spiegato nel capitolo precedente, gli elementi possono contenere attributi utilizzati per impostare varie proprietà di un elemento.
Alcuni attributi sono definiti globalmente e possono essere utilizzati su qualsiasi elemento, mentre altri sono definiti solo per elementi specifici. Tutti gli attributi hanno un nome e un valore e hanno l'aspetto mostrato di seguito nell'esempio.
Di seguito è riportato l'esempio di un attributo HTML5 che illustra come contrassegnare un elemento div con un attributo denominato class utilizzando un valore di "example" -
<div class = "example">...</div>Gli attributi possono essere specificati solo all'interno di start tags e non deve mai essere utilizzato in end tags.
Gli attributi HTML5 non fanno distinzione tra maiuscole e minuscole e possono essere scritti in maiuscolo o in maiuscolo, sebbene la convenzione più comune sia quella di restare con le minuscole.
Attributi standard
Gli attributi elencati di seguito sono supportati da quasi tutti i tag HTML 5.
| Attributo | Opzioni | Funzione |
|---|---|---|
| chiave di accesso | Definito dall'utente | Specifica una scorciatoia da tastiera per accedere a un elemento. |
| allineare | destra, sinistra, centro | Allinea orizzontalmente i tag |
| sfondo | URL | Posiziona un'immagine di sfondo dietro un elemento |
| bgcolor | valori numerici, esadecimali, RGB | Posiziona un colore di sfondo dietro un elemento |
| classe | Definito dall'utente | Classifica un elemento da utilizzare con Cascading Style Sheets. |
| contenteditable | vero falso | Specifica se l'utente può modificare o meno il contenuto dell'elemento. |
| menù contestuale | ID menu | Specifica il menu contestuale per un elemento. |
| data-XXXX | Definito dall'utente | Attributi personalizzati. Gli autori di un documento HTML possono definire i propri attributi. Deve iniziare con "data-". |
| trascinabile | vero, falso, auto | Specifica se un utente può trascinare o meno un elemento. |
| altezza | Valore numerico | Specifica l'altezza di tabelle, immagini o celle di tabella. |
| nascosto | nascosto | Specifica se l'elemento deve essere visibile o meno. |
| id | Definito dall'utente | Denomina un elemento da utilizzare con Cascading Style Sheets. |
| articolo | Elenco degli elementi | Utilizzato per raggruppare elementi. |
| itemprop | Elenco di elementi | Utilizzato per raggruppare gli elementi. |
| controllo ortografico | vero falso | Specifica se per l'elemento deve essere controllato l'ortografia o la grammatica. |
| stile | Foglio di stile CSS | Specifica uno stile in linea per un elemento. |
| soggetto | L'utente definisce l'ID | Specifica l'elemento corrispondente dell'elemento. |
| tabindex | Numero di tabulazione | Specifica l'ordine di tabulazione di un elemento. |
| titolo | Definito dall'utente | Titolo "pop-up" per i tuoi elementi. |
| valign | in alto, al centro, in basso | Allinea verticalmente i tag all'interno di un elemento HTML. |
| larghezza | Valore numerico | Specifica la larghezza di tabelle, immagini o celle di tabella. |
Per un elenco completo dei tag HTML5 e degli attributi correlati, consulta il nostro riferimento ai tag HTML5 .
Attributi personalizzati
Una nuova funzionalità introdotta in HTML 5 è l'aggiunta di attributi di dati personalizzati.
Un attributo di dati personalizzato inizia con data-e sarebbe denominato in base alle tue esigenze. Ecco un semplice esempio:
<div class = "example" data-subject = "physics" data-level = "complex">
...
</div>Il codice sopra sarà HTML5 perfettamente valido con due attributi personalizzati chiamati datasubject e data-level . Saresti in grado di ottenere i valori di questi attributi utilizzando API JavaScript o CSS in modo simile a quello che ottieni per gli attributi standard.