Le HTML (HyperText Markup Language) est le langage utilisé pour créer la structure des pages web. Il est composé de balises en français ou tags en anglais qui définissent différents types de contenu.
1. Qu'est-ce qu'une balise HTML ?
- Une balise HTML est entourée de chevrons (
<>) et peut contenir :- Une balise ouvrante :
<p> - Une balise fermante :
</p> - Un contenu entre les deux :
<p>Bonjour, monde !</p>
- Une balise ouvrante :
- Certaines balises sont autonomes et ne nécessitent pas de fermeture, comme
<img />.
2. Structure de base d'une page 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>
<h1>Bienvenue sur ma page</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html>
<!DOCTYPE html>: Indique que le document utilise le HTML5.<html>: La balise racine qui contient tout le contenu.<head>: Contient des métadonnées (titre, encodage, etc.).<body>: Contient le contenu visible de la page.
3. Les balises essentielles
A. Balises de texte
- Titre (heading) :
<h1>à<h6>pour les niveaux de titre.
<h1>Grand Titre</h1> -- unique à une page
<h2>Sous-titre</h2>
- Paragraphe :
<p>pour écrire du texte.
<p>Ceci est un paragraphe.</p>
- Texte stylisé :
<strong>: Texte en gras (important).<em>: Texte en italique.<u>: Texte souligné.
B. Liens et images
- Lien hypertexte :
<a href="URL">
<a href="https://example.com">Clique ici</a>
- Image :
<img src="URL" alt="Description" />
<img src="image.jpg" alt="Une belle image" />
C. Listes
- Liste non ordonnée :
<ul>avec<li>(puces).
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>
- Liste ordonnée :
<ol>avec<li>(numéros)
<ol>
<li>Premier</li>
<li>Deuxième</li>
</ol>
D. Tableaux
- Utiliser
<table>pour créer des tableaux.
<table>
<tr>
<th>Titre 1</th>
<th>Titre 2</th>
</tr>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
</table>
4. Balises pour organiser le contenu
A. Divisions et sections
- Division générique :
<div>pour regrouper des éléments.
<div>
<h2>Section</h2>
<p>Contenu ici.</p>
</div>
- Section logique :
<section>,<header>,<footer>,<article>.
B. Formulaires
- Utiliser
<form>pour recueillir des informations.
<form action="submit.php" method="POST">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" />
<button type="submit">Envoyer</button>
</form>
5. Attributs des balises
Les balises HTML peuvent avoir des attributs qui ajoutent des informations ou des paramètres.
- Exemple :
<a href="https://example.com" target="_blank" title="Visitez ce site">
Lien vers un site
</a>
-
href: URL du lien.target="_blank": Ouvre le lien dans un nouvel onglet.title: Affiche un texte d'information au survol.
6. Balises multimédias
- Vidéo :
<video controls>
<source src="video.mp4" type="video/mp4">
Votre navigateur ne supporte pas la vidéo.
</video>
- Audio :
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Votre navigateur ne supporte pas l'audio.
</audio>
7. Les bonnes pratiques
- Indentation : Bien organiser le code pour le rendre lisible.
- Commentaires : Utiliser
<!-- Commentaire -->pour documenter. - Validation : Vérifie ton code avec W3C Validator.