I cookie permettono il funzionamento di alcuni servizi di questo sito. Utilizzando questi servizi, accetti l'utilizzo dei cookie da parte nostra. [ Leggi dettagli ]

Link sponsorizzati

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 

Prima di andare oltre, vai a dare un'occhiata a 5-10 dei tuoi siti web preferiti. Avranno contenuto, funzionalità e aspetto notevolmente differenti ma tutti avranno elementi comuni. Esistono pochi siti che, almeno vagamente, non seguono lo schema seguente:

  • Header (o testata) nella parte superiore della pagina, generalmente comprendente l'intestazione e/o un logo aziendale.
  • Colonna contenuto principale (o Main), contiene il contenuto principale della pagina a cui sei interessato.
  • Una o più barre laterali (o Sidebar), vengono inseriti contenuti correlati alla pagina (ad esempio link correlati, informazioni "carrello" di un e-commerce, ecc ...).
  • Menu di navigazione (o Nav) che attraversa la pagina in alto o nella parte bassa laterale della pagina. Spesso disponibile anche in una barra laterale, fa parte dell'intestazione oppure la troviamo subito dopo.
  • Un piè di pagina (o Footer) che attraversa la parte inferiore del sito e contiene informazioni secondarie come le informazioni di copyright e contatti.

Per capire meglio di cosa stiamo parlando, prendiamo in esame il sito web Conquest of Steel (attualmente non più disponibile):

Struttura HTML 1

 
Potremmo dividere il sito web nelle sezioni succitate, in questo modo:

Struttura HTML 2

 
Ogni sezione può contenere innumerevoli diversi elementi annidati, ad esempio un piè di pagina potrebbe includere un elenco di link, un paio di paragrafi e un'immagine. Ma come facciamo a marcare in modo univoco ciascuna sezione per poi formattarle con i CSS? Diamo uno sguardo a quanto segue.

HTML4 contiene due elementi contenitori generici:

  • Il tag <div> è un contenitore di tipo blocco utilizzato per dividere le differenti sezioni di un layout.
  • Il tag <span> è un contenitore generico che può essere annidato (ad esempio) all’interno dei <div> e viene molto utilizzato soprattutto insieme ai fogli di stile, ad esempio per definire delle aree di testo particolari.

Nota che gli elementi <div> e <span> non hanno un aspetto particolare fino a quando non vengono formattati con i CSS o manipolati con JavaScript. Non hanno semantica e l'unico modo per identificarli è l'utilizzo di classi o id.

In HTML4 il layout del sito web che abbiamo esaminato sopra può essere così marcato:

Struttura HTML 3

 
La struttura della pagina web è simile a quanto segue:

<body>

<div id="header">
<!-- contenuto header -->
</div>

<div id="nav">
<!-- menu navigazione -->
</div>

<div id="sidebar1">
<!-- contenuto sidebar 1 -->
</div>

<div id="main">
<!-- contenuto principale -->
</div>

<div id="sidebar2">
<!-- contenuto sidebar 2 -->
</div>

<div id="footer">
<!-- contenuto footer -->
</div>

</body>


Si, è così semplice davvero. Ovviamente, occorre formattare in modo appropriato il layout con i CSS affinchè ogni elemento venga disposto come desideriamo. Ricorda che è essenziale la struttura poichè è impossibile da formattare un sito web non ben strutturato.

La struttura finora utilizzata in HTML4 è corretta ma semanticamente potrebbe essere migliorata:

Gli esseri umani sono in grado di distinguere ciascuna porzione ma le macchine non possono. Il browser non risconosce le differenze tra i vari div (come intestazione, piè di pagina, ecc ...) ma semplicemente li vede come diversi div. Quindi, sorge spontanea una domanda: "Non sarebbe più utile che i browser e lettori di schermo siano in grado di identificare esplicitamente il menu di navigazione in modo che venga trovato più facilmente da un utente non vedente, o che le diverse notizie di blog siano facilmente distinguibili da tutto il resto del contenuto (ad esempio per i feed RSS) senza alcuna programmazione extra?

Per risolvere alcuni di questi problemi uno sviluppatore ricorre all'utilizzo di codice aggiuntivo ma la soluzione sarà adatta esclusivamente ai propri siti web e differente da quella applicata da un altro sviluppatore della stessa nazionalità. Il problema viene notevolmente amplificato a livello internazionale poichè ogni sviluppatore utilizzerà differenti nomi di classi e id.

