Les liens : la base du web
Le « Hyper » dans HTML vient des liens hypertexte. C'est ce qui rend le web navigable : vous cliquez, vous arrivez ailleurs. Sans liens, chaque page serait une île isolée.
La balise <a> (pour « anchor », ancre) crée un lien :
<a href="https://example.com">Texte du lien</a>: lien vers un autre site<a href="/contact.html">Contact</a>: lien interne (même site)<a href="mailto:nom@example.com">Email</a>: ouvre le logiciel email
Ouvrir dans un nouvel onglet (en sécurité)
Pour ouvrir un lien dans un nouvel onglet, ajoutez target="_blank". Mais ajoutez toujours rel="noopener" : c'est une protection de sécurité qui empêche la page ouverte d'accéder à votre page d'origine.
Exemple complet : <a href="https://example.com" target="_blank" rel="noopener">Voir le site</a>
Afficher une image
La balise <img> affiche une image. Elle n'a pas de balise fermante, tout se passe dans les attributs :
src: le chemin ou l'URL de l'image (obligatoire)alt: une description textuelle de l'image (obligatoire pour l'accessibilité)
Exemple : <img src="photo.jpg" alt="Un chat roux dort sur un canapé bleu">
Pourquoi le texte alt est indispensable
Le texte alt sert à trois choses :
- Accessibilité : les lecteurs d'écran lisent le alt aux personnes malvoyantes
- SEO : Google ne « voit » pas les images, il lit le alt pour les comprendre
- Fallback : si l'image ne charge pas, le texte alt s'affiche à la place
Un bon alt décrit ce qu'on voit, pas le nom du fichier. « Un chat roux dort sur un canapé bleu » est bien. « IMG_4532.jpg » est inutile.
Les formats d'image courants
- JPG : photos, beaucoup de couleurs, bonne compression
- PNG : logos, captures d'écran, transparence possible
- SVG : icônes et illustrations vectorielles (ne pixelisent jamais)
- WebP : format moderne, plus léger que JPG et PNG (recommandé)
Le cas du SVG : les images vectorielles
Le SVG mérite qu'on s'y arrête, car il ne fonctionne pas comme les autres. Une image JPG ou PNG est une grille de pixels : agrandis-la trop, elle devient floue et « en escalier ». Un SVG, lui, ne contient pas de pixels mais une description géométrique (« trace un cercle ici, une ligne là »). Le navigateur redessine la forme à la volée, à n'importe quelle taille : elle reste toujours nette.
Concrètement, un fichier .svg est du texte (du code, pas une photo) qui liste des formes. D'où trois atouts :
- Net à toute taille : parfait pour les logos et icônes, du favicon au panneau géant.
- Très léger pour des formes simples (souvent quelques lignes de texte).
- Stylable et animable : comme c'est du code, on peut le colorer ou l'animer en CSS.
On peut l'inclure de deux façons :
<!-- 1. Comme une image classique : simple -->
<img src="logo.svg" alt="Logo de l'entreprise">
<!-- 2. Directement dans le HTML (inline) : plus verbeux,
mais on peut le colorer / l'animer en CSS -->
<svg viewBox="0 0 24 24" width="24" height="24">
<circle cx="12" cy="12" r="10" fill="#329e5a"></circle>
</svg>Règle simple : SVG pour tout ce qui est dessiné (logos, icônes, illustrations, schémas) et JPG ou WebP pour les photos (le vectoriel ne sait pas représenter une vraie photo).
Links: the foundation of the web
The "Hyper" in HTML comes from hyperlinks. They make the web navigable: you click, you go somewhere else. Without links, every page would be an isolated island.
The <a> tag (for "anchor") creates a link:
<a href="https://example.com">Link text</a>— link to another site<a href="/contact.html">Contact</a>— internal link (same site)<a href="mailto:name@example.com">Email</a>— opens your email client
Opening in a new tab (safely)
To open a link in a new tab, add target="_blank". But always add rel="noopener" too — it's a security measure that prevents the opened page from accessing your original page.
Full example: <a href="https://example.com" target="_blank" rel="noopener">See site</a>
Displaying an image
The <img> tag displays an image. It has no closing tag — everything is in the attributes:
src— the path or URL of the image (required)alt— a text description of the image (required for accessibility)
Example: <img src="photo.jpg" alt="A ginger cat sleeping on a blue couch">
Why alt text is essential
Alt text serves three purposes:
- Accessibility — screen readers read alt text to visually impaired users
- SEO — Google can't "see" images, it reads alt text to understand them
- Fallback — if the image fails to load, alt text is displayed instead
Good alt text describes what you see, not the filename. "A ginger cat sleeping on a blue couch" is good. "IMG_4532.jpg" is useless.
Common image formats
- JPG — photos, lots of colors, good compression
- PNG — logos, screenshots, supports transparency
- SVG — icons and vector illustrations (never pixelate)
- WebP — modern format, lighter than JPG and PNG (recommended)
The SVG case: vector images
SVG is worth a stop, because it doesn't work like the others. A JPG or PNG image is a grid of pixels: zoom in too far and it gets blurry and "staircased". An SVG, on the other hand, contains no pixels but a geometric description ("draw a circle here, a line there"). The browser redraws the shape on the fly, at any size: it stays always crisp.
Concretely, an .svg file is text (code, not a photo) listing shapes. Hence three strengths:
- Crisp at any size: perfect for logos and icons, from the favicon to a giant billboard.
- Very light for simple shapes (often a few lines of text).
- Stylable and animatable: since it's code, you can color or animate it with CSS.
You can include it two ways:
<!-- 1. As a regular image: simple -->
<img src="logo.svg" alt="Company logo">
<!-- 2. Directly in the HTML (inline): more verbose,
but you can color / animate it with CSS -->
<svg viewBox="0 0 24 24" width="24" height="24">
<circle cx="12" cy="12" r="10" fill="#329e5a"></circle>
</svg>Simple rule: SVG for anything drawn (logos, icons, illustrations, diagrams) and JPG or WebP for photos (vector can't represent a real photo).
Copiez ce prompt dans Claude ou ChatGPT :
Crée-moi une page de navigation avec 5 liens vers des sections différentes, et une image avec un bon texte alt. Explique pourquoi le texte alt est important.
Sans relire la réponse de l'IA : avec tes mots, à quoi sert le texte alt d'une image, et donne ses trois rôles.
alt aux personnes malvoyantes), SEO (Google ne voit pas l'image, il lit le alt pour la comprendre) et fallback (si l'image ne charge pas, le alt s'affiche à la place). Bonus : un bon alt décrit ce qu'on voit, pas le nom du fichier.L'IA a généré ce code avec deux erreurs : l'image n'a pas d'attribut alt, et le lien n'a pas d'attribut href. Ajoutez-les.
Tu demandes à l'IA un bouton « Accueil » cliquable. Elle te propose ce code. Ton rôle de relecteur : l'accepter tel quel ou le rejeter, et dire pourquoi.
<span onclick="location.href='/index.html'">Accueil</span>
<img src="logo.png" alt="image"><span onclick> n'est pas un vrai lien : il n'est ni focusable au clavier, ni annoncé comme lien par les lecteurs d'écran, et un clic droit « ouvrir dans un nouvel onglet » ne marche pas. La bonne balise est <a href="/index.html">Accueil</a>. Ensuite, alt="image" ne décrit rien : autant ne rien mettre. Il faut décrire ce qu'on voit, par exemple alt="Logo de l'entreprise".Sans remonter dans la leçon : quels sont les deux attributs obligatoires d'une balise <img>, et que faut-il ajouter à un lien target="_blank" pour qu'il soit sûr ?
<img> a besoin de src (le chemin ou l'URL de l'image) et de alt (la description textuelle, indispensable pour l'accessibilité et le SEO). Pour un lien qui s'ouvre dans un nouvel onglet, on ajoute rel="noopener" à côté de target="_blank" : sans lui, la page ouverte peut accéder à votre page d'origine via window.opener.alt d'une image sert à...rel="noopener" sur un lien target="_blank" ?Links and images bring your pages to life. To organise information clearly, we now tackle lists and tables: listing, ranking and aligning data cleanly without hacks.
Lesson 5: Lists and tables →