Les balises essentielles HTML que tout débutant doit connaître
Mike Codeur
Vous débutez en HTML et souhaitez maîtriser les bases rapidement ?
Pas de panique ! Dans cet article, découvrez les balises HTML indispensables pour structurer une page web. Grâce à ces éléments fondamentaux, vous pourrez créer des sites web simples et fonctionnels en un rien de temps.
Qu'est-ce qu'une balise HTML ?
Une balise HTML est un élément utilisé pour structurer et organiser le contenu d’une page web. Les balises fonctionnent par paire : une balise ouvrante et une balise fermante, comme ceci :
<p>Ceci est un paragraphe.</p>Certaines balises, comme celles pour insérer une image, sont dites "autoterminantes" :
<img src="image.jpg" alt="Une image">Les balises essentielles pour débutants
1. <html> : La racine du document
Tout document HTML commence et se termine par cette balise. Elle enveloppe tout le contenu de la page.
Exemple :
<!DOCTYPE html>
<html lang="fr">
<!-- Contenu ici -->
</html>2. <head> : Les informations de la page
Le <head> contient des métadonnées, comme le titre de la page, les styles, ou encore les scripts.
Exemple :
<head>
<meta charset="UTF-8">
<title>Mon premier site</title>
</head>3. <body> : Le contenu visible
Tout ce que l’utilisateur voit sur la page doit être inclus dans cette balise.
Exemple :
<body>
<h1>Bienvenue sur mon site</h1>
<p>Ceci est un texte visible par l’utilisateur.</p>
</body>4. <h1> à <h6> : Les titres
Ces balises définissent les titres, du plus important (<h1>) au moins important (<h6>).
Exemple :
<h1>Le titre principal</h1>
<h2>Un sous-titre</h2>5. <p> : Les paragraphes
Utilisez cette balise pour ajouter des blocs de texte.
Exemple :
<p>Ceci est un paragraphe contenant du texte.</p>6. <a> : Les liens
Les liens permettent de rediriger l’utilisateur vers une autre page ou un autre site.
Exemple :
<a href="https://www.google.com" target="_blank">Visitez Google</a>7. <img> : Les images
Pour insérer une image, utilisez la balise <img>. Elle nécessite deux attributs : src (source de l’image) et alt (description de l’image).
Exemple :
<img src="image.jpg" alt="Description de l'image">8. <ul> et <ol> : Les listes
<ul>: Liste non ordonnée (puces).<ol>: Liste ordonnée (numéros).
Exemple :
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>
<ol>
<li>Premier</li>
<li>Deuxième</li>
</ol>9. <table> : Les tableaux
Pour afficher des données de manière tabulaire.
Exemple :
<table>
<tr>
<th>Nom</th>
<th>Âge</th>
</tr>
<tr>
<td>Jean</td>
<td>25</td>
</tr>
</table>10. <div> et <span> : La structure
<div>: Utilisé pour regrouper des blocs d’éléments.<span>: Utilisé pour styliser du texte en ligne.
Exemple :
<div>
<p>Ceci est un bloc de contenu.</p>
</div>
<span style="color: red;">Texte en rouge</span>Exemple pratique : Créez une mini page HTML
Assemblez toutes ces balises pour créer une page fonctionnelle :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Page de démonstration</title>
</head>
<body>
<h1>Bienvenue sur ma page</h1>
<p>Ceci est un paragraphe.</p>
<a href="https://www.example.com">Lien vers un site</a>
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>
<img src="https://via.placeholder.com/150" alt="Exemple d'image">
</body>
</html>Conclusion
Les balises HTML présentées ici forment la base de tout site web. Une fois que vous les maîtrisez, vous avez tout ce qu’il faut pour commencer à structurer vos pages. Alors, qu’attendez-vous ? Lancez-vous dès maintenant et explorez le monde passionnant du développement web ! 🚀