Apprenez à organiser un texte avec des titres hiérarchisés, des paragraphes et des listes.
Ouvrir cette leçon dans KodokonOuvrez un livre de cuisine : il y a le titre du livre, des titres de chapitres, puis des titres de recettes. Le HTML propose la même hiérarchie avec six niveaux de titres, de <h1> à <h6>. Le h vient de l'anglais heading, qui signifie titre. <h1> est le titre principal de la page, <h2> un titre de section, <h3> un sous-titre, et ainsi de suite jusqu'à <h6>.
<h1>Mon carnet de recettes</h1>
<h2>Les entrées</h2>
<h3>Soupe de carottes</h3>
<h2>Les desserts</h2>
<h3>Tarte aux pommes</h3>Pour le texte courant, on utilise la balise <p> vue à la leçon précédente. Détail important : dans votre fichier, appuyer sur la touche Entrée ne crée pas de nouveau paragraphe à l'écran. Le navigateur ignore les retours à la ligne et les espaces multiples. Pour séparer deux idées, il faut donc écrire deux éléments <p> distincts.
<h2>Tarte aux pommes</h2>
<p>Une recette simple, parfaite pour débuter.</p>
<p>Comptez 30 minutes de préparation en tout.</p>Pour énumérer des éléments, le HTML propose deux types de listes. La balise <ul> (unordered list, liste non ordonnée) affiche des puces : parfaite pour une liste de courses, où l'ordre n'a pas d'importance. La balise <ol> (ordered list, liste ordonnée) affiche des numéros : idéale pour les étapes d'une recette. Dans les deux cas, chaque élément de la liste s'écrit avec la balise <li> (list item).
<ul>
<li>3 pommes</li>
<li>1 pâte brisée</li>
<li>2 cuillères de sucre</li>
</ul>
<ol>
<li>Préchauffez le four à 180 degrés.</li>
<li>Coupez les pommes en tranches.</li>
<li>Enfournez pendant 35 minutes.</li>
</ol>