Les balises importantes (1)
Les balises sémantiques
Il s'agit des balises dont le nom indique un sens quant à son contenu. Il est recommandé de les utiliser au maximum.
Les balises structurante de la page
<nav>(seulement la nav de haut niveau)<main>(1 seul par page)<header>Il peut y en avoir plusieurs par page, notamment une par<body>, une par<section>et une par<article><footer>idem<section>Contient une section de la page, une<section>peut être dans une<section>...<article>Contient par exemple un billet de blog, ou un commentaire<aside>Dédié à une partie complètement indépendante du contenu de la page<p>Pour paragraphe<blockquote>Utilisée pour une citation d'une autre source
<html>
<main class="box-vue">
<header>
<h1>L'en-tête de la page</h1>
</header>
<section>
<header>
<h2>Titre de la section</h2>
</header>
<article>
<header>
<h2>Titre de l'article</h2>
</header>
<p>
Un paragraphe de l'article
</p>
<footer>
Le pied de l'article
</footer>
</article>
<footer>
Le pied de la section
</footer>
</section>
<footer>Le pied de page</footer>
</main>
</html>Toutes ces balises ont par défaut un display de type block (cf. CSS) : cela signifie que, si aucun style n'est ajouté à l'élément ni à son parent, il y aura un saut de ligne avant et un saut de ligne après chacun d’eux.
Les balises de titres
Les balises de titres <h1> à <h6> permettent de structurer les titres respectivement de niveau 1 à 6.
Il ne doit y avoir qu’une balise h1 par page !
Les balises de listes
Il existe plusieurs types de listes :
<ol>et ses<li>pour une liste ordonnée (ordered list et list item)<ul>et ses<li>Liste non-ordonnée (unordered list et list item)<dl>son<dt>et son ou ses<dd>Liste de définition (definition list, definition term et definition description)
<html>
<ol class="box-vue">
<li>Le premier de la liste</li>
<li>Le deuxième</li>
</ol>
<ul class="box-vue">
<li>Le premier de la liste</li>
<li>Le deuxième</li>
</ul>
<dl class="box-vue">
<dt>Terme</li>
<dd>Une première définition du terme</dd>
<dd>Une deuxième définition du terme</dd>
<dt>Un deuxième terme</li>
<dd>Une première définition du deuxième terme</dd>
<dd>Une deuxième définition du deuxième terme</dd>
</dl>
</html>Les tableaux
La balise <table> permet de faire des tableaux. À l'intérieur, la balise <thead> contiendra une ou plusieurs lignes avec les en-têtes du tableau (les titres des colonnes). Puis viendra <tbody> puis éventuellement la balise <tfoot>.
Chaque ligne sera marquée par une balise <tr> (table row), et chaque ligne contiendra une ou plusieurs <th> (table header cell) et/ou <td> (table data cell).
La balise <table> doit être utilisée pour afficher des données tabulaires, et en aucun cas pour de la mise en page.
<html>
<table>
<thead>
<tr>
<th>
Titre de la colonne 1
</th>
<th>
Titre de la colonne 2
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Valeur de la ligne 1 colonne 1
</td>
<td>
Valeur de la ligne 1 colonne 2
</td>
</tr>
<tr>
<td>
Valeur de la ligne 2 colonne 1
</td>
<td>
Valeur de la ligne 2 colonne 2
</td>
</tr>
</tbody>
</table>
</html>