Webdesign / 11: Semantica di html 5

Posted by On Filed under Web design

Estensibilità

html è un linguaggio "povero" dal punto di vista tassonomico, cioè non dispone di tag per specificare oggetti specifici, come numeri di telefono, pagine, località...

html utilizza l'attributo class per supplire a questa mancanza: in pratica posso scrivere qualcosa come

<span class="telefono"><span class="prefisso-internazionale">+39</span><span class="prefisso-locale">041</span><span class="numero-telefono">1234567</span></span>

Il tag class fa parte dei microformati, di cui fanno parte anche rel e rev.

Un esempio di microformato è hCard, uno standard che utilizza l'attributo class per identificare i dati di un soggetto o una ragione sociale (in pratica, un biglietto da visita).

Se un browser interpreta i microformati e l'autore li definisce nella pagina, il contenuto si arricchisce di una definizione più precisa.

Nuovi elementi

html5 supporta nuovi elementi:

  • mark: specifica un testo importante al momento, al pari di un segno di evidenziatore
  • time: indica una data o un'ora
  • meter / progress: indicano misure (fisse) e avanzamenti (variabili nel tempo)
  • section: contiene elementi correlati tra loro (es. paragrafi, comprendenti h* e gruppi di p)
  • header / footer: contengono elementi di intestazione e piè di pagina. A differenza di head, header e footer possono essere più di uno nella pagina
  • aside: contiene elementi esterni al contenuto principale, ma inerenti al tema, come note e collegamenti (nav)
  • nav: contiene collegamenti
  • article: simile a section, il suo contenuto è autoconclusivo, cioè non richiede premesse né seguiti

Struttura di un documento html5

A differenza di html4, in html5 in ogni section il titolo principale è h1, e ci possono essere più elementi h1 nella stessa pagina.

Esempio:


<!-- in html4 -->
<h1>Titolone</h1>
testo
<h2>Titolo</h2>
<h3>Titolino</h3>
testo
<h3>Altro titolino</h3>

<!-- in html 5-->
<section>
<h1>Titolone</h1>
testo
<section>
<h1>Titolo (principale della section)</h1>
<section>
<h1>Titolino</h1>
testo
</section>
<section>
<h1>Altro titolino</h1>
</section>
</section>
</section>

WAI-ARIA

è un modo alternativo a html5 di strutturare i documenti

Richiesto all’esame

  • Cosa si intende per microformato