Siete rimasti ancorati all’ormai “vecchio” Html4 e volete perfezionarvi stando al passo coi tempi? Questa guida fa al caso vostro. Impara subito tutto cio’ che cè da sapere su questo nuovo standard.
Vorrei iniziare con una considerazione iniziale (molto importante): ad oggi (15/Febbraio) il nuovo standard html non e’ compatibile completamente su tutti i browser attualmente diffusi. Per una comparazione delle principali funzionalita’ e APi supportate visitate questo link.
Tuttavia, ad oggi e’ comunque possibile creare un sito web in html5 rendendolo compatibile con tutti i browser a patto di evitare alcune funzionalita’ avanzate (come l’embed dei video e altri).
Prima di iniziare la panoramica riporto qui il sommario attuale degli articoli dedicati alla guida su Html5:
SOMMARIO GUIDA
Parte 2: Il tag Header e Hgroup
Parte 3: Come e quando usare i tag section e article
Parte 4: Creiamo un form HTML5/CSS3 con validazione e antispam
Il nuovo Doctype
La prima vera rivoluzione e’ infatti il nuovo doctype “shorten” ovvero piu’ breve rispetto al passato:
<!doctype html>
La differenza con quello attuale, e’ come vediamo, abissale:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
La struttura della pagina principale e’ rimasta invariata rispetto al passato, avremo pertanto:
<html>
<head></head>
<body></body>
</html>
Un’altra novita’ rilevante e’ la dichiarazione della codifica caretteri e della lingua, che con Html5 si sintetizza davvero molto:
<meta charset="utf-8"> <html lang="it">
Come vedete il codice risulta molto più corto e pulito rispetto al passato. Nulla di nuovo da segnalare per incorporare codice di stile CSS e Javascript, che sono rimasti invariati, sara’ tuttavia possibile omettere il tipo di documento (ad esempio: type:text-javascript)
<link href="css/fogliodistileesterno.css" rel="stylesheet"> <script src="js/javascriptesterno.js"> //e' possibile evitare di specificare il type del documento </script> //embeded interno: <script> //script javascript interno </script> <style> //tuo css interno </style>
Quali sono i nuovi Tag?
Veniamo ora alla vera rivoluzione che semplifichera’ di molto la vita dei programmatori, ovvero i nuovi Tags:
La “testa” del nostro sito
Conterra’ il codice della “testa” del documento (di solito e’ il posto destinato al logo, descrizione del sito e a volte contenente il menu), da non confondere con <head></head> della struttura principale del sito. La cosa innovativa e’ il fatto che header possa essere usato più di una volta nel sito; l’uso infatti non e’ vincolato al solo “contenitore (come avveniva per i div). Secondo gli standard il tag header andrebbe usato, ad esempio, prima del tag <article> e può contenere a sua volta altri tag, come quello hgroup (vedi sotto per maggiori info su questo tag). Vuoi approfondire i tag header e hgroup? Guarda la seconda parte della guida
N.B: Non confondete i nuovi tag con i <div>, quest’ultimi possono (e devono) essere ancora usati come contenitori “generici”.
<header>
<div id="logo"></div>
<div id="descrizione"></div>
</header>
...
</body>
// Ecco un altro uso più appropriato di <header>:
<header>
<hgroup>
<h1>Titolo articolo</h1>
<h2>Descrizione articolo blabla</h2>
</hgroup>
</header>
<article>
Inizio il testo dell'articolo blabla
</article>
Le sezioni del sito <section>
La sezione section servirà per suddividere la struttura del sito in “sezioni” con tematica differente. Come e’ logica immaginare ogni section avrà dentro di sè a sua volta articoli, header etc etc. Il w3c raccomanda di non scambiare questo tag per i <div> che continuano ad esistere anche in html5 ma come contenitori “generici”. Non abusate pertanto di questo tag. Per approfondire guarda la terza parte della guida.
Ecco un esempio:
<section id="natura">
<header id="head_natura">
<hgroup>
<h1>Perchè rispettare la natura</h1>
<h2>Scopriamo come rispettare al meglio il mondo</h2>
</hgroup>
<nav id="navigazione_articolo>
<ul>
<li>Pag1</li>
<li>Pag2</li>
</ul>
</nav>
</header>
<article>
Tuo articolo sulla natura
</article>
</section>
<section id="news_mondo">
[...]
</section>
Come vedete in questo esempio ho aggiunto anche il nuovo tag nav per creare menu’ di navigazione personalizzati (anche per gli articoli).
Il potere degli articoli con <article>
Il tag article e’ stato creato per contenere testo ( o contenuto in genere) che affronta una determinata tematica specifica. Al suo interno valgono le regole e i “vecchi” tag html4 come ad esempio <img> etc.
Rendi il tuo sito “SEO” con il nuovo tag Hgroup
Raggruppa codice composto da intestazioni, stupenda introduzione per gli appassionati e maniaci del SEO:
<header> <hgroup> <h1>Titolo SEO </h1> <h2>Sottotitolo descrizione</h2> </hgroup> </header>
Vuoi visualizzare la data? usa Time!
Visualizza la data nel documento:
<time datetime="2011-02-15" pubdate>15 Febbraio 2011</time>
Nav: il nuovo tag per i menu del vostro sito
Viene usato per specificare un codice contenente i menu’ del sito
<nav> <ul> <li><a href="#">link1</a></li> <li><a href="#">link2</a></li> </ul> NOTA: l'elenco e' facoltativo </nav>
Hai bisogno di sidebar?
Aside, indichera’ un contenuto separato dal flusso di codice della pagina, seguendo la falsa scia di WordPress, sara’ possibile pertanto creare sidebar indipendenti come nel famoso e premiato CMS.
Un classico… il footer
Similarmente all’header si e’ voluto separare anche la sezione destinata al “piede” del sito. Di solito nel footer viene indicato i dati dell’azienda, numero di telefono, e si riprende lo slogan del sito.
<footer>Tel:0000000000| W Targetweb.it</footer>
Bene ora avete un’infarinatura generale su questo nuovo standard. Potete iniziare subito a creare la vostra prima pagina Html5 mettendo insieme tutti i tag analizzati in questa breve ma (spero) chiara guida. Se avete suggerimenti o volete altri consigli postate un commento qui sotto!
A presto !
—————————————->
SOMMARIO GUIDA
Parte 2: Il tag Header e Hgroup
Parte 3: Come e quando usare i tag section e article
Parte 4: Creiamo un form HTML5/CSS3 con validazione e antispam
Ultimo aggiornamento articolo: 01/07/2011
