07 – Altri tags utili introdotti con HTML 5 | iSpazio DevResources

Bentornati ad un nuovo appuntamento con iSpazio DevResources. Questa volta ci occuperemo di elencare ed analizzare i restanti tags che HTML 5 ha introdotto!

Ovviamente nella nostra analisi non valuteremo i tags già descritti negli scorsi appuntamenti, e salteremo momentaneamente i tags multimediali (come audio, video e canvas) e i tags relativi ai forms (come time, etc…) che avranno “l’onore” di avere degli appuntamenti dedicati.

Buona parte degli elementi che presenteremo oggi consentono la semantizzazione del contenuto, cioè la corretta definizione degli elementi e gerarchia, evitando cosi la generalizzazione dei contenuti stessi. Andiamo quindi a spulciare questi nuovi tag:

<hgroup>

Elemento di tipo blocco che definisce un gruppo di tags heading (<h1>…<h6>) della pagina o di una sezione della pagina.

…
<hgroup>
  <h1>Questo è il titolo della Pagina</h1>
  <h2>Questo è il sottotitolo</h2>
</hgroup>
…

Novità di HTML 5:
–      Il tag è stato introdotto con HTML 5.

<figure>, <figcaption>

Elemento di tipo blocco che definisce un contenitore di immagini (ma anche video, audio, etc…) che comprende una didascalia normalmente indicata con il tag <figcaption>.

…
 <figure>
 <figcaption>Questa è la didascalia dell’immagine</figcaption>
 <img src="img_test.jpg" width="500" height="100" />
 </figure>
…

Novità di HTML 5:
–      I tags sono stati introdotti con HTML 5.

<details>, <summary>

Elemento di tipo blocco che definisce un contenitore dei dettagli che possono essere mostrati o nascosti a seconda dell’esigenze, quindi gli elementi che normalmente vengono  mostrati su richiesta del visitatore della pagina (ad esempio il classico box dei dettagli che si apre cliccando il link dei dettagli di un prodotto). Per mezzo del tag <summary> è possibile indicare l’intestazione dei dettagli.

…
<details>
<summary>Dettaglio Prodotto</summary>
<p>Descrizione aggiuntiva per un prodotto.</p>
</details>
…

Novità di HTML 5:
–      I tags sono stati introdotti con HTML 5.

<mark>

Elemento di tipo inline che definisce una porzione di testo in evidenza. Oltre alla visualizzazione del testo in evidenza, è importante cogliere anche l’importanza semantica del tag che consente di far “capire” ai motori di ricerca l’importanza di quella porzione di testo. E’ utile inoltre per evidenziare ad esempio la porzione di frase ricercata, etc…

…

<p>Il testo seguente sarà <mark>messo in evidenza</mark>.</p>
…

Novità di HTML 5:
–      Il tag è stato introdotto con HTML 5.

<embed>

Consente di inserire elementi esterni per inglobare nella pagina elementi come ad esempio filmati flash, filmati quicktime, etc…
Per mezzo di alcuni attributi è possibile:

–      width e height: consente di indicare la larghezza e l’altezza dell’elemento;

–      src: consente di stabilire l’url d’origine dell’elemento da inglobare;

–      type: consente di impostare il MIME-Type dell’elemento.

…
<embed src="film.swf" />
…

Novità di HTML 5:
–      Il tag era stato deprecato in HTML 4 ma è stato reintrodotto con HTML 5.

<meter>

Elemento che  consente di definire una misura o indicare un valore specifico. Viene rappresentato per mezzo di una barra “riempita” a seconda del valore impostato, ma non va utilizzata come barra di progresso (per questo è possibile utilizzare <progress>). L’elemento può essere utilizzato come controllo per i form (che verranno affrontati al prossimo appuntamento).

Sono disponibili alcuni  attributi (oltre gli attributi globali):

–      value:  consente di indicare il valore attuale dell’elemento ed è un attributo obbligatorio;

