Headings e content model

I tag dall’h1 all’h6 sono utilizzati per la titolazione gerarchica.

Mentre nelle definizioni precedenti dello standard, la definizione di importanza e quindi di assegnamento del livello di h* era globale, a livello di documento, nell’html5 fa riferimento alle sezioni. Utilizziamo l’esempio riportato dalle API del w3c

<!DOCTYPE HTML>
<title>The Tax Book (all in one page)</title>
<h1>The Tax Book</h1>
<h2>Earning money</h2>
<p>Earning money is good.</p>
<h3>Getting a job</h3>
<p>To earn money you typically need a job.</p>
<h2>Spending money</h2>
<p>Spending is what money is mainly used for.</p>
<h3>Cheap things</h3>
<p>Buying cheap things often not cost-effective.</p>
<h3>Expensive things</h3>
<p>The most expensive thing is often not the most cost-effective either.</p>
<h2>Investing money</h2>
<p>You can lend your money to other people.</p>
<h2>Losing money</h2>
<p>If you spend money or invest money, sooner or later you will lose money.
<h3>Poor judgement</h3>
<p>Usually if you lose money it's because you made a mistake.</p>

See the Pen xwgpvY by Mariachiara Pezzotti (@merissimissima) on CodePen.

In html4 il peso di h1, valeva per l’intero documento, così come tutti gli h2 avevano lo stesso peso, e via dicendo. Questo approccio è molto funzionale se pensiamo al web come un libro, nel quale i contenuti sono strutturati a capitoli, identificando rigidamente titoli, sottotitoli e via dicendo. Diversamente è poco utile se pensiamo ad un web “a componenti” dove gli stessi contenuti (con lo stesso markup) possono comparire in zone differenti. In html5 combinando section o articles con i tag di heading possiamo dare un peso relativo ai componenti, mantenendo la struttura generale della pagina:

<!DOCTYPE HTML>
<title>The Tax Book (all in one page)</title>
<h1>The Tax Book</h1>
<section>
 <h1>Earning money</h1>
 <p>Earning money is good.</p>
 <section>
  <h1>Getting a job</h1>
  <p>To earn money you typically need a job.</p>
 </section>
</section>
<section>
 <h1>Spending money</h1>
 <p>Spending is what money is mainly used for.</p>
 <section>
  <h1>Cheap things</h1>
  <p>Buying cheap things often not cost-effective.</p>
 </section>
 <section>
  <h1>Expensive things</h1>
  <p>The most expensive thing is often not the most cost-effective either.</p>
 </section>
</section>
<section>
 <h1>Investing money</h1>
 <p>You can lend your money to other people.</p>
</section>
<section>
 <h1>Losing money</h1>
 <p>If you spend money or invest money, sooner or later you will lose money.
 <section>
  <h1>Poor judgement</h1>
  <p>Usually if you lose money it's because you made a mistake.</p>
 </section>
</section>

See the Pen meRQwR by Mariachiara Pezzotti (@merissimissima) on CodePen. I risultati sono identici, poichè l’algoritmo che genera l’outline comprende il peso dei vari h1, in base ai contesti nei quali sono inseriti.