Les balises HTML essentielles pour débutants
HTML est le langage de base utilisé pour créer des pages web. Comprendre les balises HTML essentielles est une étape importante pour tout débutant qui souhaite apprendre le développement web. Dans cet article, nous allons découvrir les balises les plus courantes et leur utilisation simple.
Qu’est-ce qu’une balise HTML ?
Une balise HTML est un élément qui permet de structurer et d’organiser le contenu d’une page web. Elle est généralement composée d’une balise d’ouverture et d’une balise de fermeture, encadrant le contenu concerné.
Par exemple, la balise <p> sert à créer un paragraphe :
<p>Ceci est un paragraphe.</p>Les balises de structure de base
Pour commencer, il est important de connaître les balises qui définissent la structure générale d’une page HTML.
- <html> : la balise racine qui englobe tout le contenu de la page.
- <head> : contient des informations sur la page, comme le titre ou les liens vers les fichiers CSS.
- <title> : définit le titre affiché dans l’onglet du navigateur.
- <body> : contient tout le contenu visible de la page.
Voici un exemple simple :
<html>
<head>
<title>Ma première page</title>
</head>
<body>
<p>Bienvenue sur ma page web.</p>
</body>
</html>Les balises pour organiser le texte
Le texte est l’élément principal d’une page web. Voici les balises essentielles pour le structurer :
- <h1> à <h6> : titres et sous-titres, du plus important (<h1>) au moins important (<h6>).
- <p> : paragraphe, pour regrouper des phrases.
- <br> : saut de ligne, pour passer à la ligne suivante sans créer un nouveau paragraphe.
- <strong> : texte en gras, pour mettre en valeur une partie du texte.
- <em> : texte en italique, souvent utilisé pour insister ou citer.
Exemple d’utilisation :
<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<p>Ceci est un paragraphe avec du texte en <strong>gras</strong> et en <em>italique</em>.</p>
<p>Voici un saut de ligne :<br>Nouvelle ligne.</p>Les balises pour créer des listes
Les listes permettent d’organiser des informations sous forme d’éléments regroupés.
- <ul> : liste à puces (non ordonnée).
- <ol> : liste numérotée (ordonnée).
- <li> : élément de liste, utilisé à l’intérieur de <ul> ou <ol>.
Exemple de liste à puces :
<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ul>Exemple de liste numérotée :
<ol>
<li>Premier point</li>
<li>Deuxième point</li>
<li>Troisième point</li>
</ol>Les balises pour insérer des liens et des images
Les liens et les images sont essentiels pour enrichir une page web.
- <a> : crée un lien hypertexte. L’attribut href indique la destination.
- <img> : insère une image. L’attribut src indique le chemin de l’image, et alt fournit une description alternative.
Exemple de lien :
<a href="https://www.example.com">Visiter Example</a>Exemple d’image :
<img src="image.jpg" alt="Description de l’image">Les balises pour structurer le contenu
Pour organiser le contenu en sections, on utilise des balises spécifiques :
- <div> : bloc générique, utilisé pour regrouper des éléments.
- <header> : en-tête d’une page ou d’une section.
- <nav> : zone de navigation, souvent utilisée pour les menus.
- <section> : section thématique du contenu.
- <footer> : pied de page ou de section.
Exemple simple :
<header>
<h1>Bienvenue</h1>
</header>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<p>Voici le contenu principal.</p>
</section>
<footer>
<p>© 2024 Mon site web</p>
</footer>Les balises pour les tableaux
Les tableaux permettent de présenter des données sous forme de lignes et colonnes.
- <table> : crée un tableau.
- <tr> : crée une ligne dans le tableau.
- <th> : cellule d’en-tête (texte en gras et centré).
- <td> : cellule de données.
Exemple de tableau simple :
<table>
<tr>
<th>Nom</th>
<th>Âge</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>Les balises pour les formulaires
Les formulaires permettent de recueillir des informations auprès des visiteurs.
- <form> : contient le formulaire.
- <input> : champ de saisie (texte, bouton, case à cocher, etc.).
- <label> : étiquette pour un champ, améliore l’accessibilité.
- <textarea> : zone de texte multilignes.
- <button> : bouton cliquable.
Exemple simple de formulaire :
<form action="/envoyer" method="post">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom"><br>
<label for="message">Message :</label>
<textarea id="message" name="message"></textarea><br>
<button type="submit">Envoyer</button>
</form>