Attributi

bookmark_border Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Gli attributi sono stati trattati brevemente in Panoramica dell'HTML. È il momento di approfondire l'argomento.

Gli attributi sono ciò che rende l'HTML così potente. Gli attributi sono nomi e coppie nome/valore separati da spazi che compaiono nel tag di apertura, fornendo 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 essere visualizzati 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 l'elemento, pertinenti solo per un singolo elemento. In HTML, tutti gli attributi, ad eccezione di quelli booleani e, in una certa misura, 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 migliore leggibilità, è sempre consigliabile citare la fonte.

Sebbene l'HTML non sia sensibile alle maiuscole, alcuni valori degli attributi lo sono. 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 e minuscole in HTML, lo è anche quando viene utilizzato come parte 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 uno o più di questi attributi sono presenti, l'elemento è disattivato, obbligatorio, di sola lettura e così via. In caso contrario, non lo è.

I valori booleani possono essere omessi, impostati su una stringa vuota o essere il nome dell'attributo, ma il valore non deve 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 è false, ometti l'attributo. Se l'attributo è vero, includilo ma non fornire un valore. Ad esempio, required="required" non è un valore valido in HTML, ma poiché required è booleano, i valori non validi vengono risolti in true. Tuttavia, poiché gli attributi enumerati non validi non si risolvono necessariamente nello stesso valore dei valori mancanti, è più facile prendere l'abitudine di omettere i valori che ricordare quali attributi sono booleani rispetto a quelli enumerati e potenzialmente fornire un valore non valido.

Quando alterni tra vero e falso, aggiungi e rimuovi l'attributo completamente con JavaScript anziché alternare 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 con un insieme limitato di valori validi predefiniti. Come gli attributi booleani, hanno un valore predefinito se l'attributo è presente ma il valore è mancante. Ad esempio, se includi <style contenteditable>, il valore predefinito è <style contenteditable="true">.

A differenza degli attributi booleani, tuttavia, 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 nulla. Continuando l'esempio, contenteditable è impostato su inherit per impostazione predefinita se manca 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 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 viene impostato come predefinito inherit.

Nella maggior parte dei casi, con gli attributi enumerati, i valori mancanti e non validi sono gli stessi. Ad esempio, se l'attributo type in 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 necessità.

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. Anche se in teoria possono essere aggiunti a qualsiasi elemento HTML, alcuni attributi globali non hanno effetto se impostati su alcuni elementi; ad esempio, l'impostazione di hidden su un <meta> come contenuto meta non viene visualizzata.

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.
• Identificare un elemento per lo scripting.
• Associazione di un elemento del modulo alla relativa etichetta.
• Fornire un'etichetta o una descrizione per le tecnologie assistive.
• 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 id con 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 e per il futuro, imposta il primo carattere di id come lettera e utilizza solo lettere ASCII, cifre, _ e -. È buona norma ideare una convenzione di denominazione id e rispettarla, in quanto i valori id sono sensibili alle maiuscole.

Ilid deve essere univoco per il documento. Il layout della pagina probabilmente non si interromperà se un id viene utilizzato più di una volta, ma JavaScript, link e interazioni con gli elementi potrebbero non funzionare come previsto.

Identificatore frammento di link

La barra di navigazione include quattro link. Esamineremo l'elemento link in un secondo momento, ma per ora 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).

Nel sito del workshop sul machine learning, la barra di navigazione nell'intestazione della pagina include quattro link:

L'attributo href fornisce il link ipertestuale a cui l'attivazione del link indirizza l'utente. Quando un URL include un simbolo del cancelletto (#) seguito da una stringa di caratteri, questa stringa è un identificatore di frammento. Se questa stringa corrisponde a un id di un elemento nella pagina web, il frammento è un ancoraggio o un segnalibro per quell'elemento. Il browser scorrerà fino al punto in cui è definito l'ancoraggio.

Questi quattro link rimandano a quattro sezioni della nostra pagina identificate dall'attributo id. Quando l'utente fa clic su uno dei quattro link nella barra di navigazione, l'elemento collegato dall'identificatore di frammento, l'elemento contenente l'ID corrispondente meno #, viene visualizzato.

I <main> contenuti 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 di 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>&amp;</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 di frammenti nei link <nav>, noterai che ognuno corrisponde all'id di un <section> in <main>. Il browser ci fornisce un link senza costi "Inizio pagina". Se imposti href="#top", senza distinzione tra maiuscole e minuscole, o semplicemente href="#", l'utente scorrerà fino alla parte superiore della pagina.

