Parte 2
Un sintomo della divitis è l'utilizzo di div al posto degli elementi appropriati, come h1, p, header, footer, etc...
Div viene usato come un tag multi-purpose.
Si dimentica in questo modo cos'è l'HTML, ovvero un linguaggio di markup per descrivere la struttura semantica di un testo.
<div class='main'>
<div class='header'>
<div class='title'>
<h1>Title</h1>
</div>
</div>
<div class='navigation'>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
<header>
<h1>Title</h1>
</header>
<nav>
<ul>
<li>...</li>
<li>...</li>
</ul>
</nav>
L'HTML descrive la struttura di un documento, e lo standard moderno ci mette a disposizione una lunghissima lista di tag che descrivono la semantica del nostro documento, come header, footer, nav, etc...
Dovremmo cercare di costruire documenti affidandoci il più possibile a tag espressive, che ne descrivano la struttura con informazioni utili per motori di ricerca e screen reader.
Solitamente contiene titolo e sottotitolo, links, etc... È la testa di un documento, o di una sezione, o di un articolo.
Elemento collocato alla fine della sezione che va a descrivere. Solitamente può contenere:
Unico in tutto il documento, contiene il contenuto principale che andiamo a rappresentare.
Non dovrebbe contenere informazioni come link di navigazioni, etc...
Non dovrebbe essere contenuto in altri tag minori.
Elemento il cui contenuto dovrebbe essere inteso come a parte, o a fianco, del contenuto principale. Spesso non viene letto da screen reader.
Spesso usato per contenere una barra laterale di navigazione.
Contiene una barra di navigazione. Potrebbe non essere unico nel documento.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Rappresenta una generica sezione del documento, che racchiude contenuti omogenei per tema e importanza.
Ogni sezione dovrebbe contenere in testa almeno un titolo h1 (e a seguire h2, h3...) che la descriva.
Da non confondere con un div.
Rappresenta una composizione a se stante nel documento, come un blogpost o un articolo di giornale. L'article dovrebbe avere un header o un h1.
<article class="film_review">
<header>
<h2>Jurassic Park</h2>
</header>
<section class="main_review">
<p>Dinos were great!</p>
</section>
<section class="user_reviews">
<article class="user_review">
<p>Way too scary for me.</p>
<footer>
<p>
Posted on
<time datetime="2015-05-16 19:00">May 16</time>
by Lisa.
</p>
</footer>
</article>
<article class="user_review">
<p>I agree, dinos are my favorite.</p>
<footer>
<p>
Posted on
<time datetime="2015-05-17 19:00">May 17</time>
by Tom.
</p>
</footer>
</article>
</section>
<footer>
<p>
Posted on
<time datetime="2015-05-15 19:00">May 15</time>
by Staff.
</p>
</footer>
</article>
L'outline del documento è una rappresentazione schematica del documento, che ne evidenza le parti importanti.
Nell'outline finiscono tutti gli header, i titoli, gli header delle section e degli article.
L'outline descrive la consistenza semantica della nostra struttura, l'accessibilità dei contenuti, la linearità e la chiarezza del documento.
https://gsnedders.html5.org/outliner/
<section>
<h1>Forest elephants</h1>
<p>In this section, we discuss the lesser known forest elephants.
...this section continues...
<section>
<h2>Habitat</h2>
<p>Forest elephants do not live in trees but among them.
...this subsection continues...
</section>
</section>
<section>
<h3>Mongolian gerbils</h3>
<p>In this section, we discuss the famous mongolian gerbils.
...this section continues...
</section>
1. Forest elephants
1.1 Habitat
2. Mongolian gerbils