Texte, images, liens et listes
Mettez en forme le texte avec des titres et des paragraphes, intégrez des images avec un texte alternatif, créez des hyperliens et construisez des listes ordonnées et non ordonnées.
Texte, images, liens et listes est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Titres : de h1 à h6
HTML fournit six niveaux de titres. Utilisez-les pour créer une structure de document, et non pour modifier la taille du texte. <h1> est le titre de la page (une fois par page), <h2> sert aux sections principales, <h3> aux sous-sections, et ainsi de suite.
<h1>Frontend Development Guide</h1>
<h2>HTML Basics</h2>
<h3>Headings</h3>Paragraphes et <br>
L’élément <p> englobe un paragraphe de texte. Le navigateur ajoute automatiquement un espacement au-dessus et au-dessous. Utilisez <br> avec parcimonie, uniquement pour les sauts de ligne qui ont un sens, comme dans une adresse ou un poème, et non pour séparer les paragraphes.
Éléments de texte en ligne
Utilisez les éléments en ligne pour donner du sens au texte : <strong> pour le texte important (gras), <em> pour l’emphase (italique), <code> pour les extraits de code, <mark> pour le texte surligné et <small> pour les mentions en petits caractères.
<p>Press <kbd>Ctrl+S</kbd> to save. The <code>console.log()</code> function outputs to the <strong>Console</strong> panel.</p>Images : l’élément <img>
L’élément <img> intègre une image. L’attribut src fournit l’URL et alt le texte de remplacement destiné aux lecteurs d’écran et affiché lorsque l’image ne peut pas être chargée. Incluez toujours une valeur alt pertinente.
<img src="/images/hero.webp"
alt="A developer typing code on a laptop"
width="800"
height="450">Rédiger un bon texte alt
Le texte alt doit transmettre le contenu et la fonction de l’image. Les images décoratives (espacements, icônes purement décoratives) utilisent alt="" (chaîne vide) afin que les lecteurs d’écran les ignorent. N’écrivez jamais alt="image of" : décrivez simplement ce que l’image montre.
Liens hypertexte : l’élément <a>
L’élément <a> (ancre) crée des liens hypertexte. L’attribut href définit l’URL de destination. Le texte du lien doit décrire la destination : n’écrivez jamais « cliquez ici ».
<!-- External link -->
<a href="https://mdn.mozilla.org" target="_blank" rel="noopener noreferrer">
MDN Web Docs
</a>
<!-- Internal link -->
<a href="/courses">Browse Courses</a>
<!-- Email link -->
<a href="mailto:hello@example.com">Email Us</a>Note de sécurité sur target=_blank
Lorsque vous ouvrez des liens dans un nouvel onglet avec target="_blank", ajoutez toujours rel="noopener noreferrer". Sinon, la page ouverte peut accéder à l’objet fenêtre de la page d’origine, ce qui constitue une vulnérabilité de sécurité appelée détournement inversé d’onglet.
Listes non ordonnées : <ul>
Utilisez <ul> (liste non ordonnée) lorsque l’ordre des éléments n’a pas d’importance : fonctionnalités, ingrédients ou liens de navigation. Chaque élément est un <li>. Le navigateur affiche par défaut des puces, mais vous les mettrez presque toujours en forme avec CSS.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Listes ordonnées : <ol>
Utilisez <ol> (liste ordonnée) lorsque l’ordre est important : étapes d’un tutoriel, classements ou instructions. Les éléments sont automatiquement numérotés. Utilisez les attributs start et reversed pour contrôler la numérotation.
<ol>
<li>Install Node.js</li>
<li>Create a new project</li>
<li>Run npm install</li>
</ol>Listes de descriptions : <dl>
<dl> (liste de descriptions) regroupe des termes et leurs définitions ou descriptions. Utilisez-la pour les glossaires, les métadonnées (auteur/date) et les paires clé-valeur. <dt> contient le terme et <dd> la description.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — the structure layer.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — the presentation layer.</dd>
</dl>Imbrication des listes
Les listes peuvent être imbriquées pour représenter des hiérarchies. Placez la liste enfant <ul> ou <ol> à l’intérieur de l’élément parent <li>. Ne les imbriquez pas uniquement pour créer un retrait : utilisez plutôt CSS.
Vérification rapide
Quel attribut fournit une description textuelle d’une image pour les lecteurs d’écran ?
Récapitulatif : texte, images, liens et listes
Utilisez les éléments de titre pour structurer le document, p pour les paragraphes, img avec un texte alt pertinent pour les images, a avec un texte de lien descriptif pour la navigation, et ul/ol/dl pour le contenu sous forme de liste. La sémantique rend le HTML accessible et exploitable par les machines.
Questions Fréquemment Posées
La leçon « Texte, images, liens et listes » est-elle gratuite ?
Oui — le texte complet de « Texte, images, liens et listes » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Texte, images, liens et listes » ?
Mettez en forme le texte avec des titres et des paragraphes, intégrez des images avec un texte alternatif, créez des hyperliens et construisez des listes ordonnées et non ordonnées. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Texte, images, liens et listes » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Structure d’un document : DOCTYPE, html, head, body
- Balises sémantiques : header, nav, main, article, footer
- Texte, images, liens et listes
- Formulaires : input, label, button