Attributi

Gli attributi sono stati discussi brevemente nella sezione Panoramica del codice HTML; è il momento di approfondire l'argomento.

Gli attributi sono ciò che rende l'HTML così potente. Gli attributi sono nomi separati da spazi e coppie nome/valore visualizzati nel tag di apertura, che forniscono informazioni sull'elemento e sulle relative funzionalità.

Gli attributi definiscono il comportamento, i collegamenti e la funzionalità degli elementi. Alcuni attributi sono globali, ossia 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 dell'elemento e pertinenti solo a un singolo elemento. In HTML, tutti gli attributi tranne quelli booleani e, in una certa misura, quelli enumerati, richiedono un valore.

Se il valore di un attributo include uno spazio o caratteri speciali, il valore deve essere racchiuso tra virgolette. Per questo motivo e per una migliore leggibilità, si consiglia sempre di citare.

Sebbene il codice 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 nomi di classi e ID, sono sensibili alle maiuscole. Se un valore dell'attributo è sensibile alle maiuscole in HTML, è sensibile alle maiuscole quando viene utilizzato come parte di un selettore di attributi in CSS e 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 vero. 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 è disabilitato, 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 essere effettivamente impostato sulla stringa true. Tutti i valori, inclusi true, false e 😀, anche se non validi, verranno restituiti come true.

Questi tre tag sono equivalenti:

<input required>
<input required="">
<input required="required">

Se il valore dell'attributo è false, omettilo. Se l'attributo è true, includilo ma non specificarne un valore. Ad esempio, required="required" non è un valore valido in HTML; ma, poiché required è booleano, i valori non validi vengono restituiti come true. Tuttavia, poiché gli attributi enumerati non validi non si risolvono necessariamente nello stesso valore dei valori mancanti, è più facile abituarsi a omettere valori piuttosto che ricordare quali attributi sono booleani e quali invece forniscono un valore non valido.

Quando passi da true a false, aggiungi e rimuovi del tutto l'attributo con JavaScript anziché modificare e 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

Gli attributi enumerati vengono a volte 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 il valore è mancante. Ad esempio, se includi <style contenteditable>, il valore predefinito è <style contenteditable="true">.

Tuttavia, a differenza degli attributi booleani, omettere l'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 corrisponde necessariamente a una stringa con valore mancante. Continuando con l'esempio, il valore predefinito di contenteditable è inherit, se mancante 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 il valore predefinito è inherit.

Nella maggior parte dei casi, per gli attributi enumerati, i valori mancanti e non validi sono gli stessi. Ad esempio, se l'attributo type in un <input> non è presente, è presente ma non ha 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; ometti i valori, se possibile, per evitare di sbagliarli, 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 tutti questi attributi possano, in teoria, 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> perché non vengono visualizzati i meta contenuti.

id

L'attributo globale id viene utilizzato per definire un identificatore univoco per un elemento. Serve per molti scopi, tra cui: - La destinazione dell'identificatore di frammento di un link. - Identificazione di un elemento per lo scripting. - Associazione di 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 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 stesso e futuro, trasforma il primo carattere di id come lettera e utilizza solo lettere, numeri, _ e - ASCII. È buona norma trovare una convenzione di denominazione id e rispettarla, poiché i valori id sono sensibili alle maiuscole.

Il valore id deve essere univoco per il documento. È probabile che il layout della pagina non si interrompa se l'elemento id viene utilizzato più di una volta, mentre JavaScript, i link e le interazioni con gli elementi potrebbero non funzionare come previsto.

Identificatore frammento di link

La barra di navigazione include quattro link. Parleremo dell'elemento link più avanti, ma per il momento tieni presente che i link non sono limitati agli URL basati su HTTP; possono essere identificatori di frammenti alle sezioni della pagina nel documento corrente (o in altri documenti).

