Attualmente, i documenti HTML sono principalmente strutturati tramite elementi div. La formattazione e il posizionamento di questi container avviene solitamente tramite CSS. Per software come gli screenreader, questo approccio è ovviamente inutile in quanto non riescono a riconoscere quale significato abbiano alcuni contenuti. Ciò dovrebbe cambiare grazie ai nuovi elementi di strutturazione.
Due dei nuovi elementi più importanti sono section e article, che sono al centro di questo tutorial.
Segnalare un articolo
Attraverso l'elemento article è possibile etichettare testi (discussioni, articoli di giornale, ecc.) come articoli. L'esempio seguente mostra la definizione di un articolo tipico.
<article> <h1>Creare app Web (Parte 09): jQuery mobile (1)</h1> <p>>jQuery è senza dubbio uno dei framework JavaScript più conosciuti. Su siti web "classici", jQuery viene già utilizzato innumerevoli volte...</p> ... </article>
Grazie all'elemento article è possibile strutturare semanticamente i vostri contenuti.
Come potrebbe apparire questo, è possibile mostrarlo molto bene tramite un blog.
<article>
<header>
<h1>Creare app Web (Parte 09): jQuery mobile (1)</h1>
<p>>Pubblicato il: <time pubdate="pubdate">24.05.2014</time></p>
</header>
<p>>jQuery è senza dubbio uno dei framework JavaScript più conosciuti. Su siti web "classici", jQuery viene già utilizzato innumerevoli volte...</p>
...
<footer>
<p><small>Copyright di PSD-Tutorials.de</small></p>
</footer>
</article>
In questo esempio, all'interno dell'elemento article viene effettuata la tipica suddivisione in testa, corpo e piè di pagina. E una tale suddivisione è spesso riscontrabile nei blog.
Creare sezioni
Proseguiamo con l'elemento section. L'elemento section suddivide la pagina in varie sezioni. Queste possono essere ad esempio sezioni, capitoli, schede, ecc. Attraverso section è possibile separare in modo logico sezioni come introduzione e notizie attuali.
Il section serve a suddividere i contenuti secondo considerazioni effettive del contenuto. A proposito della differenza tra section e div, tornerò a discuterne alla fine di questo tutorial.
L'esempio seguente mostra una struttura di blog tipica. Tuttavia, questa struttura contiene qualcosa di ulteriore, che è effettivamente necessario in molti blog, ovvero un'area commenti. Questa area commenti è definita all'interno di un elemento section. I singoli commenti all'interno della sezione section sono poi racchiusi in un elemento article ciascuno.
<article>
<header>
<h1>Creare app Web (Parte 09): jQuery mobile (1)</h1>
<p>Pubblicato il: <time pubdate="pubdate">24.05.2014</time></p>
</header>
<p>>jQuery è senza dubbio uno dei framework JavaScript più conosciuti. Su siti web "classici", jQuery viene già utilizzato innumerevoli volte...</p>
...
<section>
<h2>Commenti</h2>
<article>
<header>
<h3>Commentato da: Newsfriend</h3>
<p><time pubdate datetime="2024-10-05T20:10-07:00">Un'ora fa</time></p>
</header>
<p>Grazie per il tutorial!</p>
</article>
<article>
<header>
<h3>Commentato da: Becker</h3>
<p><time pubdate datetime="2024-10-05T20:10-07:00">Due ore fa</time></p>
</header>
<p>Grandioso! Mi aiuta molto.</p>
</article>
</section>
</article>Qui ancora una volta l'avvertimento che tornerò a parlare dettagliatamente degli elementi utilizzati qui come header, footer, ecc. In questo punto, solo tanto: Tramite questi elementi è possibile suddividere i contenuti in testa e piè di pagina, consentendo quindi una ulteriore strutturazione logica dei documenti.
Un altro esempio per chiarire ulteriormente la combinazione di elementi article e section. Infatti, è possibile utilizzare l'elemento section per suddividere un articolo in aree di contenuto logico, ognuna con le proprie intestazioni.
<article>
<h1>Sviluppo app</h1>
<p>Qui scoprirete come creare app Web.</p>
<section>
<h2>Creare app Web (Parte 09): jQuery mobile (1)</h2>
<p>jQuery è senza dubbio uno dei framework JavaScript più conosciuti.</p>
</section>
<section>
<h2>Creare app Web (Parte 08): L'Introduzione veloce a jQuery</h2>
<p>JavaScript è una cosa fantastica per i siti web, visto che permette di fare un sacco di cose interessanti.</p>
</section>
</article>
Inoltre, è possibile definire elementi article all'interno di un elemento section. Un esempio tipico potrebbe essere un'area commenti, come già indicato. È anche possibile suddividere la sezione nei temi trattati nel blog.
Anche qui un esempio appropriato:
<section>
<h1>Sviluppo di app</h1>
<article>
<h2>Creazione di web app (Parte 09): jQuery mobile (1)</h2>
<p>jQuery è senza dubbio uno dei framework JavaScript più conosciuti.</p>
</article>
<article>
<h2>Creazione di web app (Parte 08): Introduzione rapida a jQuery</h2>
<p>JavaScript è utile per i siti web, in quanto consente di fare molte cose interessanti.</p>
</article>
</section>
Inoltre, in un elemento section possono essere contenuti altri elementi section. Le annidamenti sono quindi ammessi. Ecco un esempio:
<section>
<h1>PSD-Tutorials.de</h1>
<section>
<h2>Benvenuti</h2>
<p>>Siamo felici di...</p>
</section>
<section>
<h2>Tutorial</h2>
<p>>Qui troverete i nostri ultimi tutorial...</p>
</section>
<aside>
<p>Contatti</p>
</aside>
</section>
<footer>
<p>(c) 2014 PSD-Tutorials.de</p>
</footer>
Questa nidificazione di sezioni produce la seguente struttura:
1. PSD-Tutorials.de
1.1 Benvenuti
1.2 Tutorial
1.3 Contatti
- (c) 2014 PSD-Tutorials.de
Queste strutture sono anch'esse possibili.
La differenza tra div, article e section
Ammettiamolo, non è affatto semplice capire la distinzione tra div, article e section. In effetti, l'elemento article è stato originariamente definito per la strutturazione dei post del blog. L'elemento section è effettivamente posizionato un livello al di sotto di article. All'interno dell'elemento section dovrebbe sempre essere definito un titolo. Anche se non viene effettivamente definito un titolo, teoricamente dovrebbe essere possibile specificare un titolo all'interno dell'elemento interessato.
Ovviamente gli elementi div non sono banditi nemmeno in HTML5, ma dovrebbero essere comunque utilizzati. Sono interessanti, ad esempio, quando si tratta di raggruppare elementi.
Infine, un'altra nota riguardante gli effetti visivi degli elementi finora presentati. In realtà, per una formattazione adeguata, è necessario utilizzare CSS. L'uso normale degli elementi mostrati non produce effetti nel browser. State strutturando qui solamente contenuti semanticamente. Tutto ciò che ha a che fare con l'aspetto visivo viene regolato tramite fogli di stile.
