4: Les listes et l'organisation

Qu'allez-vous apprendre ?

Comprendre comment organiser du contenu avec des listes et sous-listes pour créer des structures claires.

Suivez ce chapitre à la lettre

Dans ce chapitre, nous allons découvrir comment structurer vos pages HTML en utilisant les listes. Les listes permettent de présenter des informations de manière organisée et facile à lire, que ce soit sous forme de puces ou de numéros. Même sur smartphone avec SPCK Editor, ces éléments sont essentiels pour donner une hiérarchie claire à votre contenu.

Chapitre 4: Les listes et l’organisation du contenu

Les listes sont très utilisées sur le Web. Elles servent à organiser des informations de manière claire et logique : menus, étapes, fonctionnalités, cours, règles, etc. Une page bien organisée avec des listes est plus facile à lire, surtout sur un smartphone.

HTML propose deux types principaux de listes : les listes non ordonnées (avec des puces) et les listes ordonnées (avec des numéros). Il est aussi possible d’imbriquer des listes à l’intérieur d’autres listes pour créer des structures plus complexes.

  1. Liste non ordonnée :
    La balise <ul> (unordered list) crée une liste avec des puces.
  2. Éléments de liste :
    Chaque élément d’une liste est écrit avec la balise <li>.
  3. Liste ordonnée :
    La balise <ol> (ordered list) affiche une liste numérotée automatiquement.
  4. Numérotation automatique :
    HTML gère les numéros tout seul, tu n’as pas besoin de les écrire.
  5. Attribut start :
    L’attribut start permet de commencer une liste numérotée à un autre chiffre.
  6. Imbrication :
    Une liste peut contenir une autre liste à l’intérieur d’un <li>.
  7. Organisation logique :
    Les listes aident à structurer le contenu sans utiliser trop de paragraphes.
  8. Lisibilité mobile :
    Les listes sont très confortables à lire sur écran réduit.
  9. Menus de navigation :
    Les menus de sites web sont presque toujours construits avec des listes HTML.
  10. Bonne pratique :
    Utilise les listes pour des éléments similaires, pas pour du texte long.

Exemples pratiques :

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
      
<ol>
  <li>Installer Spck Editor</li>
  <li>Créer index.html</li>
  <li>Écrire du code</li>
</ol>
      
<ol start="5">
  <li>Chapitre 5</li>
  <li>Chapitre 6</li>
</ol>
      
<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
</ul>
      
<ul>
  <li>Accueil</li>
  <li>Cours</li>
  <li>Contact</li>
</ul>
      
<ol>
  <li>Étape 1</li>
  <li>Étape 2</li>
</ol>
      
<ul>
  <li>Téléphone</li>
  <li>Ordinateur</li>
</ul>
      
<ol>
  <li>Lire</li>
  <li>Pratiquer</li>
</ol>
      
<ul>
  <li>HTML5</li>
</ul>
      
<ul>
  <li>Simple</li>
  <li>Clair</li>
</ul>

Exercices pratiques :

  1. Crée une liste de 5 langages informatiques.
  2. Crée une liste numérotée de 4 étapes d’apprentissage.
  3. Teste l’attribut start dans une liste.
  4. Crée une liste imbriquée avec deux niveaux.
  5. Crée un menu simple avec une liste.
  6. Ajoute une liste dans une page existante.
  7. Observe l’affichage sur mobile.
  8. Supprime les numéros écrits manuellement.
  9. Transforme un paragraphe en liste.
  10. Vérifie que chaque <li> est bien fermé.

Les listes sont indispensables pour structurer efficacement une page web. Bien utilisées, elles rendent ton contenu clair, professionnel et facile à comprendre, même sans CSS.

Passer au chaitre 05-->