Gli elementi di struttura dell’HTML 5
HTML 5, come molti sviluppatori web sanno, sarà, assieme ai CSS 3, il linguaggio del futuro per la creazione dei siti web.
La creazione da parte del W3C di queste nuove specifiche si prefigge l’obiettivo di separare completamente la struttura dalla presentazione,obiettivo riuscito solo in parte dalle versioni precedenti dei linguaggi ancora in uso, (x)html & css 2.1.
Nonostante HTML 5 sia un documento in working draft,ovvero è un linguaggio in bozza in attesa della Recommandation (si presume intorno al 2020), e dato che i vari browser ad ogni release implementano nuove funzionalità, nulla ci vieta di approfondirlo e studiarlo.
Prima di avvicinarmi a descrivere i nuovi elementi strutturali di HTML 5, vorrei porre l’attenzione sul DOCTYPE e il metatag charset.
Il DOCTYPE html è una dichiarazione posta all’inizio di ogni documento web e ha doppia funzionalità:
- Predispone la pagina web per la validazione
- Attiva la modalità standard di interpretazione del documento da parte di alcuni browser
In (x)html il DOCTYPE era prolisso.Un’esempio era:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Questo doctype xhtml 1.0 Transitional(uno dei tre), veniva molto spesso copiato ed incollato nel documento senza cercare di capire cosa volesse significare,o comunque anche per chi conosceva la dichiarazione lo incollava senza redigerlo a mano.
Il DOCTYPE HTML 5 è estremamente semplice:
<!DOCTYPE html>
E’ doveroso sottolineare che questa stringa è valida solo per validare siti in html 5 in working draft.Ma quando il linguaggio verrà standardizzato, avrà il suo DTD(Document Type Definition) HTML 5 di riferimento.
Ora vediamo il metatag charset. Questo metatag viene utilizzato per definire la codifica dei caratteri in uso del documento.
Per ciò che concerneva l’(x)html era redatto cosi,all’interno dei tag <head>…</head>
<meta http-equiv=”content-type” content=”text/html; charset=”UTF-8” />
HTML 5 usa la forma più semplice da ricordare:
<meta charset=”UTF-8”>
(vale anche la chiusura a tag vuoto, ovvero: <meta charset=”UTF-8” /> ).
Si consiglia di inserire il metatag charset subito dopo l’apertura del tag <head> onde evitare che i browser analizzino il meta charset dopo i 512byte.
<HEADER>
L’elemento <header> contrassegna l’intestazione di una sezione del documento.Questo elemento può essere usato per identificare il logo o branding con un’eventuale slogan,per intenderci la tagline.In un documento possono coesistere una o più intestazioni.
<NAV>
L’elemento <nav> rappresenta un ausilio alla navigazione. Insieme al tag <ul> rappresenta il cosiddetto menu di un sito, e possono esistere più elementi <nav>, in diverse posizioni del documento.Se dovremmo richiamarli per dargli degli stili basta accompagnarli a delle class o id
<FOOTER>
L’elemento <footer>,in pratica, è l’alter ego del tag <header>,ovvero contrassegna la parte inferiore di un documento.Come per l’<header>, il documento web può avere multipli <footer>.
<SECTION>
Il tag <section> demarca un insieme di contenuti tra loro logicamente correlati.Un chiaro esempio, sono le varie sezioni di un sito web come: Home, Chi Siamo, Portfolio, Contatti. Può essere usato come demarcazione di varie sezioni di capitoli di libri. Non deve assolutamente essere usato ne come un contenitore generico da cui inserire una serie di stili o come codice di scripting, ne come contenuto disponibile via RSS, in questi casi rimane valido l’utilizzo del semplice <div>.
<ARTICLE>
Veniamo al tag <article>.Questo tag demarca un contenuto che sia, in linea di principio utilizzabile o distribuibile in modo indipendente dal resto del documento o alla solo sezione in cui è racchiuso.Si pensi all’articolo di un quotidiano online,la pubblicazione di un messaggio in un blog o forum, o il commento da parte di un utente(vedi facebook). I tag <article> possono essere annidati l’uno nell’altro,ma questo utilizzo ha senso solo se esiste una relazione tra di essi.
<ASIDE>
L’elemento <aside> si potrebbe usare come:
- Terza colonna di un sito o blog, ad esempio marcando un blogroll o “siti amici”, o banner pubblicitario.
- Enfatizzare un virgolettato o qualcosa che colpisca l’occhio dell’utente, come spesso accade nei magazine: in questo caso ha correlazione debole in modo tangenziale.
Tutti questi nuovi elementi strutturali html 5 sono elementi block.
Un’ultima considerazione,parlando di retrocompatibilità, Internet Explorer precedenti alla versione 9 non supporta questi nuovi elementi strumenti HTML 5. Un metodo semplice per essere supportati consiste in una libreria Javascript ponendola nei commenti condizionali. Qui di seguito propongo lo script html 5shiv;
<!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Qui proporrò un’esempio concreto di come utilizzare i nuovi tag strutturali HTML 5.
<!DOCTYPE html> <html> <head> <meta charset=”UTF-8” /> <title>Nuovi elementi strutturali HTML 5!!!!</title> </head> <body> <header> <h1>Intestazione</h1> </header> <nav> <ul> <li><a href=”#”>Home</a></li> <li><a href=”#”>Chi Siamo</a></li> <li><a href=”#”>Portfolio</a></li> <li><a href=”#”>Contatti</a></li> </ul> </nav> <section> <!-- QUI CONTENUTO --> <article> <!-- QUI CONTENUTO --> </article> </section> <aside> <!-- QUI CONTENUTO --> </aside> <footer> </footer> </body> </html>
CSS
header, nav, section, aside, article, footer
{ display: block;} /*per internet explorer < 9*/
nav { width: 15%;
float: left;
}
section { width: 70%;
float: left;
}
aside { width: 15%;
float: right;
}
L'Autore
Ivan Zammitti, web developer freelance.In principio indirizzato verso il graphic design, ha trovato il suo obiettivo nella vita come web developer front/back end. Specializzando in html/css/javascript/php ama condividere tecniche seguendo l'approccio open source e l'etica hacker. Il suo motto è "Code is poetry".
Add to Google
15 Commenti
Un bell’articolo. Stimola lo studio. Sopratutto in questo periodo che sto lentamente abbandonando del tutto flash! Grazie Lauryn!
ps.: procede la lettura del libro della Sofia!
Complimenti un ottimo articolo che da una panoramica sui due linguaggi che sono il futuro del web.
@aledesign.it Grazie del commento e sono felice che ti sia stato in qualche modo utile.
@Leano. Si, anche se attualmente sono in working draft è bene darci un’occhiata per non essere impreparati quando verranno standardizzati.
Bell’ articolo, conciso e schematico. E’ bello sentire parlare un pò di HTML5 anche da un sito italiano, finalmente in maniera un poco più tecnica e approfondita.
E mi sembra un ottimo approccio alla nuova tecnologia, che ahimè rimarrà ancora non troppo utilizzata (in italia) visti gli standard ancora non ufficializzati, e compatibilità varie…
personalmente uso già molto dei css3, meno di reale HTML5, però prima o poi diventerà legge
Mi sto buttando anch’io a pesce per lo studio di html5, e ho archiviato alcuni siti/strumenti e risorse utili in questo campo.
Le voglio condividere con voi, magari qualche buona fonte vi è sfuggita.
Queste risorse sono una mia personale selezione del meglio che ho trovato in rete:
1. Guida all’html5 (ing.):
http://html5forwebdesigners.com/
2. Guida consultabile via browse (ing.):
http://diveintohtml5.info/
3. Impara l’html5 in 30 giorni (ing. Video):
http://learncss.tutsplus.com/
Spero di avervi dato qualche dritta utile.
Buono studio!
Bell’articolo.. Grazie Ivan per le dritte.. io e l’html 5 non abbiamo ancora avuto il piacere di conoscerci..
ma a breve mi toccherà approfondire meglio…
@valentina grazie per il commento.eh già,pian piano bisogna cominciare.
Innanzitutto complimenti per l’articolo preciso e chiaro, io volevo solo un consiglio se possibile; sono nuovo nel settore del web design, volevo chiedervi se dopo lo studio approfondito dell’HTML 4.01 mi butto sul 5.0 oppure cosa mi consigliate?Prima XHTML o CSS?
Ciao Andrea e grazie dei complimenti.Riguardo al consiglio,ti posso sintetizzare in poche righe.Riguardo all’HTML 4.01 e (x)html non c’è tanta differenza: non ci sono tag nuovi.Cambia la sintassi del codice: ovvero (x)html è rigido, ha precise regole. Ti faccio un’esempio: in HTML4 alcune chiusure dei tag si possono omettere.
Nell’(x)html i tag vuoti devono essere chiusi ad esempio cosi:
<img src=”image.jpg” alt=”image” />
Il CSS bisogna studiarlo di pari passo con l’(x)html.Io ti consiglio comincia a studiarti html 5 giusto per approcciarti al nuovo linguaggio.Fai prove per conto proprio ma non siti in html5 finchè non verrà standardizzato.
Grazie mille Ivan sei stato esauriente! Ci risentiamo a presto
no devo correggerti ivan.
HTML 4 è quello che ammette gli stili in linea, cosa che non si fa più da tempo, ecco perchè si usa l’HXTML 1 (strict o standard poco importa), perchè puoi associare il foglio di stile css in modo più “puro” e hai la certezza di fare la cosa giusta.
studiare HTML4 lo ritengo inutile, anche ai fini dello studio del futuro HTML5.
Grazie Lauryn comunque mi sono buttato nel XHTML poi ritornerò a chiedervi consigli se posso
Ottimo articolo, grazie
ottimo! grandi
semplice e pulito, per chi è allo stato base, va benissimo…gracias.