–      max: consente di indicare il valore massimo dell’elemento;

–      min: consente di indicare il valore minimo dell’elemento;

–      form: consente di indicare il form al quale il controllo appartiene;

–      low: consente di indicare un valore considerato come un valore basso;

–      high: consente di indicare un valore considerato come un valore alto;

–      optimum: consente di indicare un valore considerato come un valore ottimale;

Gli attributi low, high ed optimum consentono di definire dei valori di scala per mezzo dei quali è possibile rappresentare graficamente al meglio il valore impostato per mezzo dell’attributo value, e quindi rappresentare ad esempio l’elemento <meter> con una barra colorata in rosso se il valore è ritenuto basso, verde se ottimale, etc…

…
<meter value="0.5" high="0.9" low="0.1" optimum="0.5">50%</meter>
…

Novità di HTML 5:
–      Il tag è stato introdotto con HTML 5.

<progress>

Elemento che  consente di definire un processo in progresso, e viene rappresentato per mezzo della classica barra di progresso. Questo elemento non dovrebbe essere utilizzato per indicare un valore specifico (per questo è possibile utilizzare <meter>), bensì un valore in progressione.

Sono disponibili due attributi (oltre gli attributi globali):

–      value:  consente di indicare il valore attuale dell’elemento;

–      max: consente di indicare il valore massimo dell’elemento.

…
<progress value="50" max="100">
<span>50</span>%
</progress>
…

Novità di HTML 5:
–      Il tag è stato introdotto con HTML 5.

<wbr>

Definisce dove sarebbe utile aggiungere una linea-break in una parola, in caso di “a capo”.
L’elemento può essere utile quando una parola è lunga e si ha il timore che possa scomporre in maniera scorretta la riga in caso di “a capo”.

…

<p>Potremmo usare il tag in Sterno<wbr>Cleido<wbr>Mastoideo</p>
…

Novità di HTML 5:
–      Il tag è stato introdotto con HTML 5.

<command>

In coppia con il tag <menu> (che abbiamo descritto lo scorso appuntamento)  consente di rappresentare un’azione o un controllo (di tipo checkbox, command o radio) per i menù, o ancora una scorciatoia da tastiera. In realtà non è ancora ben chiaro come sarà implementato dato che attualmente non è supportato da alcun browser.

Esistono degli attributi specifici e sono:

–      checked:  in caso di controllo di tipo checkbox indica se “spuntato” o meno;

–      disabled: indica se l’elemento è disabilitato;

–      icon: indica l’url di un’eventuale icona da associare all’elemento;

–      label: definisce l’etichetta dell’elemento;

–      radiogroup: in caso di controllo di tipo radio consente di indicare a che gruppo di controlli radio appartiene l’elemento;

–      type: consente di indicare se l’elemento è di tipo: checkbox, command o radio.

Novità di HTML 5:
–      Il tag è stato introdotto con HTML 5.

<ruby>, <rt>, <rp>

I tags consentono di specificare le annotazioni Ruby, utilizzate nella tipografia orientale.

Novità di HTML 5:
–      I tags sono stati introdotti con HTML 5.

Compatibilità Tag HTML con i browser

	Browser	hgroup	figure	mark	embed	meter	progress
	MS Internet Explorer	9	9	9	9	–	–
	Mozilla Firefox	3	4	4	3	–	–
	Apple Safari	3.1	5	3.1	5	–	–
	Opera	10	11	11	10	11	11
	Google Chrome	5	5	5	5	8	8

Sono riportate le versioni minime che garantiscono il supporto per ogni browser, e solo i tag anche solo parzialmente supportati.

Siamo giunti ancora una volta al termine del nostro appuntamento, e sperando di essere stato utile vi invito a leggere anche il prossimo articolo…parleremo dei Forms…e della loro evoluzione per mezzo di HTML 5!

Alla prossima.

Francesco Sciuti