Temps de lecture approximative : 10 minutes

Chapitre 8 - Écrire une page en HTML5, niveau 4

On continue notre apprentissage du HTML5 avec plein de nouvelles balises. Vous avez peut-être été frustré de n'en apprendre que deux dans le chapitre précédent ? Attendez-vous dans ce chapitre à en découvrir beaucoup plus.

La balise <hr />

Cette balise orpheline permet de représenter des ruptures thématiques au sein de son contenu. La balise <hr /> est représentée par défaut dans les navigateurs par une barre hozitontale. Elle est très simple à utiliser. Ci-dessous un exemple d'utilisation.

<p>Les cocktails à base de vodka que j'aime :</p>
<ul>
   <li>Black Russian</li>
   <li>Moscow mule</li>
   <li>Sex on the beach</li>
</ul>

<hr />

<p>Les cocktails à base de rhum que j'aime :</p>
<ul>
   <li>Mai Tai</li>
   <li>Piña colada</li>
   <li>Cuba libre</li>
</ul>
Illustration de la balise <hr>
Exemple de la balise <hr />

La balise <details>

Attention, la <details> ne fonctionne pas ni sous le navigateur Internet Explorer ni sous Edge. Il y a des chances pour qu'enfin Edge l'implémente un jour.

Nouveauté dans la version HTML5, la balise <details> permet de faire apparaître ou disparaître une zone de contenu. Derrière cette notion peut-être pas assez claire, se cache quelque chose que tout utilisateur connaît déjà. En effet, nous utilisons quotidiennement ce principe qui permet de déplier et replier des informations. On retrouve cela sur de nombreux sites, mais également dans les systèmes d'exploitation. La balise <details> est accompagnée de la balise <summary> qui correspond au titre qui permettra de déplier et replier le bloc de contenu. Comme toujours, nous allons apprécier la mise en forme par défaut du navigateur.

<details>
   <summary>Cuba libre</summary>
   <p>Ingrédients :</p>
   <ul>
      <li><strong>6 cl</strong> de rhum cubain</li>
      <li><strong>4 cl</strong> de jus de citrons verts</li>
      <li><strong>15 cl</strong> de cola</li>
   </ul>
</details>

<details open="true">
   <summary>Mai Tai</summary>
   <p>Ingrédients :</p>
   <ul>
      <li><strong>3 cl</strong> de rhum blanc</li>
      <li><strong>3 cl</strong> de rhum ambré</li>
      <li><strong>2 cl</strong> de triple sec</li>
      <li><strong>1 cl</strong> de sirop de sucre de canne</li>
      <li><strong>3 cl</strong> de jus de citrons verts</li>
      <li><strong>1 cl</strong> de sirop d'orgeat</li>
   </ul>
</details>
Illustration de la balise <details>
Exemple de la balise <details>

L'attribut open="" permet de définir le comportement par défaut de la balise <details>. Si l'attribut open="" n'est pas précisé ou s'il est défini à false, alors le bloc de contenu est caché. Si à l'inverse l'attribut a pour valeur true, alors celui-ci est visible.

Les balises <sub> et <sup>

Ces balises permettent d'afficher un texte en indice ou en exposant. Simple et efficace, un exemple d'utilisation ci-dessous.

<p>Je ne connais pas grand chose à la physique mais E = mc<sup>2</sup>.</p>
<p>La molécule d'eau a pour formule H<sub>2</sub>O.</p>

Les tableaux

Les précédentes balises étaient là pour vous mettre dans le bain de ce nouveau chapitre. Les tableaux en HTML ne sont pas compliqués mais demandent un peu de rigueur. Nous allons aborder pas moins de 7 nouvelles balises. Une fois cette partie du cours assimilée, vous pourrez intégrer des tableaux simples dans vos pages HTML.

La balise <table>

Le nom de la balise indique clairement son utilité. Elle permet de déclarer un nouveau tableau. Elle englobe la totalité de ce dernier. On commence toujours par une balise ouvrante <table> et on termine toujours par une balise fermante </table>.

