Il sito per imparare gratuitamente a fare pagine Web

I Nuovi Tags di HTML5

Questa guida è stampabile in modo agevole dalla sua apposita voce: "Download PDF", presente nel menù laterale:
 


Andrea Bianchi © www.web-link.it   Guida HTML 5 - Ver. 1.1.1 

Nuovi elementi

HTML5 ha introdotto nuovi elementi, alcuni già visti nella lezione precedente (elementi semantici). Qui ne vediamo altri che non riguardano la struttura ma che servono a migliorare e potenziare i contenuti.

 

<time>...</time>

L'elemento time demarca la data e l'ora su un orologio con formato 24 ore.

Viene dunque usato per esprimere data ed ora, se non è inserito all'interno di un elemento <article> farà riferimento alla data e all'ora dell'intero documento. Ha attributi opzionali come datetime che riporta data ed ora nel formato ISO. Usando questo elemento sarà possibile passare il dato ad un sistema automatico e renderlo visibile per l'utente.

<time datetime="2013-01-13"> Domenica 13 Gennaio 2013 </time>

La data viene espressa inserendo prima l'anno (2013), poi il mese (01), ed infine il giorno (13) separati dal trattino - (meno).

Volendo aggiungere anche l'ora si dovrà inserire a fine data una T seguita da ore, minuti e fuso orario separati dai : (due punti).

<time datetime="2013-01-13T15:07+01:00"> alle ore 15:07 </time>

Questo il risultato:



su
 

<mark>...</mark>

L'elemento mark demarca una parte di testo del documento.

Viene dunque usato per evidenziare parti di testo che per qualche motivo necessitano di essere poste in evidenza, alcuni browser mostrano questo testo in grassetto, altri lo evidenziano pennellandolo di giallo.

<p>Guida HTML5 di <mark> Andrea Bianchi </mark>- web-link.it </p>

Questo il risultato:

Guida HTML5 di Andrea Bianchi - web-link.it


su
 

<figure>...</figure>

L'elemento figure demarca un insieme di contenuti autonomi quali: immagini grafiche, fotografie, listati, diagrammi ecc. che possono essere anche spostati su altre pagine o parti diverse della stessa pagina perchè considerati di poca importanza e di conseguenza non alterano il senso del testo che li citava.

<figure>
<img src="forum.png" alt="Forum di web-link">
</figure>
Forum di web-link

Anche parti di codice che non incidono col contenuto della pagina

<figure>
Questa pagina è esclusiva proprietà di © Andrea Bianchi <a href="http://www.web-link.it">Web-Link.it</a> 1997 ~ 2013
</figure>
Questa pagina è esclusiva proprietà di © Andrea Bianchi Web-Link.it 1997 ~ 2013


su
 

<figcaption>...</figcaption>

L'elemento figcaption serve per inserire una didascalia, un titolo, una descrizione e deve essere necessariamente inserito all'interno dell'elemento figure visto sopra dal momento che questa didascalia riguarda solo ed esclusivamente quanto contenuto in <figure>.

<figure>
<img src="forum.png" alt="Forum di web-link">
<figcaption> Logo del forum di web-link <figcaption>
</figure>
Forum di web-link
Logo del forum di web-link

Più immagini ed una sola didascalia

<figure>
<img src="foto1.png" alt="Foto1"><img src="foto2.png" alt="Foto2"><img src="foto3.png" alt="Foto3">
<figcaption>Una sola descrizione per le tre immagini sopra<figcaption>
</figure>
immagine1immagine1immagine1
Una sola descrizione per le tre immagini sopra.


su
 

<ruby>...</ruby>   <rt>...</rt>   <rp>...</rp>

L'elemento <ruby> in giapponese - furigana e romaji, insieme a <rt> e <rp> servono per il supporto alle lingue orientali, servono per indicare la pronuncia corretta, li cito solo per informazione ma ritengo in questo contesto del tutto inutile approfondirli ulteriormente. <rt> acronimo di Ruby Text è utilizzabile all'interno di ruby per contrassegnare gli ideogrammi ruby. <rp> acronimo di Ruby Parenthesis è utilizzabile all'interno di ruby per circoscrivere le annotazioni ideogrammi ruby.

<ruby>
?????<rp>(</rp><rt>?????</rt><rp>)</rp>?????
</ruby>

Al posto dei punti interrogativi ????? ci saranno gli ideogrammi della lingua utilizzata.



su
 

<progress>...</progress>

L'elemento <progress> indica il progresso per il completamento di una attività, per esempio il caricamento di un file. Potrebbe però non essere conosciuto il suo valore per via di diversi fattori, per esempio essere in attesa di collegarsi al server dove si trova il file.

Ci sono due attributi che determinano il completamento dell'attività: value specifica la quantità di attività che è stata completata, max specifica quanto viene richiesto in totale. Il valore scritto all'interno del tag serve per i browser che non supportano progress.

<section>
Progress: <progress max="100">0%</progress>
</section>
Progress: 0%
<section>
Progress: <progress value="60" max="100">60%</progress>
</section>
Progress: 60%

E' possibile lasciare a javascript il compito di calcolare la progressione con questo script che è l'esempio ufficiale del W3C

Progress: <progress id="p" max=100><span>0</span>%</progress>
<script>
var progressBar = document.getElementById('p');
function updateProgress(newValue) {
progressBar.value = newValue;
progressBar.getElementsByTagName('span')[0].textContent = newValue;}
</script>
Progress: 0%


su
 

<meter>...</meter>

L'elemento <meter> indica il valore di un indicatore quando i suoi valori di min.e max. sono conosciuti, non va confuso con progress visto sopra e di conseguenza non accetta valori in percentuale. Ci sono tre attributi per determinare la scala ed il suo valore: value, min , e max. Il valore scritto all'interno del tag serve per i browser che non supportano meter.

Per fare un esempio, si vogliono rappresentare graficamente 3 votazioni da 1 a 10

<section>
<meter min="0" max="10" value="8"> 8 di 10 </meter> Storia
<meter min="0" max="10" value="10"> 10 di 10 </meter> Geografia
<meter min="0" max="10" value="2"> 2 di 10 </meter> Matematica
</section>
8 di 10 Storia
10 di 10 Geografia
2 di 10 Matematica


su
 

<wbr>

L'elemento <wbr> (Word Break) inserito in una parola lunga indica il punto in cui è possibile ritornare a capo nel caso in cui la visualizzazione di quel testo fosse all'interno di una finestra del browser più ristretta rispetto a quella da noi prevista. Se infatti si prova a stringere o allargare la finestra del browser si noterà come i contenuti si ridispongano ogni volta per riempire tutto lo spazio, ci sono parole o frasi che vengono suddivise per il ritorno a capo in modo del tutto casuale, con <wbr> è invece possibile indicare al browser il punto in cui spezzare per tornare a capo.

<p> Nel caso di un forzato ritorno a capo, la parola http://<wbr>Web-Link.it potrebbe essere spezzata, seguendo le direttive impartite con <wbr></p>

Nel caso di un forzato ritorno a capo, la parola http://Web-Link.it può essere spezzata, seguendo le direttive impartite con <wbr>

Quindi: Nel caso di un ritorno
a capo, la parola http://
Web-Link.it
può essere spezzata


su

Nella prossima lezione vedremo i nuovi elementi per i Moduli o Forms.

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.

Forum di web-link


Andrea Bianchi