Div vs Article vs Section e Span

Div vs Artcle vs Section

Le indicazioni del w3c rispetto al tag div sono chiare: il tag div non ha di per sè un significato particolare, è un contenitore che rappresenta i suoi figli. Va utilizzato con attributi globali per manipolarne il contenuto a livello di stile o a livello di codice.

Il tag div dovrebbe essere utilizzato quando non è possibile utilizzare nessun altro tag per rappresentare il suo contenuto, o quando diventa un elemento indispensabile per realizzare una determinato layout grafico (queste problematiche vi si chiariranno quando affronterete i fogli di stile 😉 ). In tutti gli altri casi, il suggerimento è di utilizzare article o section.

Ma quindi se uso div è sbagliato? E quando usare article? O section?

Section o article sono anch’essi dei contenitori. La differenza riguarda esattamente il loro contenuto e il contesto nel quale sono inseriti.

  • Section raggruppa un insieme di elementi, attorno allo stesso tema
  • Article identifica un’unità atomica di contenuto
  • Div è un raccoglitore di elementi generico, solitamente raccolti nell’ottica di implementazione di layout grafico o di struttura

Section e Article possono essere utilizzati congiuntamente: è possibile avere una section in cui sono contenuti diversi article inerenti ad un argomento, o un article a sua volta diviso in varie section.

Il tag Span

Il tag span è il corrispettivo del tag div, ma in versione in-line. Il principale utilizzo è per identificare porzioni di testo.

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.