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.  

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.