Liste des balises HTML5 essentielles avec exemples
🏗️ Structure de base
Définit la base de tout document HTML.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma première page</title>
</head>
<body>
<!-- Commentaire HTML -->
</body>
</html><!DOCTYPE html>: indique l’utilisation de HTML5.
<html>: racine du document.
<head>: contient les métadonnées et configurations.
<meta>: définit des informations comme l’encodage ou la vue adaptative.
<title>: titre qui apparaît dans l’onglet du navigateur.
<body>: contient tout le contenu visible de la page.
<!– Texte quelconque –>: commentaire visible uniquement par le développeur dans le code.
📝 Texte et formatage
Organisent et donnent du style au texte du document.
<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<p>Ceci est un paragraphe.</p>
<strong>Texte important</strong>
<em>Texte avec emphase</em>
<span style="color:red;">Texte en ligne</span>
<br> Saut de ligne
<a href="https://exemple.com">Lien</a><h1>–<h6>: hiérarchie de titres, <h1> étant le plus important et <h6> le moins.
<p>: définit un paragraphe.
<strong>: indique l’importance (texte en gras).
<em>: met en évidence avec emphase (texte en italique).
<span>: conteneur en ligne pour appliquer des styles.
<br>: insère un saut de ligne.
<a>: crée un lien vers une autre page ou ressource (attribut href).
🎬 Multimédia
Insèrent des images, vidéos, audios ou graphiques SVG.
<img src="photo.jpg" alt="Description de l'image">
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="blue" stroke-width="3" fill="lightblue" />
</svg>
<video controls width="320">
<source src="video.mp4" type="video/mp4">
</video>
<audio controls>
<source src="audio.mp3" type="audio/mp3">
</audio><img>: insère une image (l’attribut alt décrit son contenu pour l’accessibilité).
<svg>: permet de créer des graphiques vectoriels évolutifs.
<video>: affiche une vidéo avec contrôles.
<audio>: lit du son ou de la musique.
<source>: définit les fichiers multimédias dans <video> ou <audio>.
🧩 Formulaires
Permettent de collecter des informations utilisateur via des champs interactifs.
<form action="/envoyer" method="post">
<label>Nom:</label>
<input type="text" name="nom">
<label>Âge:</label>
<input type="number" name="age">
<label>Genre:</label>
<input type="radio" name="genre" value="homme"> Homme
<input type="radio" name="genre" value="femme"> Femme
<label>Loisirs:</label>
<input type="checkbox" name="sport"> Sport
<input type="checkbox" name="musique"> Musique
<label>Commentaires:</label>
<textarea name="commentaires" rows="3" cols="30"></textarea>
<label>Pays:</label>
<select name="pays">
<option>Espagne</option>
<option>Mexique</option>
</select>
<input type="submit" value="Envoyer">
</form><form>: regroupe les champs du formulaire.
<label>: étiquette descriptive d’un champ.
<input type= »text »>: champ de texte court.
<input type= »number »>: champ numérique.
<input type= »radio »>: option unique dans un groupe.
<input type= »checkbox »>: sélection multiple.
<textarea>: zone pour texte long ou commentaires.
<select> / <option>: liste déroulante.
<input type= »submit »>: bouton pour envoyer le formulaire.
🧱 Sémantique SEO
Organisent le contenu de manière structurée et compréhensible pour les moteurs de recherche.
<header>En-tête du site</header>
<nav>Menu de navigation</nav>
<main>Contenu principal</main>
<section>Section thématique</section>
<article>Article ou post</article>
<aside>Information latérale</aside>
<footer>Pied de page</footer><header>: en-tête du site ou de la section.
<nav>: contient les liens de navigation.
<main>: contenu principal de la page.
<section>: regroupe des contenus liés.
<article>: bloc indépendant de contenu (comme un post).
<aside>: information latérale ou complémentaire.
<footer>: pied de page.
🌈 Autres balises utiles
<ul>
<li>Élément A</li>
<li>Élément B</li>
</ul>
<ol type="A">
<li>Premier élément</li>
<li>Deuxième élément</li>
</ol>
<table>
<tr><th>Nom</th><th>Âge</th></tr>
<tr><td>Ana</td><td>30</td></tr>
</table>
<figure>
<img src="image.jpg" alt="Description">
<figcaption>Légende de l'image</figcaption>
</figure><ul>: liste non ordonnée (puces).
<ol>: liste ordonnée (type="A", "a", "I", "1").
<li>: élément dans une liste.
<table>: crée des tableaux de données.
<tr>: ligne du tableau.
<th>: cellule d’en-tête.
<td>: cellule normale de données.
<figure> et <figcaption>: image avec légende descriptive.
