Listes à puces (non ordonnées)
La balise <ul> (unordered list) crée une liste à puces. Chaque élément est un <li> (list item).
Utilisez-la quand l'ordre n'a pas d'importance : une liste de courses, des compétences sur un CV, les ingrédients d'une recette.
Listes numérotées (ordonnées)
La balise <ol> (ordered list) crée une liste numérotée automatiquement. Même structure avec <li> à l'intérieur.
Utilisez-la quand l'ordre compte : les étapes d'une recette, un classement, un tutoriel pas-à-pas.
Listes imbriquées
On peut mettre une liste dans une liste. Il suffit de placer un <ul> ou <ol> à l'intérieur d'un <li>. Pratique pour des sous-catégories ou un menu de navigation à plusieurs niveaux.
Les tableaux HTML
Un tableau se construit avec plusieurs balises imbriquées :
<table>— le conteneur principal du tableau<thead>— la zone d'en-tête (titres des colonnes)<tbody>— le corps du tableau (les données)<tr>— une ligne (table row)<th>— une cellule d'en-tête (table header — en gras par défaut)<td>— une cellule de données (table data)
Tableaux : à utiliser pour les données uniquement
Règle importante : les tableaux sont faits pour des données tabulaires — comparaisons, statistiques, horaires, prix. Jamais pour la mise en page de votre site. Dans les années 2000, on utilisait des tableaux pour positionner le contenu. Aujourd'hui, c'est le rôle du CSS.
Bullet lists (unordered)
The <ul> tag (unordered list) creates a bulleted list. Each item is a <li> (list item).
Use it when order doesn't matter: a shopping list, skills on a resume, recipe ingredients.
Numbered lists (ordered)
The <ol> tag (ordered list) creates an automatically numbered list. Same structure with <li> inside.
Use it when order matters: recipe steps, rankings, step-by-step tutorials.
Nested lists
You can put a list inside a list. Just place a <ul> or <ol> inside a <li>. Handy for subcategories or multi-level navigation menus.
HTML tables
A table is built with several nested tags:
<table>— the main table container<thead>— the header area (column titles)<tbody>— the table body (the data)<tr>— a row (table row)<th>— a header cell (table header — bold by default)<td>— a data cell (table data)
Tables: for data only
Important rule: tables are meant for tabular data — comparisons, statistics, schedules, prices. Never for page layout. In the 2000s, tables were used for positioning content. Today, that's CSS's job.
Copiez ce prompt dans Claude ou ChatGPT :
Crée-moi un tableau HTML de comparaison de 3 forfaits (Starter, Pro, Enterprise) avec prix, features, et un bouton par colonne. Utilise thead et tbody correctement.
L'IA a généré ce tableau sans <thead> ni <tbody>, et a utilisé <td> au lieu de <th> pour les en-têtes. Ajoutez la bonne structure.
<ul> crée une liste...<table> ?