La balise <tr>

Les tableaux en HTML sont organisés en lignes et cellules. Une ligne peut avoir une ou plusieurs cellules. La balise qui permet de représenter une ligne est <tr>. C'est donc cette balise <tr> qui englobe les cellules.

La balise <td>

Comme expliqué précédemment, les tableaux en HTML sont organisés en lignes et en cellules. Les lignes sont représentées par les balises <tr>, tandis que les cellules sont représentées par la balise <td>. Il peut donc y avoir une ou plusieurs balises <td> à l'intérieur d'un <tr>.

A ce stade et avec les balises que nous venons de découvrir, nous pouvons déjà créer un tableau basique. Sellez votre monture, on se lance.

<h1>Mes cocktails préférés</h1>
<table>
   <tr>
      <td>Kamikaze</td>
      <td>Verre à cocktail</td>
      <td>Frappé au shaker</td>
   </tr>
   <tr>
      <td>Gin fizz</td>
      <td>Old Fashioned glass</td>
      <td>On the rocks</td>
   </tr>
   <tr>
      <td>Manhattan</td>
      <td>Verre à cocktail</td>
      <td>Frappé sans glace</td>
   </tr>
</table>
Illustration d'un tableau basique en HTML
Exemple d'un tableau basique en HTML
La mise en forme par défaut des tableaux en HTML
WTF ?! C'est un tableau ça ?

Nous en sommes au chapitre 8 et la mise en forme des balises par défaut est toujours aussi pauvre (terme poli). On peut, sans trop mentir à personne, dire qu'on touche le fond avec les tableaux. On retrouve tout de même ce que l'on cherche, une organisation en lignes et en cellules. On a bien trois lignes de trois cellules. Vous l'avez peut-être remarqué, il manque les cellules d'en-tête du tableau. On règle ce problème à tombeau ouvert.

Notre HTML pur et dur restera sans saveur jusqu'à ce que nous ajoutions des styles. Pour rappel, cette mise en forme se réalise à l'aide du CSS.

La balise <th>

La balise HTML <th> permet de définir une celulle d'en-tête pour un tableau. Elle se place tout comme la balise <td> à l'intérieur d'une ligne <tr>. On retrouve dans une ligne, une ou plusieurs balises d'en-tête. Ci-après l'évolution de notre tableau.

<h1>Mes cocktails préférés</h1>
<table>
   <tr>
      <th>Nom du cocktail</th>
      <th>Type de verre</th>
      <th>Servi</th>
   </tr>
   <tr>
      <td>Kamikaze</td>
      <td>Verre à cocktail</td>
      <td>Frappé au shaker</td>
   </tr>
   <tr>
      <td>Gin fizz</td>
      <td>Old Fashioned glass</td>
      <td>On the rocks</td>
   </tr>
   <tr>
      <td>Manhattan</td>
      <td>Verre à cocktail</td>
      <td>Frappé sans glace</td>
   </tr>
</table>

Autres balises

Pour améliorer la lisibilité de votre code mais également pour cibler davantage vos éléments en CSS, vous pouvez avoir recours aux balises suivantes :

  • <thead> : cette balise permet d'englober la ou les lignes dans lesquelles sont définis les en-têtes des colonnes
  • <tbody> : cette balise permet d'englober la ou les lignes qui constituent le corps du tableau
  • <tfoot> : cette balise permet d'englober la ou les lignes qui forment le pied du tableau. On retrouve parfois dans cette zone des résumés des colonnes.

Ces balises sont facultatives. Vous pouvez les utiliser toutes dans le même tableau, ou seulement une, voir même aucune.

Ce nouveau chapitre nous a permis de découvrir de nouvelles balises simples mais aussi les tableaux, une notion incontournable mais un peu plus rigoureuse que le reste. Vous pouvez désormais attaquer les exercices qui concernent les tableaux. Il aura fallu attendre plusieurs chapitres, avant de retomber sur un GIF de notre ami Jack. Dans le prochain et dernier chapitre, nous aborderons les formulaires.