Dunque si è pensato di definire per tutti un insieme coerente di elementi da utilizzare per i blocchi strutturali comuni presenti in ogni sito web, ed è proprio questo quello che viene risolto con HTML5.

I nuovi elementi HTML5 che tratteremo in questo articolo sono:

  • <header>: utilizzato per contenere l'intestazione di un sito (ausili alla navigazione e/o elementi introduttivi).
  • <nav>: contiene il menu di navigazione o altre funzionalità di navigazione per la pagina.
  • <section>: rappresenta una sezione generica di un documento o applicazione.
  • <aside>: rappresenta una sezione di una pagina costituita da informazioni che sono marginalmente correlate al contenuto dell’elemento padre che la contiene, e che potrebbero essere considerate distinte da quest’ultimo.
  • <article>: rappresenta una sezione autonoma in un documento, pagina, applicazione o sito e che è, in linea di principio, indipendentemente distribuibile o riutilizzabile, ad esempio una notizia.
  • <footer>: contenere in genere informazioni sulla sezione che lo contiene, ad esempio i dati di chi ha scritto i contenuti, collegamenti ai documenti correlati, i dati di copyright, ecc ...

Parleremo di ciascun elemento in modo più approfondito più avanti, per ora diamo un'occhiata a come il nostro sito web di esempio potrebbe apparire, se strutturato utilizzando gli elementi HTML5:

Struttura HTML 4

 
Il codice è quello che segue:

<body>

<header>
<!-- contenuto header -->
</header>

<nav>
<!-- menu navigazione -->
</nav>

<section id="sidebar1">
<!-- contenuto sidebar 1 -->
</section>

<section id="main">
<!-- contenuto main -->
</section>

<aside>
<!-- contenuto aside -->
</aside>

<footer>
<!-- contenuto footer -->
</footer>

</body>


Analizziamo alcuni degli elementi HTML5 in modo più dettagliato.


<section>

Il tag <section> rappresenta una sezione generica di un documento o applicazione. L’elemento <section>, in questo contesto, individua un raggruppamento tematico di contenuti,ed in genere contiene un titolo introduttivo.

Vediamo quindi quali sono i punti fondamentali da ricordare riguardo il suo utilizzo:

  • l’elemento <section> non deve essere utilizzato in sostituzione del <div> per impostare graficamente la pagina; inoltre è fortemente consigliato utilizzare i <div> anche quando risultano più convenienti per gli script;
  • l’elemento <section> non deve essere preferito all’elemento <article> quando i contenuti possono essere ripubblicati anche su altri siti;
  • l’elemento <section> e l’elemento <article> non sono indipendenti ed esclusivi: possiamo avere sia un <article> all'interno di un <section> che viceversa.


<article>

Il tag <article> si adatta ad essere un elemento specifico di <section> in quanto: rappresenta una sezione autonoma in un documento, pagina, applicazione o sito e che è, in linea di principio, indipendentemente distribuibile o riutilizzabile.

Meglio utilizzare l’elemento article anziché l’elemento section quando questo elemento assolve la funzione di syndication, ovvero può essere considerato alla stregua di un item di RSS o di un entry di ATOM.

Il contenuto di <article>, ha dunque un senso autonomo, semanticamente parlando. Il contenuto quindi ha senso indipendentemente dal suo contesto, cioè anche quando tutti gli elementi circostanti possono essere eliminati.

Nel nostro esempio:

<section id="main">

<article>
<!-- first blog post content goes here -->
</article>
    
<article>
<!-- second blog post content goes here -->
</article>
    
<article>
<!-- third blog post content goes here -->
</article>

</section>


È possibile utilizzare <section> per dividere l’articolo in gruppi logici con le intestazioni:

<article>

<h1>Titolo</h1>
<p>Section in article</p>
 
<section>
<h2>Pro</h2>
<p></p>
</section>
 
<section>
<h2>Contro</h2>
<p></p>
</section>
     
</article>


<header> e <footer>