Il separatore con il segno di cancelletto in href non fa parte dell'identificatore di frammento. L'identificatore di 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 o, per una specificità inferiore, un selettore di attributo 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 viene attivata e disattivata.

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 funzione JavaScript sfrutta questa capacità 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 l'id del controllo modulo a cui è associato. La creazione di un'etichetta esplicita includendo un id in ogni controllo del modulo e associando ciascuno all'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: questo è chiamato etichetta "implicita". Le etichette consentono a tutti gli utenti di sapere a cosa serve ogni 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 agli utenti di tecnologie assistive. Inoltre, se fai clic su un punto qualsiasi di un'etichetta, l'elemento associato viene messo in evidenza, estendendo l'area di clic del controllo. Questa funzionalità non è utile solo alle persone con problemi di destrezza che rendono meno preciso l'uso del mouse, ma anche a tutti gli utenti di dispositivi mobili con dita più larghe di un pulsante di opzione.

In questo esempio di codice, la quinta domanda fittizia di un quiz fittizio è una domanda a scelta multipla a scelta singola. Ogni controllo del modulo ha un'etichetta esplicita, con un id univoco per ciascuno. Per evitare di duplicare accidentalmente un ID, il valore dell'ID è una combinazione del numero della domanda e del valore.

Quando includiamo i pulsanti di opzione, poiché le etichette descrivono il valore dei pulsanti di opzione, includiamo tutti i pulsanti con lo stesso nome in un <fieldset> con <legend> che è l'etichetta o la domanda per l'intero set.

Altri utilizzi dell'accessibilità

L'utilizzo di id in accessibilità e 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 aria-* stati e proprietà che possono essere utilizzati per garantire l'accessibilità. aria-labelledby, aria-describedby, aria-details e aria-owns assumono come valore un elenco di riferimenti id separati da spazi. aria-activedescendant, che identifica l'elemento discendente attualmente attivo, accetta come valore un singolo riferimento id: quello dell'unico elemento che ha lo stato attivo (solo un elemento può essere attivo alla volta).

class

L'attributo class fornisce un modo aggiuntivo per scegliere come target gli elementi con CSS (e JavaScript), ma non ha altri scopi in HTML (anche se framework e librerie di componenti potrebbero utilizzarli). L'attributo class accetta come valore un elenco di classi sensibili alle maiuscole e minuscole separate da spazi per l'elemento.

La creazione di una struttura semantica valida consente di scegliere come target gli elementi in base al loro posizionamento e alla loro funzione. La struttura del suono consente l'utilizzo di selettori di elementi discendenti, selettori relazionali e selettori di attributi. Man mano che scopri gli attributi in questa sezione, considera come è possibile applicare lo stile agli elementi con gli stessi attributi o valori degli attributi. Non è che non devi utilizzare l'attributo class, è solo che la maggior parte degli sviluppatori non si rende conto che spesso non è necessario.

Finora, MLW non ha utilizzato alcuna classe. È possibile lanciare un sito senza un singolo nome di classe? 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 di proprietà CSS, con la sintassi del valore uguale a quella dei contenuti di un blocco di stile CSS: le proprietà sono seguite dai due punti, proprio 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à ereditate se non vengono sovrascritti da altre dichiarazioni di stile su elementi nidificati o in blocchi <style> o fogli di stile. 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 keyframe o per applicare altre regole at.

Sebbene style sia un attributo globale, non è consigliabile utilizzarlo. Definisci invece gli stili in uno o più file separati. Detto questo, l'attributo style può essere utile durante lo sviluppo per consentire uno stile rapido, ad esempio a scopo di test. Poi prendi lo stile "solution" e inseriscilo 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 accetta come valore un numero intero. Un valore negativo (la convenzione è di utilizzare -1) rende un elemento in grado di ricevere lo stato attivo, ad esempio tramite JavaScript, ma non lo aggiunge alla sequenza di spostamento con il tasto Tab. Un valore tabindex di 0 rende l'elemento selezionabile e raggiungibile tramite la tabulazione, aggiungendolo all'ordine di tabulazione predefinito della pagina in ordine di 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 tabindex di 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 comunica agli utenti di screen reader che questo elemento deve comportarsi come un pulsante. JavaScript viene utilizzato per garantire che la funzionalità del pulsante venga mantenuta, 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 modificabili dei contenuti possono ricevere lo stato attivo; quando un utente che utilizza la tastiera preme il tasto Tab, lo stato attivo si sposta sull'elemento attivabile successivo come se fosse stato tabindex="0" impostato. Altri elementi non sono attivabili per impostazione predefinita. L'aggiunta dell'attributo tabindex a questi elementi consente loro di ricevere lo stato attivo quando altrimenti non lo farebbero.

