Gerarchia dei contenuti
Ogni pagina web ha una gerarchia di contenuti (outline) uno SCHEMA simile a un sommario (per fornire informazioni agli utenti sulla struttura della pagina), costituita da sei livelli di intestazione; da h1 (più importante) a h6 (meno importante).
La sintassi HtmL prevede che le intestazioni appaiono nell'ordine, ovvero una intestazione h2 non può precedere una intestazione h1 sia perchè per impostazioni predefinita i titolo h1...h6 sono visualizzati in grassetto e con una dimensione direttamente proporzionale alla loro importanza
I titoli sono molto utili nelle pagine per dare maggior visibilità a un elemento che, solitamente, racchiude ciò che sarà possibile leggere nei paragrafi successivi.
I titoli sono automaticamente visualizzati (dall'interprete del browser) in grassetto e lasciano prima e dopo di sè, un margine considerevole in modo che risultino più leggibili:
Titolo h1
Titolo h2
Titolo h3
Titolo h4
Titolo h5
Titolo h6
La gerarchia dei contenuti non è visualizzata esplicitamente sulla pagina ma, come tutta la semantica è importante tenerne conto ed ha inoltre un suo significato per:
- motori di ricerca
- lettori di schermo
- accessibilità e usabilità
- stili e script
Nelle versioni precedenti di HtmL, gli elementi titolo h1...h6 era tutto ciò che si aveva per strutturare la gerarchia dei contenuti.
In HtmL5 invece esistono altri quattro elementi di sezionamento:
<nav> <section> <article> <aside>Che delimitano delle sezioni nella pagina web e definiscono così una gerarchia specifica al loro interno per gli elementi
h1...h6.Quindi l'esistenza (nelle versioni precedenti proibita) di più
h1 in una pagina web ora è ammessa.
Facciamo due esempi per capire meglio; primo esempio:
<body> <h1>Titolo h1</h1> <p>[...]</p> <h2>Titolo h2</h2> <p>[...]</p> <h3>Titolo h3</h3> <p>[...]</p> </body>secondo esempio:
<body> <nav> <h1>Titolo Pagina</h1> </nav> <section> <h1>Titolo della sezione</h1> <p>[...]</p> <h2>Sotto titolo della sezione</h2> <p>[...]</p> <article> <h1>Titolo dell'articolo</h1> <p>[...]</p> <h2>Sotto titolo dell'articolo</h2> <p>[...]</p> <h3>Titolo del paragrafo</h3> <p>[...]</p> </article> </section> </body>
Ancora oggi (marzo 2015) rispetto ai titoli, i browser (specialmente se non sono aggiornati) rispondono ancora in modo non appropriato
quindi attualmente è conveniente usare qualche accortezza del tipo:
<body>
<nav>
<h1>Titolo Pagina</h1>
</nav>
<section>
<h2>Titolo della sezione</h2>
<p>[...]</p>
<h3>Sotto titolo della sezione</h3>
<p>[...]</p>
<article>
<h2>Titolo dell'articolo</h2>
<p>[...]</p>
<h3>Sotto titolo dell'articolo</h3>
<p>[...]</p>
<h4>Titolo del paragrafo</h4>
<p>[...]</p>
</article>
</section>
</body>
Vi sono essenzialmente tre tag che svolgono la funzione di suddivisione del testo:
<p>, <div> e <span>.
Le differenze tra questi tag sono minime ma abbastanza determinati, nel contesto della pagina, per ciò che verrà visualizzato dal browser.
<p> Elemento block, di default ha dei margini superiori e inferiori che lo separano dal resto dei contenuti.
<div> Elemento block. Di default il testo non ha margini.
<span> Elemento in-line, serve a raggruppare il testo concettualmente
<p> sta per paragraph ed è infatti l'elemento che rappresenta la nostra concezione di paragrafo con dei margini inferiori e superiori.
<div> sta per division e definisce un blocco di testo al suo interno.
In realtà il tag <div> è, prima che un separatore di testo, un contenitore di elementi HTML.
Il suo utilizzo è spesso associato ai fogli di stile.
<span> fa da contenitore al testo presente al suo interno.
La sua utilità è evidente quando si usano i fogli di stile per differenziare dal resto, il testo in esso contenuto..
<body> <p>Questo è un paragrafo</p><br> <div>A cui seguono due blocchi di testo, questo è il primo.</div> <div>Questo è il secondo</div> <span>Questo è un contenitore in linea, niente di più</span> </body>I tag
<p>, <div> e <span> supportano sia l'attributo "class" sia "id".