Leçon 4 / 6
Leçon 04 · Partie 2 — Aller plus loin

Listes, liens et images

Listes à puces

Commence chaque ligne par -, * ou + suivi d'un espace.

- Pommes
- Oranges
- Bananes
Aperçu rendu
  • Pommes
  • Oranges
  • Bananes
💡

Les trois symboles (-, *, +) donnent le même résultat. Utilise - par habitude — c'est le plus courant.

Listes numérotées

Commence chaque ligne par un nombre suivi d'un point et d'un espace.

1. Préchauffer le four à 180°C
2. Préparer la pâte
3. Enfourner pendant 25 minutes
4. Laisser refroidir
Aperçu rendu
  1. Préchauffer le four à 180°C
  2. Préparer la pâte
  3. Enfourner pendant 25 minutes
  4. Laisser refroidir
💡

Les numéros n'ont pas besoin d'être dans l'ordre. Tu peux mettre 1. 1. 1. — Markdown les renumérotera automatiquement.

Listes imbriquées

Ajoute deux espaces (ou une tabulation) devant les éléments enfants.

- Fruits
  - Pommes
  - Oranges
- Légumes
  - Carottes
  - Courgettes
    - Bio de préférence
Aperçu rendu
  • Fruits
    • Pommes
    • Oranges
  • Légumes
    • Carottes
    • Courgettes
      • Bio de préférence

Les liens

La syntaxe : [texte du lien](url). Le texte s'affiche, l'URL devient cliquable.

Visite [MonMiniLab](https://monminilab.fr).
Documentation [officielle](https://docs.github.com).

[Lien avec titre au survol](https://monminilab.fr "Retour accueil")
Aperçu rendu

Visite MonMiniLab.

Documentation officielle.

Lien avec titre au survol

💡

Pour un lien brut (l'URL s'affiche directement), entoure-la de chevrons : <https://monminilab.fr>

Les images

Même syntaxe que les liens, avec un ! devant. Le texte entre crochets devient le texte alternatif (alt).

![Logo MonMiniLab](https://monminilab.fr/logo.png)
![Un chat mignon](./images/chat.jpg "Mon chat")

Le texte alternatif est important. Il s'affiche si l'image ne charge pas. Il aide aussi les lecteurs d'écran.

⚠️

Ne laisse pas le texte alt vide (![](url)). Mets toujours une description courte de l'image.

Exemple complet — liste de ressources

## Ressources pour apprendre

### Sites officiels

- [MDN Web Docs](https://developer.mozilla.org) — référence HTML/CSS/JS
- [CommonMark](https://commonmark.org) — spécification Markdown standard

### Outils en ligne

1. [Dillinger](https://dillinger.io) — éditeur Markdown en ligne
2. [StackEdit](https://stackedit.io) — autre éditeur avec aperçu

![Aperçu Dillinger](https://dillinger.io/img/dillinger-logo.png "Éditeur Markdown")
// À retenir
  • - item = liste à puces (* ou + aussi)
  • 1. item = liste numérotée
  • 2 espaces d'indentation = sous-liste
  • [texte](url) = lien cliquable
  • ![alt](url) = image (le ! fait la différence)