Attributi booleani ed elementi vuoti: dettagli essenziali della sintassi HTML

Introduzione

Quando si studiano i fondamenti di HTML, è comune concentrarsi sui tag, sugli attributi e sulla gerarchia degli elementi. Esistono però due aspetti della sintassi che causano spesso errori: gli attributi booleani e gli elementi vuoti. Comprenderli permette di scrivere markup più corretto, leggibile e compatibile con browser, strumenti di sviluppo e tecnologie assistive.

Un attributo booleano rappresenta uno stato che può essere attivo oppure assente. In HTML non è necessario assegnargli il valore true: la semplice presenza dell´attributo è sufficiente per attivarlo. Al contrario, se l´attributo non compare nel tag, lo stato è disattivato.

Gli elementi vuoti, invece, sono tag che non possono contenere elementi figli o testo. Per esempio, <img> inserisce un´immagine e <input> crea un campo di input, ma nessuno dei due deve essere chiuso con un tag finale.

Codice completo

<section aria-labelledby="titolo-iscrizione">
  <h2 id="titolo-iscrizione">Iscrizione alla newsletter</h2>

  <form action="/iscrizione" method="post">
    <label for="email">Indirizzo email</label>

    <input
      type="email"
      id="email"
      name="email"
      placeholder="[email protected]"
      required
      autocomplete="email"
    >

    <div>
      <input
        type="checkbox"
        id="consenso"
        name="consenso"
        value="si"
        required
      >
      <label for="consenso">
        Accetto di ricevere comunicazioni informative.
      </label>
    </div>

    <button type="submit">Iscriviti</button>
  </form>
</section>

Spiegazione

Come funzionano gli attributi booleani

Nell´esempio, required è un attributo booleano. La sua presenza indica che il campo deve essere compilato prima dell´invio del modulo. Non è necessario scrivere required="true" e non è consigliabile utilizzare valori inventati come required="yes".

La forma più chiara e idiomatica è la seguente:

<input type="email" required>

In HTML sono comunque riconosciute anche forme come required="required", perché conta la presenza dell´attributo. Tuttavia, la versione breve rende il codice più leggibile e comunica immediatamente che si tratta di un´opzione booleana.

Alcuni attributi booleani comuni sono:

• required, per rendere obbligatorio un campo di modulo;
• disabled, per disattivare un controllo;
• checked, per selezionare inizialmente una casella o un pulsante radio;
• readonly, per impedire la modifica del valore di un campo;
• multiple, per consentire più valori, ad esempio in un caricamento di file;
• autofocus, per proporre inizialmente il focus su un elemento.

È importante distinguere tra attributo assente e attributo presente. Per esempio, un campo con disabled non può essere modificato dall´utente e, nei moduli HTML, il suo valore normalmente non viene inviato al server. Un campo con readonly, invece, non è modificabile ma il suo valore può essere incluso nell´invio del modulo.

Elementi vuoti e tag di chiusura

Gli elementi vuoti non hanno contenuto interno e non possiedono un tag di chiusura. Tra i più utilizzati troviamo img, input, br, hr, meta e link.

<img src="logo.png" alt="Logo dell´azienda">
<input type="text" name="citta">
<hr>
<br>

Scrivere <input></input> o <img></img> è scorretto in HTML. La sintassi con la barra finale, come <input />, può essere accettata dai browser, ma in HTML moderno non è necessaria. È preferibile utilizzare la sintassi standard senza barra finale.

Attributi con valori e attributi booleani a confronto

Non tutti gli attributi sono booleani. type="email", id="email" e name="email" hanno un valore specifico che modifica il comportamento o identifica l´elemento. La differenza può essere riassunta così:

• un attributo come required si attiva con la sola presenza;
• un attributo come type richiede un valore, ad esempio email;
• un attributo come alt descrive il contenuto o lo scopo di un´immagine.

Nel tag img, l´attributo alt è particolarmente importante: consente di fornire una descrizione testuale alle persone che non possono vedere l´immagine o quando il file non viene caricato.

Best practice

• Usa la forma breve per gli attributi booleani: scrivi required invece di required="true".
• Non aggiungere tag di chiusura agli elementi vuoti come input, img e br.
• Inserisci sempre alt negli elementi img. Se l´immagine è puramente decorativa, usa alt="".
• Non utilizzare disabled soltanto per cambiare l´aspetto visivo di un elemento: uno stato disabilitato modifica anche l´interazione e il comportamento del modulo.
• Preferisci attributi HTML nativi come required e disabled prima di ricorrere a soluzioni JavaScript.
• Verifica il markup con un validatore HTML e prova i moduli usando tastiera e tecnologie assistive.
• Mantieni l´indentazione coerente, così è immediato distinguere gli elementi contenitori dagli elementi vuoti.

Riepilogo

Gli attributi booleani rappresentano opzioni attive quando sono presenti nel tag. Non richiedono normalmente valori come true o false: per disattivarli è sufficiente rimuoverli. Gli elementi vuoti, invece, sono elementi senza contenuto e senza tag finale, come input, img e br.

Conoscere queste regole evita markup ambiguo e riduce gli errori nei moduli, nelle immagini e nei documenti HTML. Una sintassi semplice e conforme agli standard migliora inoltre la manutenzione del progetto e la compatibilità tra browser.

Approfondisci con risorse ufficiali

• WHATWG HTML Standard: consulta la specifica ufficiale del linguaggio HTML per conoscere la sintassi degli elementi e degli attributi.
• MDN Web Docs: approfondisci gli attributi booleani, gli elementi input e gli elementi vuoti con esempi pratici.
• W3C Markup Validation Service: verifica la correttezza del markup e individua tag o attributi utilizzati in modo errato.