Lezione di HTML 5 Lezione 2 – Usare i nuovi tag

Nella lezione precedente abbiamo visto come impostare il nostro file in HTML 5 definendo un doctype shorted, un corretto charset e gestendo css e javascript senza enunciazione del mime.

Oggi vedremo invece alcuni tag che utilizzeremo per definire il layout della nostra pagina web.

Prima di procedere, dobbiamo però risolvere un dubbio cruciale.

I nuovi elementi dell’HTML 5 sono supportati dai browser attuali?

La maggior parte dei browser non incontriamo problemi nell’utilizzo di questi tag, normalmente il browser individua l’elemento lo aggiunge al DOM della pagina e gli attribuisce dei valori di default in base alle informazioni in suo possesso e nel caso possiamo sovrascrivere stili customizzati con un normale css.

La vera problematica è Internet Explorer che fino alla versione attuale (8) rappresenta l’elemento sconosciuto nel DOM come un nodo vuoto, rendendo impossibile definire un qualunque stile per l’elemento.

La soluzione per Internet Explorer

Prima di disperarci e tornare ad insultare per l’ennesima volta il browser di mamma Microsoft sappiate che esiste una soluzione molto semplice al problema.

Possiamo infatti pensare di creare un elemento sconosciuto a Internet Explorer prima della creazione del DOM.

Senza aggiungere l’elemento a mano nel codice possiamo utilizzare javascript per creare a priori l’elemento e permetter così di stilizzarlo con i css.

<script>document.createElement("header");</script>

Per fare in modo che il workaround funzioni, è necessario mantenere lo script nell’head della pagina, una buona norma può essere quella di inserire lo script in un commento condizionale per IE.

<!--[if IE]>
<script>document.createElement("header");</script>
<![endif]-->

Lo script creerà così un elemento <header> prima della creazione del DOM solo per IE, permettendo di stilizzare tale elemento con i css.

Una scelta migliore, HTML5 enabling script

Considerato che i nuovi elementi dell’HTML 5 sono numerosi potremmo pensare di aggiungerli a mano ma una soluzione sicuramente più comoda e più sicura è rappresentata da questo script javascript di Remy Sharp che oltre a velocizzare la realizzazione considera anche problematiche più peculiari come i css per la stampa dove i javascript non vengono eseguiti.

Al markup!

Ora che siamo certi di un funzionamento crossbrowser possiamo iniziare ad aggiungere qualche nuovo tag al nostro file.

Header

L’elemento <header> ha come scopo quello di racchiudere una porzione di codice che avrà ruolo di testata della pagina.

Per esempio

<header>
<!-- il logo ed eventuale intestazione al sito -->
</header>

Hgroup

L’elemento <hgroup> racchiude una porzione di codice composta da intestazioni

<header>
<hgroup>
<h1>Titolo del sito</h1>
<h2>Sottotitolo</h2>
</hgroup>
</header>

Article

L’elemento <article> racchiude una porzione di codice semanticamente indipendente dal resto della pagina e sì possiamo utilizzarla al posto del solito <div> di wordpress :)

<article>
<header>
<hgroup>
<h1>Titolo del sito</h1>
<h2>Sottotitolo</h2>
</hgroup>
</header>
</article>

Time

L’elemento <time> rappresenta una data di pubblicazione.

<time datetime="2010-04-21" pubdate>21 Aprile 2009</time>

L’attributo datetime accetta sia date che in aggiunta l’ora in formato leggibile per la macchina

L’attributo pubdate determina a scelta la data di pubblicazione di un contenuto specifico (se all’interno di <article>) o la data di pubblicazione della pagina se lasciato all’esterno.

Nav

L’elemento <nav> specifica una porzione di codice destinato ala navigazione per esempio la lista di un menu.

<nav>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>

Aside

L’elemento <aside> viene utilizzato per definire una porzione di codice destinata correlata al contenuto ma comunque separata come per esempio una sidebar

Footer

L’elemento <footer> definisce una porzione di codice che rappresenta di fatto il piede della pagina o del contenuto specifico.

<footer>Make with love and HTML5!</footer>

un esempio completo della pagina è il seguente.

<!doctype html>
<html>
<head>
<title>titolo della pagina</title>
<meta charset=utf-8>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<header>
<hgroup>
<h1>Titolo del sito</h1>
<h2>Sottotitolo del sito</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>
<article>
<header>
<hgroup>
<h1>Titolo dell'articolo</h1>
<h2>Sottotitolo dell'articolo</h2>
</hgroup>
</header>
<time datetime="2010-04-21" pubdate>21 Aprile 2009</time>
<p>Testo di prova</p>
</article>
<aside>contenuto relazionato ma indipendente</aside>
<footer>Make with love and HTML 5</footer>
</body>
</html>

Un’ultima nota sui tag visti in questo articolo, la loro funzione è altamente semantica ed è quindi utile sapere come utilizzarli correttamente nel contesto specifico.
Nel prossimo articolo parleremo della semantica nell’HTML 5 e dei cambiamenti che comporta.

Per oggi è tutto, tornate a trovarmi oppure abonatevi agli RSS per rimane aggornati sulle ultime novità.

Alla prossima!

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Articoli e contrassegnata con , . Contrassegna il permalink.

5 risposte a Lezione di HTML 5 Lezione 2 – Usare i nuovi tag

  1. yesWEBcan scrive:

    Con piacere noto che stai riaggiornando il sito e come sempre con contenuti davvero ottimi :D
    Bentornato e complimenti

  2. Sto da poco iniziando a studiare HTML 5 e mi rendo conto dei vantaggi che si hanno in termini di chiarezza del codice… Ottimo articolo

  3. Sergio scrive:

    domanda da niubbo.

    Sai come si possono aggiungere i tag illustrati nel tuo post a Notepad++ ?

  4. Sergio scrive:

    quindi il tag header si ripete sia come intestazione della pagina che come intestazione dei singoli articoli?

    Sembrerebbe così ad occhio parecchio ordinato poi quando si aggiungono i fogli di stile.

    Faccio delle prove…

    • Mauro Accornero scrive:

      Per Notepad, prova a dare un occhio nella cartella del programma, dentro a Notepad++/plugins/APIs dovresti avere il listone di file xml per i vari linguaggi, html.xml è quello che ti serve.

      Per header sì ha un utilizzo modulare, sembra una cosa da poco ma questo ti permette di scrivere markup modulare da copiare ed incollare nelle pagine in maniera molto più semantica, corretta e ordinata.

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>