Sul 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'utente viene indirizzato l'attivazione del link. Quando un URL include un marcatore hash (#) 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 ancoraggio, o preferito, a 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 #, scorre per essere visualizzato.

I contenuti <main> del workshop sul machine learning hanno quattro sezioni con ID. Quando il visitatore del sito fa clic su uno dei link in <nav>, la sezione con quell'identificatore di frammento diventa visibile. 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>

Confrontando gli identificatori di frammento nei link <nav>, noterai che ognuno corrisponde al valore id di <section> in <main>. Il browser fornisce un link senza costi nella parte superiore della 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 del segno hash 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, oppure, per una minore specificità, un selettore di attributi sensibile alle maiuscole ([id="feedback"]).

Definisci i tuoi contenuti

Su MLW.com, esiste un easter egg solo per gli utenti di 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 unica funzione JavaScript sfrutta questa capacità di 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 <label> HTML ha un attributo for che assume come valore l'id del controllo modulo a cui è associato. La creazione di un'etichetta esplicita mediante l'inclusione di un id in ogni controllo modulo e l'abbinamento di ciascuna all'attributo for dell'etichetta garantisce che a ogni controllo modulo sia associata un'etichetta.

Sebbene ogni etichetta possa essere associata esattamente a un controllo modulo, a un controllo modulo può essere associata più di un'etichetta.

Se il controllo modulo è nidificato tra i tag di apertura e chiusura <label>, gli attributi for e id non sono obbligatori: è chiamata etichetta "implicita". Le etichette consentono a tutti gli utenti di sapere a cosa serve ciascun controllo 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 di tecnologie per la disabilità. Inoltre, facendo clic in qualsiasi punto di un'etichetta si attiva l'elemento associato, estendendo l'area di clic del controllo. Ciò non è utile solo a chi ha problemi di mobilità rendendo il mouse meno preciso, ma aiuta anche tutti gli utenti di dispositivi mobili che hanno le dita più larghe di un tasto della radio.

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

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

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 un punto di riferimento a livello di regione facendo riferimento al id di <h2> come al valore 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 più di 50 stati e proprietà aria-* che possono essere utilizzati per garantire l'accessibilità. aria-labelledby, aria-describedby, aria-details e aria-owns assumono come valore un elenco di riferimento id separato da spazi. aria-activedescendant, che identifica l'elemento discendente attualmente attivo, assume come valore un singolo riferimento id: quello del singolo elemento evidenziato (è possibile impostare lo stato attivo su un solo elemento alla volta).

class

L'attributo class fornisce un ulteriore metodo di targeting degli elementi con CSS (e JavaScript), ma non serve a nessun altro scopo nel codice HTML (sebbene possano essere utilizzati da framework e librerie di componenti). L'attributo class prende come valore un elenco separato da spazi di classi dell'elemento sensibili alle maiuscole.

La creazione di una struttura semantica sana consente il targeting degli elementi in base al loro posizionamento e alla loro funzione. La struttura del suono consente l'uso di selettori di elementi discendenti, selettori relazionali e selettori di attributi. Man mano che scopri gli attributi in questa sezione, valuta come puoi applicare uno stile agli elementi con gli stessi attributi o valori degli attributi. Non è che non dovresti utilizzare l'attributo class; è solo che la maggior parte degli sviluppatori non si rende conto che spesso non è necessario.

Finora, MLW non ha utilizzato classi. È possibile lanciare un sito senza un unico nome di classe? Vedremo.

style

L'attributo style consente di applicare stili incorporati, ovvero stili applicati al singolo elemento su cui è impostato l'attributo. L'attributo style assume come valore coppie di valori della proprietà CSS. La sintassi del valore è la stessa 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, seguendo il valore.

Gli stili vengono applicati solo all'elemento su cui è impostato l'attributo. I discendenti ereditano i valori delle proprietà ereditati se non vengono sostituiti 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 con fotogrammi chiave o per applicare altre regole at-rule.

Sebbene style sia effettivamente un attributo globale, il suo utilizzo non è consigliato. Definisci invece gli stili in uno o più file separati. Detto questo, l'attributo style può tornare utile durante lo sviluppo per attivare lo stile rapido, ad esempio a scopo di test. Quindi, utilizza lo stile della "soluzione" e incollalo nel file CSS collegato.

tabindex

L'attributo tabindex può essere aggiunto a qualsiasi elemento per renderlo attivo. Il valore tabindex definisce se viene aggiunto all'ordine delle schede e, facoltativamente, in un ordine di tabulazione non predefinito.

L'attributo tabindex prende come valore un numero intero. Un valore negativo (la convenzione è quella di 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 rende l'elemento attivabile e raggiungibile tramite il tasto Tab, aggiungendolo all'ordine di tabulazione predefinito della pagina nell'ordine del codice sorgente. Un valore pari o superiore a 1 inserisce l'elemento in una sequenza di messa a fuoco prioritaria e non è consigliato.

In questa pagina è presente una funzionalità di condivisione che utilizza un elemento personalizzato <share-action> che agisce come <button>. Il valore tabindex pari a zero viene 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 valore role di button indica agli utenti di screen reader che questo elemento deve comportarsi come un pulsante. Viene utilizzato JavaScript per garantire il mantenimento della promessa di funzionalità del pulsante, inclusa la gestione degli eventi click e keydown e della pressione dei tasti Invio e Barra spaziatrice.

I controlli del modulo, i link, i pulsanti e gli elementi modificabili dei contenuti possono essere attivati; quando un utente della tastiera preme il tasto Tab, lo stato attivo si sposta sull'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 avere lo stato attivo quando non lo sarebbe altrimenti.

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 codepen, il passaggio da una scheda all'altra inizia in una sequenza separata, dal valore più basso al valore più alto, prima di passare in rassegna quelli nella sequenza regolare nell'ordine di origine.

Modificare l'ordine del tasto di tabulazione può creare un'esperienza utente davvero negativa. Rende difficile l'utilizzo delle tecnologie per la disabilità, come tastiere e screen reader, per esplorare i contenuti. Inoltre, per gli sviluppatori è difficile da gestire e gestire. L'attenzione è importante: c'è un intero modulo in cui viene discusso dell'ordine di attenzione.

role

L'attributo role fa parte della specifica ARIA, anziché della specifica HMTL WHATWG. L'attributo role può essere utilizzato per fornire un significato semantico ai contenuti, consentendo agli screen reader di informare gli utenti del sito dell'interazione utente prevista per un oggetto.

Esistono alcuni widget UI comuni, come combo caselle, barre dei menu, schede e treegrid, che non hanno equivalenti HTML nativi. Ad esempio, quando crei un pattern di progettazione a schede, è possibile utilizzare i ruoli tab, tablist e tabpanel. Chi può vedere fisicamente l'interfaccia utente ha imparato a navigare nel widget e a rendere visibili diversi riquadri facendo clic sulle schede associate. L'inclusione del ruolo tab con <button role="tab"> quando viene usato un gruppo di pulsanti per mostrare riquadri diversi consente all'utente di screen reader di sapere che l'elemento <button> attualmente impostato può attivare la visualizzazione di un riquadro correlato anziché implementare la tipica funzionalità simile a quella di un pulsante.

L'attributo role non modifica il comportamento del browser o 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 la finalità prevista. Tuttavia, quando non è possibile utilizzare l'elemento giusto, l'attributo role consente di informare gli utenti di screen reader quando un elemento non semantico è stato adattato nel ruolo di un elemento semantico.

contenteditable

Un elemento con l'attributo contenteditable impostato su true è modificabile, attivabile e viene aggiunto all'ordine delle schede 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 <textarea>). Se il valore non è valido, ad esempio <style contenteditable="😀"> o <style contenteditable="contenteditable">, il valore predefinito sarà 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 agli elementi <style>. Puoi utilizzare gli attributi e un po' di CSS per creare un editor CSS attivo.

