Comprendre le HTML : structure d’une page expliquée simplement
Le HTML est le langage de base utilisé pour créer des pages web. Comprendre sa structure est essentiel pour débuter en développement web. Cet article vous explique simplement comment une page HTML est organisée, afin que vous puissiez commencer à créer vos propres pages.
Qu’est-ce que le HTML ?
HTML signifie HyperText Markup Language. C’est un langage qui sert à structurer le contenu d’une page web. Il permet d’organiser le texte, les images, les liens et d’autres éléments pour qu’ils s’affichent correctement dans un navigateur.
Le HTML utilise des balises pour définir les différentes parties d’une page. Ces balises sont entourées de chevrons <> et indiquent au navigateur comment afficher le contenu.
La structure de base d’une page HTML
Une page HTML suit une structure simple et standard. Voici les éléments principaux :
- <html> : la balise racine qui englobe toute la page.
- <head> : la partie qui contient les informations sur la page (titre, encodage, liens vers des fichiers externes).
- <body> : la partie visible de la page, où se trouve le contenu affiché aux visiteurs.
Voici un exemple minimaliste de cette structure :
<html>
<head>
<title>Titre de la page</title>
</head>
<body>
Contenu visible de la page
</body>
</html>
Le rôle de la balise <head>
La balise <head> contient des informations importantes pour le navigateur et les moteurs de recherche, mais qui ne sont pas directement visibles sur la page.
Voici ce que l’on trouve souvent dans le head :
- <title> : le titre de la page affiché dans l’onglet du navigateur.
- <meta charset= »UTF-8″> : définit l’encodage des caractères pour afficher correctement les accents et symboles.
- <meta name= »description » content= »… »/> : une courte description de la page, utile pour le référencement.
- <link> : pour relier des fichiers externes comme les feuilles de style CSS.
Exemple complet du head :
<head>
<meta charset="UTF-8">
<title>Ma première page web</title>
<meta name="description" content="Exemple simple de page HTML">
<link rel="stylesheet" href="style.css">
</head>
Le contenu visible avec la balise <body>
La balise <body> contient tout ce que l’on voit sur la page : textes, images, liens, listes, etc.
Voici quelques balises courantes utilisées dans le body :
- <h1> à <h6> : titres de différentes tailles.
- <p> : paragraphe de texte.
- <a> : lien vers une autre page ou un autre site.
- <img> : image.
- <ul> et <ol> : listes non ordonnées et ordonnées.
- <div> : conteneur générique pour regrouper des éléments.
Exemple simple de contenu dans le body :
<body>
<h1>Bienvenue sur mon site</h1>
<p>Ceci est un paragraphe d’introduction.</p>
<a href="https://www.example.com">Visitez un site externe</a>
<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
</ul>
</body>
Les balises HTML ont souvent une ouverture et une fermeture
La plupart des balises HTML s’écrivent avec une balise d’ouverture et une balise de fermeture :
- Balise d’ouverture : <nom>
- Balise de fermeture : </nom>
Par exemple :
<p>Ceci est un paragraphe.</p>Certaines balises sont dites auto-fermantes, comme <img> ou <br>. Elles ne contiennent pas de contenu et ne nécessitent pas de balise de fermeture :
<img src="image.jpg" alt="Description de l’image">Organiser le contenu avec des conteneurs
Pour structurer une page plus complexe, on utilise souvent des conteneurs comme :
- <div> : un bloc générique pour regrouper des éléments.
- <section> : une section thématique de la page.
- <header> : l’en-tête d’une page ou d’une section.
- <footer> : le pied de page.
Ces balises aident à organiser le contenu et facilitent la mise en forme avec CSS.
Exemple d’organisation simple :
<body>
<header>
<h1>Titre principal</h1>
</header>
<section>
<h2>Section 1</h2>
<p>Paragraphe dans la section 1.</p>
</section>
<footer>
<p>Pied de page</p>
</footer>
</body>
Les attributs : personnaliser les balises
Les balises HTML peuvent avoir des attributs pour ajouter des informations supplémentaires. Un attribut est écrit dans la balise d’ouverture avec un nom et une valeur.
Exemples d’attributs courants :
- href dans la balise <a> pour indiquer l’adresse du lien.
- src dans la balise <img> pour indiquer le chemin de l’image.
- alt dans la balise <img> pour décrire l’image.
- class ou id pour identifier un élément et appliquer du style CSS.
Exemple :
<a href="https://www.example.com">Lien vers example.com</a>
<img src="photo.jpg" alt="Photo de paysage">
Comment créer une page HTML complète simple
Voici un exemple complet d’une page HTML simple, qui rassemble tous les éléments vus précédemment :
<html>
<head>
<meta charset="UTF-8">
<title>Ma première page HTML</title>
</head>
<body>
<header>
<h1>Bienvenue sur mon site</h1>
</header>
<section>
<h2>Présentation</h2>
<p>Je découvre le HTML et la structure des pages web.</p>
<img src="image.jpg" alt="Exemple d’image">
</section>
<footer>
<p>Contactez-moi par email.</p>
</footer>
</body>
</html>
Tester votre page HTML
Pour voir votre page HTML, il suffit de :
- Écrire le code dans un éditeur de texte simple (comme le Bloc-notes sur Windows ou TextEdit sur Mac).
- Enregistrer le fichier avec l’extension .html, par exemple index.html.
- Ouvrir ce fichier avec un navigateur web (Chrome, Firefox, Edge, etc.).
Vous verrez alors votre page s’afficher comme vous l’avez codée.
Les bonnes pratiques pour débuter
- Respectez la structure de base : html, head, body.
- Utilisez toujours la balise meta charset= »UTF-8″ pour éviter les problèmes d’affichage des caractères.
- Fermez toutes les balises qui nécessitent une fermeture.
- Organisez votre contenu avec des titres et des sections pour plus de clarté.
- Testez régulièrement votre page dans un navigateur.