Leggerai questo articolo in: 3 minuti

In questo periodo mi sono capitati sotto le mani alcuni libri che trattano le attuali tematiche Html5 e Css3.

In particolare Html5 vuole dare ampio spazio ad un codice con una forte semantica, risulta quindi indispensabile fare un buon uso delle funzionalità messe a disposizione dal linguaggio.

Html5 Guida con esempi - Come utilizzare i nuovi tag html5 in modo corretto ed efficiente

Dato che Html5 è ancora agli albori, per chi come me si sta già buttando in questo mondo, alcune volte sfuggono dei particolari o non ci si ricorda il tag più adatto ad una determinata situazione.

Per questo motivo ho deciso di proporti una guida da mettere direttamente nei tuoi preferiti in cui ti mostrerò tramite esempi il corretto ed efficiente utilizzo dei nuovi tag che Html5. Vediamoli insieme…

Premessa: Do per scontato le dichiarazioni del doctype e del set di caratteri.

<!doctype html>
<meta charset="UTF-8">

Comodissime e facili da ricordare!

Il tag header

Questo tag serve per racchiudere l’intestazione di una sezione del nostro documento. Di solito contiene elementi di carattere introduttivo. Nessuno vieta di utilizzare più tag header nel nostro documento, l’importante è utilizzarli al posto giusto!

<header>
  <h1><a href="#">Come utilizzare i nuovi tag html5
   in modo corretto ed efficiente</a></h1>
 <p>Scritto da Daniele Votta</p>
 <p>Breve descrizione</p>
</header>

Il tag nav

Questo tag può contenere elementi di supporto alla navigazione, quindi ogni qualvolta abbiamo a che fare con un gruppo di link sarebbe opportuno utilizzarlo.

<nav>
  <ul>
    <li><a href="#">Collegamento 1</a></li>
    <li><a href="#">Collegamento 2</a></li>
    <li><a href="#">Collegamento 3</a></li>
  </ul>
</nav>

Il tag footer

Come per l’elemento header non esistono limitazioni sul numero di occorrenze di questo elemento. Il tag footer contiene il piè di pagina, non è necessariamente vero che deve essere in fondo al nostro documento (anche se il più delle volte sarà così).

<footer>
  <nav> ...
  </nav>
    <p>Copyright &copy; 2012 Daniele Votta</p>
</footer>

Il tag section

Questo tag deve essere utilizzato per racchiudere un insieme di contenuti che sono logicamente correlati tra loro. Non è da confondersi con il tag div, se il nostro scopo è quello di assegnare uno stile ad una determinata porzione del nosto documento il tag div assolve meglio a questo compito!

<section>
<header>
  <h1><a href="#">Come utilizzare i nuovi tag html5
   in modo corretto ed efficiente</a></h1>
   <p>Scritto da Daniele Votta</p>
    <p>Breve descrizione</p> 
  <nav> ...
  </nav>
</header>
</section>

Il tag article

Il tag article è il tag più adatto per contenere parti del documento che possono essere distribuite in modo indipendente dal contesto. Ad esempio una sezione messa a disposizione via RSS, oppure un articolo in un blog o ancora i commenti ad un articolo.

<article>
<header>
  <h1><a href="#">Come utilizzare i nuovi tag html5
   in modo corretto ed efficiente</a></h1>
   <p>Scritto da Daniele Votta</p>
    <p>Breve descrizione</p> 
  <nav> ...
  </nav>
</header>
<p>Contenuto dell'articolo
</p>
</article>

Il tag aside

Questo tag serve per “arricchire semanticamente” l’elemento in cui è annidato (di solito article). Questo tag è indicato per aggiungere informazioni ad un contenuto o meglio, specificare qualcosa arricchendo il contenuto per una questione di completezza. Quando dobbiamo approfondire o specificare meglio qualcosa nel nostro contesto questo è il tag più indicato.

<article>
 <p>Napoleone Bonaparte fu un politico
 e militare francese, nonché fondatore del Primo
 Impero francese.
 </p>
 <p>Curiosità</a>
 <aside>
  'Ufficiale d'artiglieria'', e quindi generale,
  durante la rivoluzione francese. Governò la
  Francia a partire dal 1799: fu Primo Console
  dal novembre di quell'anno al 18 maggio 1804.'
 </aside>
</article>

In altre parole il tag aside è ottimo da utilizzare quando al suo interno abbiamo contenuti che se nel caso venissero rimossi non inciderebbero negativamente sulla chiarezza e qualità di quello che abbiamo scritto.

Il tag figure e figcaption

Questi tag rispettivamente servono a contenere immagini, porzioni di codice, documenti, ecc. e una descrizione di essi.

<figure>
 <img src="test.jpg" alt="Testo da mostrare in sostituzione dell'immagine">
 <figcaption>Descrizione più approfondita
 dell immagine o grafico in questione, 
 utile per esempio agli screen reader
 </figcaption>
</figure>

Il tag hgroup

Questo tag serve per contenere intestazioni consecutive mascherandone il livello. Il classico esempio si riferisce ai tag da h1 a h6 dove si simula la situazione titolo/sottotitolo.

<hgroup>
<h1>Titolo1</h1>
<h2>Breve descrizione</h2>
</hgroup>

L’elemento hgroup permette di “forzare” l’interpretazione come un unico blocco di intestazione al fine di eliminare l’esistenza di un titolo di secondo livello.

Altri tag

Numerosi sono inoltre gli altri tag che Html5 ha introdotto per gestire ad esempio indirizzi, date, orari, la rappresentazione fonetica delle lingue, contenuti multimediali, ecc. Per una panoramica dei principali tag html5 ti rimando a questo pdf che li racchiude, ti consiglio di scaricarlo, ti sarà molto utile nei momenti di poca memoria!

Puoi scaricarlo direttamente da qui.

Utilizzi già Html5 nei tuoi progetti?
Non dimenticare di condividere l’articolo con i tuoi amici su Twitter, Facebook e Google+.
Nella speranza che questo mio articolo ti sia utile ti auguro una splendida giornata!

[adsense]