02 - Ajouter des liens, des images et structurer sa page
Article publié le Dimanche 05 avril 2026 , lu 8 fois
Dans le chapitre précédent, nous avons créé une première page HTML simple.
Nous allons maintenant aller plus loin en ajoutant :
- Des liens entre les pages
- Des images
- Une structure plus propre avec HTML5
1. Ajouter un lien
Pour créer un lien en HTML, on utilise la balise <a>.
<a href="https://example.com">Aller sur un site</a>Explication :
- href : destination du lien
- Le texte entre les balises : ce que l’utilisateur voit
Lien vers une autre page locale :
<a href="contact.html">Page contact</a>2. Ajouter une image
Pour afficher une image, on utilise la balise <img>.
<img src="image.jpg" alt="Description de l'image">- src : chemin de l’image
- alt : description (important pour accessibilité)
Exemple :
<img src="chat.jpg" alt="Un chat">3. Organisation des fichiers
Il est important de structurer correctement son projet.
Exemple :
/mon-site
index.html
contact.html
/images
photo.jpg
Pour accéder à une image :
<img src="images/photo.jpg" alt="Photo">4. Structurer sa page avec HTML5
HTML5 introduit des balises pour mieux organiser le contenu :
- <header> : en-tête
- <nav> : navigation
- <main> : contenu principal
- <section> : section
- <footer> : pied de page
Exemple :
<body>
<header>
<h1>Mon site</h1>
</header>
<nav>
<a href="index.html">Accueil</a>
<a href="contact.html">Contact</a>
</nav>
<main>
<section>
<h2>Bienvenue</h2>
<p>Contenu principal</p>
</section>
</main>
<footer>
<p>Copyright</p>
</footer>
</body>
5. À retenir
- <a> permet de créer des liens
- <img> permet d’afficher des images
- Les chemins de fichiers sont importants
- HTML5 permet de structurer clairement une page
Conclusion
Vous savez maintenant créer une page plus complète avec du contenu riche.
Dans le prochain chapitre, nous verrons comment styliser cette page avec le CSS.
Navigation dans la série
Chapitre 1 : Créer sa première page HTMLChapitre 3 : Mise en forme avec CSS