Guida Html5 – come usare i tag header e hgroup

Continuiamo come promesso, il nostro tour approfondito per scoprire tutte le novita’ sul nuovo standard html5.

Dopo la panoramica generale dell’altro giorno ho deciso di approfondire e chiarirvi meglio l’uso dei nuovi tag.

Uno dei tag fondamentali: Header

Il tag header e’ un tag molto duttile e estramamente importante nel nuovo standard. Principalmente sostituisce il “vecchio” <div id=”header”></div> , ma non solo.

Una funzione importante di questo tag e’ il poter essere usato non solo per l’intestazione della pagina contenente il logo e le informazioni aziendali, ma anche in tutti i vari articoli per contenere i titoli e  descrizioni personalizzate.

Ecco un esempio:

	        <article>
			<header>
				<h2>TITOLO ARTICOLO</h2>
				<p>ESEMPIO DI HEADER PRIMA DELL'ARTICOLO</p>
			</header>
			<h3>INTRO ARTICOLO</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

			<footer>
			<h3>About the author</h3>
				<p>INFO SULL'AUTORE</p>
			</footer>
		</article>

Come vedete ho inglobato una sezione <header> dentro una sezione <article> in questo modo ho principalmente 3 vantaggi rispetto al passato:

1. Codice piu’ pulito e veloce, apprezzato sopratutto per il coding di grandi siti.
2. SEO enanched, dentro al tag header come vedete, e’ possibile specificare diversi  titoli, ovvero : <h1> per il titolo principale, e <h2> per una breve descrizione dell’articolo; tutto questo per favorire l’indicizzazione e ottimizzare le SERP nei motori di ricerca.
3. Nei CSS ci bastera’ specificare questo tag : article header{} per dare lo stile a tutta la testata dell’articolo.

NOTA: e’ possibile specificare una classe come in html4 al tag : <article class=”articolo1″></article> per poter stilizzare e personalizzare con facilita’ ciascun articolo del nostro sito web.

Come funziona il tag Hgroup

Il tag hgroup ci permettera’ di raggruppare (come suggerisce il nome) i vari tag <h1><h2><h3>. Quasto tipo di tag può essere ripetuto più volte nella pagina, anche se per un uso appropriato se ne consiglia il posizionamento nel tag <header>. I vantaggi  sono palesi: possono essere usati per ottimizzare l’uso dell’ormai dimenticati (ma utilissimi) tag <h1>etc.. che favoriscono di molto il posizionamento negli odierni motori di ricerca come Google e BING.

Ecco un esempio di hgroup efficace:

<header>

    <hgroup>

        <h1>Titolo, forte e contenente almeno 2 parole chiave</h1>

           <h2>Descrione del titolo come avviene nei giornali</h2>

    </hgroup>

</header>

<article>

//il tuo articolo qui

</article>

A breve analizzeremo gli altri tag del nuovo standard, se avete idee o suggerimenti non esitate  a lasciare un vostro commento!