Gli attributi sono stati brevemente descritti nella Panoramica di HTML; ora è il momento di approfondire l'argomento.
Gli attributi sono ciò che rende HTML così potente. Gli attributi sono nomi separati da spazi e coppie nome/valore che compaiono nel tag di apertura e forniscono informazioni e funzionalità per l'elemento.
Gli attributi definiscono il comportamento, i collegamenti e la funzionalità degli elementi. Alcuni attributi sono globali, il che significa che possono apparire all'interno del tag di apertura di qualsiasi elemento. Altri attributi si applicano a più elementi, ma non a tutti, mentre altri sono specifici per un elemento e pertinenti solo a un singolo elemento. In HTML, tutti gli attributi, ad eccezione di quelli booleani e, in parte, di quelli enumerati, richiedono un valore.
Se un valore dell'attributo include uno spazio o caratteri speciali, il valore deve essere racchiuso tra virgolette. Per questo motivo, e per una maggiore leggibilità, è sempre consigliabile l'uso delle virgolette.
Sebbene HTML non faccia distinzione tra maiuscole e minuscole, alcuni valori degli attributi sì. I valori che fanno parte della specifica HTML non fanno distinzione tra maiuscole e minuscole. I valori delle stringhe definiti, come i nomi di classi e ID, sono sensibili alle maiuscole. Se un valore dell'attributo è sensibile alle maiuscole in HTML, lo è anche se utilizzato all'interno di un selettore di attributi in CSS e in JavaScript. In caso contrario, non lo è.
<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">
<!-- the id attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">
Attributi booleani
Se è presente un attributo booleano, è sempre true. Gli attributi booleani includono autofocus, inert, checked, disabled,
required, reversed, allowfullscreen, default, loop, autoplay, controls, muted, readonly, multiple, e selected.
Se è presente uno (o più) di questi attributi, l'elemento è disattivato, obbligatorio, di sola lettura e così via. Se non è presente, non lo è.
I valori booleani possono essere omessi, impostati su una stringa vuota o essere il nome dell'attributo, ma il valore non deve necessariamente essere impostato sulla stringa true. Tutti i valori, inclusi true, false e 😀, anche se non validi, verranno risolti in true.
Questi tre tag sono equivalenti:
<input required>
<input required="">
<input required="required">
Se il valore dell'attributo è falso, ometti l'attributo. Se l'attributo è true, includilo, ma non fornire un valore.
Ad esempio, required="required" non è un valore valido in HTML, ma poiché required="required" è booleano, i valori non validi vengono risolti in true.required
Tuttavia, poiché gli attributi enumerati non validi non risolvono necessariamente nello stesso valore dei valori mancanti, è più facile acquisire l'abitudine di omettere i valori rispetto a ricordare quali attributi sono booleani ed enumerati e potenzialmente forniscono un valore non valido.
Quando passi da true a false, aggiungi e rimuovi completamente l'attributo con JavaScript anziché attivare/disattivare il valore.
const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");
Tieni presente che nei linguaggi XML, come SVG, tutti gli attributi devono includere un valore, inclusi gli attributi booleani.
Attributi enumerati
A volte gli attributi enumerati vengono confusi con gli attributi booleani. Si tratta di attributi HTML che hanno un insieme limitato di valori validi predefiniti.
Come gli attributi booleani, hanno un valore predefinito se l'attributo è presente, ma manca il valore. Ad esempio, se includi <style contenteditable>,
per impostazione predefinita viene utilizzato <style contenteditable="true">.
Tuttavia, a differenza degli attributi booleani, l'omissione dell'attributo non significa che sia falso; un attributo presente con un valore mancante non è necessariamente vero e il valore predefinito per i valori non validi non è necessariamente uguale a una stringa null. Per continuare con l'esempio,
contenteditable ha come valore predefinito inherit se non è presente o non è valido e può essere impostato esplicitamente su false.
Il valore predefinito dipende dall'attributo. A differenza dei valori booleani, gli attributi non sono automaticamente "true" se sono presenti. Se includi <style contenteditable="false">, l'elemento non è modificabile. Se il valore non è valido, ad esempio <style contenteditable="😀"> o, sorprendentemente, <style contenteditable="contenteditable">, il valore non è valido e il valore predefinito è inherit.
Nella maggior parte dei casi con attributi enumerati, i valori mancanti e non validi sono gli stessi. Ad esempio, se l'attributo type di un <input>
è mancante, presente ma senza un valore o ha un valore non valido, il valore predefinito è text. Sebbene questo comportamento sia comune, non è una regola.
Per questo motivo, è importante sapere quali attributi sono booleani e quali enumerati. Se possibile, ometti i valori per non commettere errori e cerca il valore in base alle esigenze.
Attributi globali
Gli attributi globali sono attributi che possono essere impostati su qualsiasi elemento HTML, inclusi gli elementi in <head>. Esistono più di
30 attributi globali. Sebbene in teoria tutti questi attributi possano essere aggiunti a qualsiasi elemento HTML, alcuni attributi globali non hanno alcun effetto se impostati su alcuni elementi. Ad esempio, l'impostazione di hidden su un <meta> non comporta la visualizzazione dei metacontenuti.
id
L'attributo globale id viene utilizzato per definire un identificatore univoco per un elemento. Ha molti scopi, tra cui:
- La destinazione dell'identificatore di frammento di un link.
- Identificazione di un elemento per i script.
- Associare un elemento del modulo alla relativa etichetta.
- Fornire un'etichetta o una descrizione per le tecnologie per la disabilità.
- Stili di targeting con (alta specificità o come selettori di attributi) in CSS.
Il valore id è una stringa senza spazi. Se contiene uno spazio, il documento non verrà interrotto, ma dovrai scegliere come target il carattere id con i caratteri di escape in HTML, CSS e JS. Tutti gli altri caratteri sono validi. Un valore id può essere 😀 o .class, ma non è una buona idea. Per semplificare la programmazione per te stesso e per il tuo futuro, imposta il primo carattere di id su una lettera e utilizza solo lettere, cifre, _ e - ASCII. È buona norma creare una convenzione di denominazione per i valori id e rispettarla, poiché i valori id sono sensibili alle maiuscole.
id deve essere univoco per il documento. Il layout della pagina probabilmente non verrà interrotto se un id viene utilizzato più di una volta, ma JavaScript, i link e le interazioni con gli elementi potrebbero non funzionare come previsto.
Identificatore del frammento del link
La barra di navigazione include quattro link. Tratteremo l'elemento link in seguito, ma per il momento tieni presente che i link non sono limitati agli URL basati su HTTP; possono essere identificatori di frammenti di sezioni della pagina nel documento corrente (o in altri documenti).
Sul sito del workshop di machine learning, la barra di navigazione nell'intestazione della pagina include quattro link:
L'attributo href fornisce il link ipertestuale a cui l'utente viene indirizzato attivando il link. Quando un URL include un cancelletto (#) seguito da una stringa di caratteri, questa stringa è un identificatore di frammento. Se la stringa corrisponde a un id di un elemento nella pagina web, il frammento è un'ancora o un preferito per quell'elemento. Il browser scorrerà fino al punto in cui è definita l'ancora.
Questi quattro link rimandano a quattro sezioni della nostra pagina identificate dal loro attributo id. Quando l'utente fa clic su uno dei quattro link nella barra di navigazione, viene visualizzato l'elemento collegato dall'identificatore del frammento, ovvero l'elemento contenente l'ID corrispondente meno #.
I contenuti <main> del workshop sul machine learning sono suddivisi in quattro sezioni con ID. Quando il visitatore del sito fa clic su uno dei link in <nav>, la sezione con l'identificatore del frammento viene visualizzata. Il markup è simile al seguente:
<section id="reg">
<h2>Machine Learning Workshop Tickets</h2>
</section>
<section id="about">
<h2>What you'll learn</h2>
</section>
<section id="teachers">
<h2>Your Instructors</h2>
<h3>Hal 9000 <span>&</span> EVE</h3>
</section>
<section id="feedback">
<h2>What it's like to learn good and do other stuff good too</h2>
</section>
Se confronti gli identificatori dei frammenti nei link <nav>, noterai che ciascuno corrisponde al id di un <section> in <main>.
Il browser ci fornisce un link senza costi "in alto nella pagina". L'impostazione href="#top", senza distinzione tra maiuscole e minuscole, o semplicemente href="#", fa scorrere
l'utente nella parte superiore della pagina.
Il separatore di simboli di cancelletto in href non fa parte dell'identificatore di frammento. L'identificatore del frammento è sempre l'ultima parte dell'URL e non viene inviato al server.
Selettori CSS
In CSS, puoi scegliere come target ogni sezione utilizzando un selettore ID, ad esempio #feedback oppure, per una specificità inferiore, un selettore di attributi sensibile alle maiuscole, [id="feedback"].
Definisci i tuoi contenuti
Su MLW.com è presente un easter egg solo per gli utenti che utilizzano il mouse. Se fai clic sull'interruttore della luce, la pagina si attiva e disattiva.
Il markup per l'immagine dell'interruttore della luce è:
html
<img src="svg/switch2.svg" id="switch"
alt="light switch" class="light" />
L'attributo id può essere utilizzato come parametro per il metodo getElementById() e, con un prefisso #, come parte di un parametro per i metodi querySelector() e querySelectorAll().
const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");
La nostra unica funzione JavaScript sfrutta questa possibilità per scegliere come target gli elementi in base al loro attributo id:
<script>
/* switch is a reserved word in js, so we us onoff instead */
const onoff = document.getElementById('switch');
onoff.addEventListener('click', function(){
document.body.classList.toggle('black');
});
</script>
<label>
L'elemento HTML <label> ha un attributo for che assume come valore il id del controllo del modulo a cui è associato.
La creazione di un'etichetta esplicita mediante l'inclusione di un id in ogni controllo del modulo e l'accoppiamento di ciascun controllo con l'attributo for dell'etichetta garantisce che ogni controllo del modulo abbia un'etichetta associata.
Sebbene ogni etichetta possa essere associata a un solo controllo del modulo, un controllo del modulo può avere più di un'etichetta associata.
Se il controllo del modulo è nidificato tra i tag di apertura e chiusura <label>, gli attributi for e id non sono obbligatori: si tratta di un'etichetta "implicita". Le etichette consentono a tutti gli utenti di sapere a cosa serve ciascun controllo del modulo.
<label>
Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.
L'associazione tra for e id rende le informazioni disponibili per gli utenti delle tecnologie per la disabilità. Inoltre,
fare clic in un punto qualsiasi di un'etichetta attiva l'elemento associato, estendendo l'area di clic del controllo. Questa funzionalità non è utile solo per le persone con problemi di destrezza che rendono meno preciso l'uso del mouse, ma anche per tutti gli utenti di dispositivi mobili con dita più larghe di un pulsante di radio.
In questo esempio di codice, la quinta domanda falsa di un quiz falso è una domanda a scelta multipla con una sola opzione. Ogni controllo del modulo ha un'etichetta esplicita, con un id univoco per ogni controllo. Per assicurarci di non duplicare accidentalmente un ID, il valore dell'ID è una combinazione del numero della domanda e del valore.
Quando includi i pulsanti di opzione, poiché le etichette descrivono il valore dei pulsanti di opzione, racchiudi tutti i pulsanti con lo stesso nome in un <fieldset>
con <legend> che è l'etichetta o la domanda per l'intero insieme.
Altri utilizzi dell'accessibilità
L'uso di id per l'accessibilità e l'usabilità non è limitato alle etichette. Nell'introduzione al testo, un <section> è stato convertito in punto di riferimento della regione facendo riferimento al id di un <h2> come valore del aria-labelledby di <section> per fornire il nome accessibile:
<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>
Esistono oltre 50 stati e proprietà aria-* che possono essere utilizzati per garantire l'accessibilità. aria-labelledby, aria-describedby,
aria-details e aria-owns hanno come valore un elenco di riferimenti id separati da spazi. aria-activedescendant, che
identifica l'elemento discendente attualmente attivo, assume come valore un singolo riferimento id: quello del singolo elemento attivo (è possibile attivare un solo elemento alla volta).
class
L'attributo class fornisce un modo aggiuntivo per scegliere come target gli elementi con CSS (e JavaScript), ma non ha altro scopo
in HTML (anche se i framework e le librerie di componenti potrebbero utilizzarli). L'attributo class ha come valore un elenco separato da spazi delle classi sensibili alle maiuscole per l'elemento.
La creazione di una struttura semantica solida consente di scegliere come target gli elementi in base al loro posizionamento e alla loro funzione. La struttura audio consente l'utilizzo di selettori di elementi discendenti, selettori di relazioni e selettori di attributi. Mentre impari a conoscere gli attributi in questa sezione, considera come è possibile applicare stili agli elementi con gli stessi attributi o valori degli attributi. Non è che non dovresti usare l'attributo class, ma la maggior parte degli sviluppatori non si rende conto che spesso non è necessario.
Finora, MLW non ha utilizzato alcun corso. È possibile lanciare un sito senza un nome di corso? Vedremo.
style
L'attributo style consente di applicare stili in linea, ovvero stili applicati al singolo elemento su cui è impostato l'attributo.
L'attributo style accetta come valore coppie di valori delle proprietà CSS, la cui sintassi è la stessa dei contenuti di un
blocco di stile CSS: le proprietà sono seguite da due punti, come in CSS, e i punti e virgola terminano ogni dichiarazione, dopo il valore.
Gli stili vengono applicati solo all'elemento su cui è impostato l'attributo, con i discendenti che ereditano i valori delle proprietà ereditati se non vengono sostituiti da altre dichiarazioni di stile in elementi nidificati o in blocchi o fogli di stile <style>. Poiché il valore comprende l'equivalente dei contenuti
di un singolo blocco di stile applicato solo a quell'elemento, non può essere utilizzato per i contenuti generati, per creare animazioni di keyframe o per applicare altre at-rule.
Sebbene style sia effettivamente un attributo globale, non è consigliabile utilizzarlo. Definisci gli stili in un file o in file separati.
Detto questo, l'attributo style può essere utile durante lo sviluppo per applicare rapidamente gli stili, ad esempio a scopo di test. Poi, inserisci lo stile "soluzione" nel file CSS collegato.
tabindex
L'attributo tabindex può essere aggiunto a qualsiasi elemento per consentirgli di ricevere lo stato attivo. Il valore tabindex definisce se viene aggiunto all'ordine di tabulazione e, facoltativamente, a un ordine di tabulazione non predefinito.
L'attributo tabindex ha come valore un numero intero. Un valore negativo (la convenzione è utilizzare -1) rende un elemento in grado di ricevere lo stato attivo, ad esempio tramite JavaScript, ma non lo aggiunge alla sequenza di tabulazione. Un valore tabindex pari a 0 consente di mettere l'elemento a fuoco e di raggiungerlo tramite i tasti Tab, aggiungendolo all'ordine predefinito delle schede della pagina nell'ordine del codice sorgente. Un valore pari o superiore a 1
inserisce l'elemento in una sequenza di messa a fuoco con priorità e non è consigliato.
In questa pagina è presente una funzionalità di condivisione che utilizza un elemento personalizzato <share-action> che funge da <button>. Il valore tabindex pari a zero è incluso per aggiungere l'elemento personalizzato all'ordine di tabulazione predefinito della tastiera:
<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
<svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
<use href="#shareIcon" />
</svg>
<span>Share</span>
</share-action>
Il role di button informa gli utenti di screen reader che questo elemento deve comportarsi come un pulsante. JavaScript viene utilizzato per garantire il rispetto della promessa della funzionalità del pulsante, inclusa la gestione degli eventi click e keydown, nonché la gestione delle pressioni dei tasti Invio e Spazio.
I controlli dei moduli, i link, i pulsanti e gli elementi con contenuti modificabili sono in grado di ricevere lo stato attivo. Quando un utente della tastiera preme il tasto Tab, lo stato attivo passa all'elemento attivabile successivo come se fosse impostato tabindex="0". Gli altri elementi non sono attivabili per impostazione predefinita. L'aggiunta dell'attributo tabindex
a questi elementi consente loro di ricevere lo stato attivo, diversamente da quanto accadrebbe normalmente.
Se un documento include elementi con un valore tabindex pari o superiore a 1, questi vengono inclusi in una sequenza di schede separata. Come noterai nel codice,
la tabulazione inizia in una sequenza separata, in ordine dal valore più basso al più alto, prima di passare a quelli nella sequenza regolare in ordine di codice sorgente.
La modifica dell'ordine di tabulazione può creare un'esperienza utente davvero negativa. È difficile fare affidamento sulle tecnologie per la disabilità, come tastiere e screen reader, per navigare tra i contenuti. Inoltre, è difficile da gestire e mantenere per uno sviluppatore. L'attenzione è importante: esiste un intero modulo dedicato all'argomento e all'ordine di messa a fuoco.
role
L'attributo role fa parte della specifica ARIA,
non della specifica HTML di WHATWG. L'attributo role può essere utilizzato per fornire un significato semantico ai contenuti, consentendo agli screen reader di informare gli utenti del sito sull'interazione prevista con un oggetto.
Esistono alcuni widget di interfaccia utente comuni, come combo box,
menu bar, tab list
e tree grid, che non hanno un equivalente HTML nativo.
Ad esempio, quando crei un pattern di progettazione con schede, puoi utilizzare i ruoli tab, tablist e
tabpanel. Chi può vedere fisicamente
l'interfaccia utente ha imparato per esperienza come navigare nel widget e rendere visibili diversi riquadri facendo clic sulle schede associate.
Se includi il ruolo tab con <button role="tab"> quando viene utilizzato un gruppo di pulsanti per mostrare diversi riquadri, l'utente dello screen reader viene informato che il <button> attualmente attivo può attivare/disattivare la visualizzazione di un riquadro correlato anziché implementare la funzionalità tipica dei pulsanti.
L'attributo role non cambia il comportamento del browser né altera le interazioni con la tastiera o il dispositivo di puntamento. L'aggiunta di role a un <span>
non lo trasforma in un <button>.role="button" Per questo motivo, è consigliabile utilizzare gli elementi HTML semantici per lo scopo previsto. Tuttavia, quando non è possibile utilizzare l'elemento corretto, l'attributo role consente di informare gli utenti di screen reader quando un elemento non semantico è stato integrato nel ruolo di un elemento semantico.
contenteditable
Un elemento con l'attributo contenteditable impostato su true è modificabile, può acquisire lo stato attivo e viene aggiunto all'ordine di tabulazione come se fosse impostato tabindex="0". Contenteditable è un attributo enumerato che supporta i valori true e false, con un valore predefinito di inherit
se l'attributo non è presente o ha un valore non valido.
Questi tre tag di apertura sono equivalenti:
<style contenteditable>
<style contenteditable="">
<style contenteditable="true">
Se includi <style contenteditable="false">, l'elemento non è modificabile (a meno che non sia modificabile per impostazione predefinita, ad esempio un <textarea>).
Se il valore non è valido, ad esempio <style contenteditable="😀"> o <style contenteditable="contenteditable">, il valore predefinito è inherit.
Per passare da uno stato all'altro, esegui una query sul valore della proprietà di sola lettura HTMLElement.isContentEditable.
const editor = document.getElementById("myElement");
if(editor.contentEditable) {
editor.setAttribute("contenteditable", "false");
} else {
editor.setAttribute("contenteditable", "");
}
In alternativa, questa proprietà può essere specificata impostando editor.contentEditable su true, false o inherit.
Gli attributi globali possono essere applicati a tutti gli elementi, anche a quelli <style>. Puoi utilizzare gli attributi e un po' di CSS per creare un editor CSS in tempo reale.
<style contenteditable>
style {
color: inherit;
display:block;
border: 1px solid;
font: inherit;
font-family: monospace;
padding:1em;
border-radius: 1em;
white-space: pre;
}
</style>
Prova a cambiare il color del style in un valore diverso da inherit. Quindi prova a cambiare il selettore style in p.
Non rimuovere la proprietà display, altrimenti il blocco di stile scompare.
Attributi personalizzati
Abbiamo solo toccato la superficie degli attributi globali HTML. Esistono altri attributi che si applicano a uno o a un insieme limitato di elementi. Anche con centinaia di attributi definiti, potresti avere bisogno di un attributo non presente nella specifica. Ci pensa HTML.
Puoi creare qualsiasi attributo personalizzato aggiungendo il prefisso data-. Puoi assegnare all'attributo un nome che inizi con data- followed da una serie di caratteri in minuscolo che non iniziano con xml e non contengono due punti (:).
Sebbene l'HTML sia tollerante e non si blocchi se crei attributi non supportati che non iniziano con data o anche se inizi
l'attributo personalizzato con xml o includi un :, esistono vantaggi nella creazione di attributi personalizzati validi che iniziano con data-.
Con gli attributi dei dati personalizzati, sai di non utilizzare accidentalmente il nome di un attributo esistente. Gli attributi dei dati personalizzati sono adatti al futuro.
Sebbene i browser non implementino comportamenti predefiniti per alcun attributo specifico con prefisso data-, esiste un'API set di dati integrata per eseguire l'iterazione degli attributi personalizzati. Le proprietà personalizzate sono un ottimo modo per comunicare informazioni specifiche dell'applicazione tramite JavaScript. Aggiungi attributi personalizzati agli elementi sotto forma di data-name e accedi a questi tramite il DOM utilizzando dataset[name]
sull'elemento in questione.
<blockquote data-machine-learning="workshop"
data-first-name="Blendan" data-last-name="Smooth"
data-formerly="Margarita Maker" data-aspiring="Load Balancer"
data-year-graduated="2022">
HAL and EVE could teach a fan to blow hot air.
</blockquote>
Puoi utilizzare getAttribute() utilizzando il nome completo dell'attributo oppure puoi sfruttare la proprietà dataset più semplice.
el.dataset["machineLearning"]; // workshop
e.dataset.machineLearning; // workshop
La proprietà dataset restituisce un oggetto DOMStringMap degli attributi data- di ogni elemento. Esistono diversi attributi personalizzati
sul <blockquote>. La proprietà del set di dati indica che non devi sapere quali sono questi attributi personalizzati per accedere ai relativi nomi e valori:
for (let key in el.dataset) {
customObject[key] = el.dataset[key];
}
Gli attributi in questo articolo sono globali, il che significa che possono essere applicati a qualsiasi elemento HTML (anche se non hanno tutti un impatto su questi elementi). Di seguito, esamineremo i due attributi dell'immagine introduttiva che non abbiamo trattato, target e href, e diversi altri attributi specifici per elemento, mentre esamineremo più da vicino i link.
Verificare di aver compreso
Metti alla prova le tue conoscenze sugli attributi.
Un id deve essere univoco nel documento.
Seleziona l'attributo personalizzato formato correttamente.
data-birthdaybirthdaydata:birthday