Come già detto in precedenza, lo scopo degli elementi <header> e <footer> è quello di avvolgere l'intestazione e il piè di pagina dei contenuti. Nel nostro esempio in particolare, l'elemento <header> contiene l'immagine del logo e il <footer>  contiene un avviso di copyright ma volendo si potrebbero aggiungere contenuti più elaborati. Inoltre nota che è possibile avere più di un elemento header e footer per ogni pagina - così come l'header e footer principali del documento finora incontrati si potrebbe anche avere gli elementi <header> e <footer> nidificati all'interno di ogni tag <article>, in quel caso sono da interdersi collegati esclusivamente a quell'articolo. Analizziamo l'esempio seguente:

<article>
<header>
</header>

<section id="introduction">
</section>
 
<section id="content">
</section>
 
<section id="summary">
</section>
 
<footer>
</footer>
</article>


<nav>

Il tag <nav> rappresenta una sezione di una pagina che contiene link (collegamenti) ad altre pagine o a parti interne dello stesso documento; quindi, in breve, una sezione contenente link di navigazione.

Ricorda che:

  • va utilizzato solo nelle sezioni che sono costituite da grandi blocchi di navigazione;
  • i link a pie’ di pagina e le breadcumb non devono essere inseriti in una sezione <nav>;
  • l’elemento <nav> non sostituisce i link inseriti in elementi come gli <ul> o gli <ol> ma deve racchiuderli.


<aside>

L’elemento <aside> rappresenta una sezione di una pagina costituita da informazioni che sono marginalmente correlate al contenuto dell’elemento padre che la contiene, e che potrebbero essere considerate distinte da quest’ultimo. E' facile immaginare l’utilità del tag <aside> semplicemente pensandolo come un contenitore di approfondimento in cui possiamo inserire gruppi di link, pubblicità, bookmark e così via.


Dove si collocano i <div>?

Così, con tutti questi grandi nuovi elementi da utilizzare nelle nostre pagine, gli umili giorni dei <div> sono finiti? NO. In realtà, il <div> ha ancora un uso perfettamente valido. Bisogna utilizzarlo quando non c'è nessun altro elemento più adatto a disposizione per raggruppare i contenuti. Un esempio comune è utilizzare un <div> per avvolgere tutto il contenuto della pagina per poi usare i CSS per centrare il tutto nella finestra del browser oppure applicare un'immagine specifica di sfondo per l'intero contenuto.


Supporto elementi HTML5

Attualmente non è tra i migliori il supporto dei browser per i nuovi elementi strutturali HTML5 ma prima di cominciare a gridare "perché sprecare il mio tempo con tutta questa spazzatura?" continua a leggere. Il supporto dei browser è l'ideale ma in realtà non ha molta importanza per i nostri scopi.

Il modo in cui gli elementi lavorano in generale tra HTML 4 e HTML 5 è esattamente lo stesso, l'unica cosa che cambia sono i nomi degli elementi che sono diversi.

Sappi che se inserisci un elemento in una pagina web che il browser non riconosce, di default viene considerato come un tag <span>. La maggior parte degli elementi HTML5 che abbiamo illustrato in questo articolo si comportano come elementi di tipo blocco, quindi il modo più semplice per farli comportare correttamente nei browser più vecchi è indicare esplicitamente la regola display: block; nel CSS. Tale regola puoi inserirla nell'header della stessa pagina o in un file CSS esterno:

article, section, aside, hgroup, nav, header, footer, figure, figcaption {
  display: block;
}


Questo risolve tutti i vostri problemi per tutti i browser tranne uno. Le vecchie versioni di Internet Explorer si rifiutano di applicare regole agli elementi sconosciuti ma questo può essere risolto inserendo una linea di codice JavaScript nella testa del documento per ogni elemento, in questo modo:

<script>
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('hgroup');
document.createElement('nav');
document.createElement('header');
document.createElement('footer');
document.createElement('figure');
document.createElement('figcaption');
</script>

Ho scritto e condiviso questo articolo su WORCOM, fallo anche tu. Invia ora un nuovo articolo!
Autore: Antonio Liggieri
Esperto di computer e in sicurezza informatica, webmaster, webdesigner, webdeveloper e webmarketer. Sono il fondatore di WORCOM. Amo l'informatica, le arti marziali e il bodybuilding.


Ho anche scritto:

Link sponsorizzati