Il sito per imparare gratuitamente a fare pagine Web

Nuovi Elementi HTML5

Questa guida è stampabile in modo agevole dalla sua apposita voce: "Download PDF", presente nel menù laterale:
 


Andrea Bianchi © www.web-link.it   Guida HTML 5 - Ver. 1.1.1 

Prima di passare in rassegna alcuni nuovi elementi semantici di HTML5 vorrei soffermarmi su questo termine "semantico" che a prima vista sembra non sortire alcun effetto pratico, ed infatti con o senza questi nuovi elementi l'aspetto estetico delle nostre pagine web non č cambiato molto, in alcuni casi direi proprio per niente. Ma allora a che cosa serve rispettare la semantica di un elemento e perchč a questa viene data tanta importanza?

Chi fa pagine web sa che fino ad oggi soltanto gli elementi <h1> ... <h6> usati per i titoli, creavano strutture a blocchi a livello di DOM, dando alla pagina web una struttura visibile anche da sistemi diversi dai normali browser, come ad esempio quelli usati dai non vedenti. L'introduzione dei CSS ha permesso di rivoluzionare questa struttura potendo assegnare ai vari elementi attributi tali da renderli a loro volta blocchi o comunque elementi diversi da quello per i quali erano stati pensati, e cosė ognuno ha impaginato dati come meglio credeva, l'aspetto estetico era pių che gradevole e nessuno si č mai preoccupato di andare oltre. HTML5 invece si preoccupa proprio di questo aspetto, creare nuovi elementi per definire blocchi che un browser č in grado di interpretare come tali a prescindere dagli attributi impostati nel suo foglio di style.

 

<section>...</section>

L'elemento section demarca un insieme di contenuti fra di loro correlati. Rappresenta una sezione generica del documento.

Viene dunque usato per i capitoli, le varie sezioni di una tesi, la stessa home page potrebbe essere divisa in sezioni: introduzione, notizie, contatti.

<article>
<hgroup>
<h1>Web-Link</h1>
<h2>tutto per fare web</h2>
</hgroup>
<p>Guide utili per fare pagine web.</p>
<section>

<h1>Guida HTML</h1>
<p>La guida di riferimento per il linguaggio html</p>

</section>
<section>

<h1>Guida CSS</h1>
<p>Una valida integrazione ad html.</p>

</section>

</article>


su
 

<nav>...</nav>

L'elemento <nav> demarca una serie di link utili per la navigazione.

Viene dunque usato per raccogliere blocchi di links come i menų o qualsiasi altro collegamento utile alla navigazione, non necessariamente tutti i links devono essere contenuti in questo tag.

<nav>

<ul>
<li><a href="intro.html">Introduzione guida html5</a></li>
<li><a href="tags.html">I nuovi elementi di html5</a></li>
<li><a href="obsoleti.html">Gli elementi deprecati in html5</a></li>
</ul>

</nav>


su
 

<article>...</article>

L'elemento <article> demarca un articolo, un'informazione, un contenuto che sia indipendente dal resto del documento.

Viene dunque usato per racchiudere tutte quelle informazioni che possono essere indipendenti dal resto del documento e come tali essere riprese e riutilizzate per conto proprio.

<article>

<header>
<h1>Guida HTML5</h1>
<p>Di Andrea Bianchi - web-link.it</p>
</header>
<aside>
<p>visita il forum di web-link per maggiori informazioni</p>
</aside>

</article>
<article>

<header>
<h1>Guida CSS</h1>
<p>Di Andrea Bianchi - web-link.it</p>
</header>
<aside>
<p>visita il forum di web-link per maggiori informazioni</p>
</aside>

</article>


su
 

<aside>...</aside>

L'elemento <aside> demarca un contenuto di poca importanza rispetto al documento, se ne potrebbe fare a meno senza incidere col resto del documento stesso.

Viene dunque usato per note o commenti non importanti, per sezioni laterali, per annunci pubblicitari e qualsiasi altro contenuto che si ritiene slegato dal contenuto principale della pagina stessa.

<aside>

<p>visita il forum di web-link per maggiori informazioni</p>

</aside>


su
 

<hgroup>...</hgroup>

L'elemento hgroup funge da contenitore per due o pių elementi di intestazione correlati fra loro.

Viene dunque usato per raggruppare pių elementi di intestazione quando ci sono diversi livelli di titoli dal primo al sesto livello: <h1>...<h6> come sottotitoli, ecc. assegnando cosė una sola intestazione di titolo pių importante.

<hgroup>

<h1>Guida HTML5</h1>
<h2>Di Andrea Bianchi - web-link.it</h2>

</hgroup>


su
 

<header>...</header>

L'elemento header demarca l'intestazione di una sezione.

Viene dunque usato per elementi introduttivi o di supporto al documento, puō essere ripetuto dal momento che in un documento possono esserci pių sezioni e di conseguenza pių intestazioni, basti pensare ad un blog, per esempio, dove ogni notizia ha la sua intestazione.

<header>

<h1>Guida HTML5</h1>
<p>Di Andrea Bianchi - web-link.it</p>

</header>


su
 

<footer>...</footer>

L'elemento footer demarca il pie di pagina o di sezione.

Viene dunque usato per parti di codice che di solito si inseriscono a fine pagina ma anche a fine sezione nel caso in cui una pagina avesse pių di una sola sezione. Per esempio le note sull'autore, i links di riferimento, ecc.

<footer>

<p>© Andrea Bianchi Web-Link.it 1997 ~ 2013</p>

</footer>


su

Oltre a questi ci sono altri nuovi tags introdotti da HTML5, li vediamo nella lezione successiva.

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.

Forum di web-link


Andrea Bianchi