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
Creare URL corto utilizzando jQuery e Ajax
11% JQuery
Molti tutorial disponibili sul web per la creazione di URL brevi utilizzano lo script sul lato server, questo script funziona sul lato client. È facile e ha soli 5 righe di codice per chiamare le API di Bit.ly in modo asin…
Selettori CSS definiti
8% Css
Se avete appena iniziato con i CSS, è bene avere una comprensione fondamentale di ciò che si intende quando ci riferiscono ai selettori CSS. In questo post farò una breve descrizione dei più noti selettori CSS insieme ad a…
Il framework jQuery e jQuery-plugins
7% Plugins
jQuery è una ben nota libreria Javascript Web 2.0 light-weight cross-browser, sviluppato da un team guidato da John Resig. jQuery è costruito sulla cima di Sizzle, che è un motore per i selettori CSS scritto in Javascript …
Allineare immagini e testo con i CSS
7% 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-…
Interazione con i campi di un form con CSS
7% Css
Grazie al supporto da parte dei maggiori browser dei CSS Selectors versione 2.1, alcuni semplici effetti grafici possono essere proposti tramite fogli di stile in maniera leggera. In questo post vedremo come evidenziare il…