Corsi on-line

L’attributo hidden in HTML5

L’attributo hidden (letteralmente, “nascosto”) in HTML5 è un componente di tipo booleano che, quando introdotto, specifica se un elemento non è ancora o non è più rilevante nel contesto del contenuto corrente; ne consegue che i browser Web potrebbero non rendere visibili degli elementi associati a tale attributo. Attualmente tutti i programmi per la navigazione su Internet più utilizzati lo supportano, ma per quanto riguarda Internet Explorer si dovrà disporre come minino della versione 11.

html5 logohidden potrà essere utilizzato anche per un altro scopo, comunque non particolarmente lontano da quanto espresso in precedenza, esso infatti consentirà di mantenere nascosta una determinata informazione, un generico contenuto, fino alla soddisfazione di una determinata condizione, come per esempio la selezione di una voce di menu select o la spunta di una checkbox. Perché l’attributo venga rimosso, e l’elemento nascosto diventi visibile, sarà però necessario ricorrere a JavaScript.

E’ da sottolineare che l’attributo hidden è stato introdotto con HTML5 e in precedenza non veniva messo a disposizione dal markup, esso infatti non ha nulla a che fare con l’argomento hidden che può essere associato all’attributo input per evitare la stampa a video di un parametro all’interno di un form. Esiste però una corrispondenza in XHTML dove, non essendo prevista la minimizzazione degli attributi, lo si dovrà utilizzare all’interno dell’espressione hidden="hidden".

Sintatticamente tale attributo prevede semplicemente la sua associazione all’elemento precedentemente introdotto, motivo per cui si potrà nascondere un contenuto paragrafato nel modo seguente:

<p hidden>Blah! Blah! Blah!</p>

Stesso discorso per quanto riguarda altri elementi block-level del linguaggio per la realizzazione di pagine Web come per esempio i div:

<div hidden>Blah! Blah! Blah! Blah!</div>

Sostanzialmente esso funziona come la regola CSS display: none;, ecco perché si potrà utilizzare in sua sostituzione la seguente istruzione nel caso in cui un browser non lo dovesse supportare (magari perché aggiornato ad una versione datata):

*[hidden] { display: none; }

Quando possibile si consiglia di utilizzare hidden al posto di display: none, questo perché, riprendendo quanto affermato da David Walsh in un suo articolo, l’attributo di HTML5 è semanticamente più corretto, è più rapido da digitare e, per quanto riguarda l’accessibilità, è facilmente fruibile dagli screen readers.

Post correlati
I più letti del mese
Tematiche