Se un documento include elementi con un tabindex pari o superiore a 1, questi vengono inclusi in una sequenza di schede separata. Come noterai in Codepen, la navigazione tramite tastiera inizia in una sequenza separata, in ordine dal valore più basso a quello più alto, prima di passare a quelli della sequenza normale nell'ordine di origine.

La modifica dell'ordine di tabulazione può creare un'esperienza utente molto negativa. In questo modo è difficile fare affidamento su tecnologie assistive, come tastiere e screen reader, per navigare nei tuoi contenuti. Inoltre, è difficile da gestire e mantenere per uno sviluppatore. La messa a fuoco è importante. Esiste un intero modulo dedicato alla messa a fuoco e all'ordine di messa a fuoco.

role

L'attributo role fa parte della specifica ARIA, anziché 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 utente prevista per un oggetto.

Esistono alcuni widget comuni dell'interfaccia utente, come caselle combinate, barre dei menu, elenchi a schede e griglie ad albero, che non hanno un equivalente HTML nativo. Ad esempio, quando crei un pattern di progettazione a schede, puoi utilizzare i ruoli tab, tablist e tabpanel. Una persona che può vedere fisicamente l'interfaccia utente ha imparato per esperienza a navigare nel widget e a rendere visibili diversi pannelli facendo clic sulle schede associate. L'inclusione del ruolo tab con <button role="tab"> quando un gruppo di pulsanti viene utilizzato per mostrare diversi pannelli consente all'utente di screen reader di sapere che l'<button> attualmente selezionato può attivare la visualizzazione di un pannello correlato anziché implementare la tipica funzionalità simile a un pulsante.

L'attributo role non modifica il comportamento del browser né altera le interazioni con la tastiera o il dispositivo di puntamento. L'aggiunta di role="button" a un <span> non lo trasforma in un <button>. Per questo motivo, è consigliabile utilizzare gli elementi HTML semantici per lo scopo previsto. Tuttavia, quando l'utilizzo dell'elemento giusto non è possibile, l'attributo role consente di informare gli utenti di screen reader quando un elemento non semantico è stato adattato al ruolo di un elemento semantico.

contenteditable

Un elemento con l'attributo contenteditable impostato su true è modificabile, può ricevere 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, come un <textarea>). Se il valore non è valido, ad esempio <style contenteditable="😀"> o <style contenteditable="contenteditable">, il valore predefinito è inherit.

Per alternare gli stati, 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 agli elementi <style>. Puoi utilizzare gli attributi e un po' di CSS per creare un editor CSS live.

<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 modificare il color di style in un valore diverso da inherit. Poi prova a cambiare style in un selettore p. Non rimuovere la proprietà display, altrimenti il blocco di stile scomparirà.

Attributi personalizzati

Abbiamo solo scalfito la superficie degli attributi globali HTML. Esistono ancora più attributi che si applicano solo a uno o a un insieme limitato di elementi. Anche con centinaia di attributi definiti, potresti aver bisogno di un attributo che non è presente nella specifica. L'HTML ti offre tutto ciò che ti serve.

Puoi creare qualsiasi attributo personalizzato aggiungendo il prefisso data-. Puoi assegnare all'attributo qualsiasi nome che inizi con data- seguito da una serie di caratteri minuscoli che non iniziano con xml e non contengono i due punti (:).

Sebbene l'HTML sia tollerante e non si interrompa se crei attributi non supportati che non iniziano con data o anche se inizi l'attributo personalizzato con xml o includi :, la creazione di attributi personalizzati validi che iniziano con data- offre dei vantaggi. Con gli attributi dei dati personalizzati sai di non utilizzare accidentalmente un nome di attributo esistente. Gli attributi dei dati personalizzati sono a prova di futuro.

Sebbene i browser non implementino comportamenti predefiniti per attributi con prefisso data- specifici, esiste un'API per set di dati integrata per scorrere gli 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() con il nome completo dell'attributo oppure sfruttare la proprietà più semplice dataset.

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 in <blockquote>. La proprietà del set di dati ti consente di accedere ai nomi e ai valori degli attributi personalizzati senza doverli conoscere:

for (let key in el.dataset) {
  customObject[key] = el.dataset[key];
}

Gli attributi descritti in questo articolo sono globali, il che significa che possono essere applicati a qualsiasi elemento HTML (anche se non tutti hanno un impatto su questi elementi). Successivamente, esaminiamo i due attributi dell'immagine introduttiva che non abbiamo trattato, target e href, e diversi altri attributi specifici per elemento mentre approfondiamo i link.

Verifica la tua comprensione

Metti alla prova le tue conoscenze sugli attributi.