Elementi per strutturare i contenuti

Esistono altri elementi per strutturare le pagine web oltre a quelli visti nell'articolo precente e che vanno a comporre più che l'impalcatura della pagina alcuni dati e dettagli dei contenuti presenti in essa, non è da escludere però che alcuni di essi possano essere supportati da un browser ma non da un altro o da una particolare versione delle stesso ed è pertanto consigliata cautela per il loro impiego.

Tra questi possiamo nominare il tag mark la cui funzione è un po' particolare dato che non esistono altri tag specifici al momento ossia viene utilizzato per evidenziare in un contenuto  determinate parole che originariamente non lo sarebbero, in alti termini basti pensare ai risultati che ci vengono forniti dopo una richiesta su un motore di ricerca, nei risultati proposti le parole che stiamo cercando sono evidenziate agli occhi dell'utente ma in realtà nel contenuto originale non lo sono.

Un altro tag già visto in un esempio di codice dell'articolo "Nuovi elementi per l'impalcatura della pagina" e di cui di seguito ne riporto un estratto è il tag time:

<section>
  <article>
    <header>[...titolo e subtitolo ...]</header>
    <p>[...testo dell'articolo...]</p>
    <footer>
      <dl>
        <dt>Articolo creato da</dt>
        <dd><address><a href="mailto:[...]">Michele Pisani</a></address></dd>
        <dt>Data</dt>
        <dd><time datetime="2014-08-19" pubdate="pubdate">Lunedì 18 Agosto</time></dd>
      </dl>
    </footer>
  </article>
</section>

Esso serve ad indicare la data di un determinato articolo o dell'intero documento e può essere di supporto al browser che lo interpreta purchè la stringa sia scritta in un formato corretto nel suo attributo datetime. L'altro attributo di cui il tag può disporre è pubdate il quale, se presente, indica che quella data si riferisce alla data di pubblicazione del contesto in cui si trova, sia esso un articolo che l'intero documento.

Altro elemento è il tag meter che quantifica una stringa, tramite i suoi attributi, in un valore frazionato o all'interno di un intervallo definito. Un esempio spiega meglio il concetto:

<meter min="30" max="45" low="35" high="39" optimum="36" value="37">Il paziente ha la febbre a 37 gradi, è meglio che non superi i 39...</meter>

Il tag progress indica lo stato di completamento di un processo, i suoi parametri indicano  il valore minore, quello maggiore e quello corrente:

<!-- lo span al valore testuale serve per la retrocompatibilità tra i browser -->
<progress min="0" max="100" value="20"><span>20</span>%</progress>

Nei browser dove è supportato, ad esempio Opera versione 11.64, il risultato a livello visivo è il seguente (Fig. 1):

 

Fig. 1 - HTML5 - Esempio del risultato di un tag progress su Opera 11.64

Il tag picture è un contenitore di immagini, serve per indicare al browser quale immagini mostrare tra quelle in lui contenute in base alla risoluzione del dispositivo che visualizza la pagina. L'attributo srcset contiene l'url dell'immagine e può esistere anche come array di url separato da virgola dove il browser recupererà l'immagine adeguata alla risoluzione; l'attributo media indica una media query sempre per le risoluzioni del dispositivo. Un esempio classico può essere il seguente:

<picture>
  <source media="(min-width: 320px)" srcset="/immagine_piccola.jpg">
  <source media="(min-width: 480px)" srcset="/immagine_media.jpg">
  <img src="/immagine_grande.jpg" alt="">
</picture>

Altro tag degno di nota è datelist, esso lavora in concomitante di un campo input per l'invio dei dati in un form e coniuga l'immissione di testo ad un completamento automatico. La corretta sintassi per il suo funzionamento è mostrata nel seguente codice:

<input type="text" name="categoria" list="lista_categorie">
<datalist id="lista_categorie">
  <option value="agricoltura">
  <option value="business">
  <option value="informatica">
  <option value="scienze">
  <option value="viaggi">
</datalist>

Nei browser dove è supportato, ad esempio Opera versione 11.64, il risultato a livello visivo è il seguente (Fig. 2):

Fig. 2 - HTML5 - Esempio del risultato di un tag datalist su Opera 11.64

Esistono tutta una serie di altri elementi ma per evitare di rendere questa lista ancora più noiosa evito di approndire rimandando alle specifiche sul sito W3C e mi limito ad elencarne semplicemente alcuni nomi: command, menu, embed, figure, keygen, ecc..

Introduco solamente un paio di tag degni di nota per il loro risultato finale a livello visivo e che sono svg e math.
Questi hanno lo scopo di gestire la grafica di alcuni contenuti sfruttando una sintassi XML, dove il primo lavora a livello vettoriale, mentre con il secondo, sfruttando una semantica dedicata (per la quale rimando alle specifiche), permette di rappresentare formule complesse come se fossero disegnate sulla pagina rispettando le proporzioni di simboli, esponenti, radici, ecc...
Un esempio di utilizzo di sintassi per gestire una formula con math è il seguente:

<math>
 <mrow>
  <mi>x</mi>
  <mo>=</mo>
  <mfrac>
    <mrow>
      <mrow>
        <mo>-</mo>
        <mi>b</mi>
      </mrow>
      <mo>±</mo>
      <msqrt>
        <mrow>
          <msup>
            <mi>b</mi>
            <mn>2</mn>
          </msup>
          <mo>-</mo>
          <mrow>
            <mn>4</mn>
            <mo>?</mo>
            <mi>a</mi>
            <mo>?</mo>
            <mi>c</mi>
          </mrow>
        </mrow>
      </msqrt>
    </mrow>
    <mrow>
      <mn>2</mn>
      <mo>?</mo>
      <mi>a</mi>
    </mrow>
  </mfrac>
 </mrow>
</math>

Ed il risultato è mostrato in Fig. 3 (riporto lo screenshot dell'immagine onde evitare che vi perdiate il risultato per un problema di compatibilità del vostro browser con la nuova semantica):

Fig. 3 - HTML5 - Esempio del risultato di un tag math per la visualizzazione di formule complesse