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" avec — 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é)
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)
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.
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.
alt d'une image sert à...rel="noopener" sur un lien target="_blank" ?