<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 il style in un selettore p. Non rimuovere la proprietà di visualizzazione, altrimenti il blocco di stile scompare.

Attributi personalizzati

Abbiamo esaminato solo la superficie degli attributi HTML globali. Esistono ancora più attributi che si applicano a un solo insieme di elementi o a un insieme limitato. Anche con centinaia di attributi definiti, potrebbe essere necessario un attributo non incluso nella specifica. Ci pensa il linguaggio HTML.

Puoi creare qualsiasi attributo personalizzato aggiungendo il prefisso data-. Puoi assegnare all'attributo un nome che inizi con data- seguito da qualsiasi serie minuscola di caratteri 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 un :, la creazione di attributi personalizzati validi che iniziano con data- offre alcuni vantaggi. Con gli attributi dei dati personalizzati hai la certezza di non utilizzare accidentalmente il nome di un attributo esistente. Gli attributi dei dati personalizzati sono a prova di futuro.

Anche se i browser non implementano comportamenti predefiniti per qualsiasi attributo con prefisso data- specifico, esiste un'API del set di dati integrata che esegue l'iterazione attraverso 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 attributi 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 utilizzare la proprietà dataset più semplice.

el.dataset[machineLearning]; // workshop
e.dataset.machineLearning; // workshop

La proprietà dataset restituisce un oggetto DOMStringMap degli attributi data- di ciascun elemento. <blockquote>: include diversi attributi personalizzati. Grazie alla proprietà del set di dati, non è necessario conoscere gli attributi personalizzati per accedere ai relativi nomi e valori:

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

Gli attributi descritti in questo articolo sono globali, ovvero possono essere applicati a qualsiasi elemento HTML (anche se non tutti hanno un impatto su questi elementi). Ora esamineremo i due attributi dell'immagine introduttiva di cui non abbiamo parlato (target e href) e diversi altri attributi specifici degli elementi man mano che analizzeremo più a fondo i link.

Verifica la tua comprensione

Verifica la tua conoscenza degli attributi.