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:
<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.
<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:
<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:
<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.
<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à.
 <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:
 <DIV id="header">…</DIV>
 ⋮
 <DIV id="footer">…</DIV>
HTML5 fornisce nuovi tags logici per visualizzare le intestazioni e i piè di pagina.
 <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:
<INPUT type="text" name="fname" required />
…o anche…

<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.
<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:
 <INPUT type="text" name="fname" autofocus />
…oppure…
 <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.
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.
<INPUT type="text" name="fname" id="txtname" pattern="[A-Z]a[a-z][0-9]" />
Similari
Guida allo Zend Framework
436% Zend
Zend Framework è un framework open source per PHP. Zend Framework separa la logica e le azioni usando il pattern MVC (Model View Controller). Cosa è lo Zend Framework? Framework per la costruzione di siti web più veloci e …
Python per tutti
121% Python
Python para todos è un libro sulla programmazione in Python. Questo è un tutoriale su Python adatto a tutti i livelli e si può scaricare in pdf gratuitamente in spagnolo. Il tutoriale di Python…
Regole fastidiose ai web designer
99% Css3
Per la maggior parte dei webdesigner, lo stile di un sito web con i CSS è abbastanza semplice. Fintanto che il codice HTML è semantico e i div e le classi sono progettati in modo sensibile, il processo di sviluppo dovrebbe…
Fondamentali di jQuery
95% JQuery
jQuery stà diventando rapidamente uno strumento che ogni sviluppatore web di interfacce dovrebbe conoscere. Lo scopo di questo libro è di fornire una panoramica della biblioteca, in modo che qu…
Allineare immagini e testo con i CSS
33% Css
Quando si inserisce un’immagine o del testo in un documento HTML, per default il testo viene allineato verticalmente al basale (baseline), questa è la linea di base del testo e l’immagine. Usando le proprietà CSS vertical-…