L’HTML5 posside dei nuovi tag da usare per ottenere comportamenti precisi sulla pagina web. In questo post, si elencano i 10 nuovi, non per importanza ma per il vantaggio funzionale che si possono otenere rapidamente senza aggiungere altro nel codice come funzioni in JavaScript o elementi da essere gestiti dai fogli di stile in CSS.

HTML5 Top Ten

⤽
1) Didascalia con un'immagine
⤽
In HTML4 quando vogliamo mostrare qualche didascalia in un’immagine, dobbiamo usare il seguente codice:
Copia codice 

<IMG src="percorso/immagine" alt="Testo alternativo per l'immagine" height=… />
Didascalia per l'immagine
<!-- Il tag di paragrafo è  usato per dare titolo -->
Questa soluzione non sembra semanticamente corretta. Ma con l’HTML5 il problema è risolto con il tag FIGURE.
Copia codice 

<FIGURE>
  <IMG src="percorso/immagine" alt="Testo alternativo per l'immagine" height=… />
  <FIGCAPTION>
    Didascalia per l'immagine
  </FIGCAPTION>
</FIGURE>
2) Non c'è bisogno dell'attributo type con i tags LINK e SCRIPT
⤽
In HTML4 usiamo i tags LINK e SCRIPT nel modo seguente:
Copia codice 

<LINK rel="stylesheet" href="percorso/file_css" type="text/css" />
<SCRIPT src="percorso/file_js" type="text/javascript" />
In HTML5 non vi è alcuna necessità di utilizzare l’attributo type. I tags di sopra possono essere utilizzati in modo seguente:
Copia codice 

<LINK rel="stylesheet" href="percorso/file_css" />
<SCRIPT src="percorso/file_js" />
3) Contenuto modificabile nel browser
⤽
L’HTML5 fornisce la funzione per rendere i contenuti ediatabili sul browser mediante attributo contenteditable.
Copia codice 

<H2>Lista di protocolli</H2>
<OL contenteditable="true">
  <LI>FTP</LI>
  <LI>HTTP</LI>
  <LI>SMTP</LI>
  <LI>POP</LI>
</OL>
4) Tipo di campo per ottenere l'e-mail
⤽
L’HTML5 offre un controllo nei forms (o moduli) per ottenere il valore del campo di tipo email, convalidando l’input di posta elettronica. Questa caratteristica non è affidabile al 100% e i vecchi browser non supportano questa funzionalità.
Copia codice 

 <FORM name="frm1" method="get" action=…>
 ⋮
   <INPUT type="email" name="email" id="ed">
 ⋮
 </FORM>
5) Tags Header e Footer
⤽
In HTML per fare un’intestazione e un piè di pagina si utilizza il tag DIV con l’attributo id come segue:
Copia codice 

 <DIV id="header">…</DIV>
 ⋮
 <DIV id="footer">…</DIV>
HTML5 fornisce nuovi tags logici per visualizzare le intestazioni e i piè di pagina.
Copia codice 

 <HEADER>…</HEADER>
 ⋮
 <FOOTER>…</FOOTER>
6) Attributo per la convalida di campi obbligatori
⤽
HTML5 fornisce un nuovo attributo “required” per controllare e convalidare un campo obbligatorio. E può essere utilizzato in due modi diversi:
Copia codice 

<INPUT type="text" name="fname" required />
…o anche…
Copia codice 

<INPUT type="text" name="fname" required="required" />
7) Tag AUDIO per mettere l'audio nella pagina
⤽
In HTML4 non esiste un modo diretto per far visualizzare e ascoltare l’audio sulla pagina. L’HTML5 fornisce tag <AUDIO> per questo scopo. Ma come identificare i formati audio dai diversi browser? Semplice. Dovremmo utilizzare tutti i seguenti formati per riprodurre l’audio con successo, a prescindere del browser.
Copia codice 

<AUDIO controls = controls autoplay = autoplay>
  <SOURCE src="music.ogg" />
  <SOURCE src="music.mp3" />
  <SOURCE src="music.wav" />
</AUDIO>
Nell’esempio abbiamo utilizzato tre formati audio .ogg, .mp3 e .wav.
.ogg è identificato da Mozilla Firefox,
.mp3 è identificato da Chrome,
.wav è identificato da Opera etc.
8) Attributo autofocus
⤽
L’HTML5 fornisce un attributo di controllo per selezionare un elemento del form, e può essere utilizzato in due modi seguenti:
Copia codice 

 <INPUT type="text" name="fname" autofocus />
…oppure…
Copia codice 

 <INPUT type="text" name="fname" autofocus="autofocus" />
9) Tag MARK per evidenziare il testo
⤽
L’HTML5 fornisce il tag <MARK> usato per evidenziare il testo.
Copia codice 

Jaipur è  conosciuta cone la <MARK>Città Rossa dell'India.</MARK>
10) Possono essere usate l'espressioni regolari
⤽
L’HTML5 fornisce un modello per inserire un’espressione regolare in un tag.
Copia codice 

<INPUT type="text" name="fname" id="txtname" pattern="[A-Z]a[a-z][0-9]" />