HTML
Documentation HTML
Apprenez les éléments essentiels qui permettent de structurer une page web.
Nesting
1. À quoi ça sert ?
L’imbrication place un élément HTML à l’intérieur d’un autre pour créer des groupes logiques et représenter les relations entre les contenus.
2. Quand l’utiliser ?
Pour regrouper des contenus qui appartiennent au même bloc.
3. Syntaxe essentielle
<section>
<h2>Bienvenue</h2>
<p>Voici mon site.</p>
</section>4. Ce qui se passe
h2 et p deviennent les enfants de section.
5. À ne pas confondre avec
Des éléments placés l’un après l’autre, qui sont des voisins et non des enfants.
6. Erreurs fréquentes
Fermer les balises dans le mauvais ordre.
7. À retenir
La dernière balise ouverte doit être la première refermée.
Input fields
1. À quoi ça sert ?
Un champ permet à la personne de saisir une information dans un formulaire afin que le site puisse ensuite la récupérer et l’utiliser.
2. Quand l’utiliser ?
Pour demander un nom, un e-mail, un mot de recherche ou une autre valeur.
3. Syntaxe essentielle
<label for="name">Prénom</label>
<input id="name" name="name" type="text">4. Ce qui se passe
Cliquer sur le libellé place le curseur dans le champ associé.
5. À ne pas confondre avec
textarea, prévu pour écrire un texte sur plusieurs lignes.
6. Erreurs fréquentes
Oublier le libellé ou utiliser seulement un placeholder.
7. À retenir
Chaque champ doit avoir un libellé clair et un attribut name.
Document structure
1. À quoi ça sert ?
La structure du document organise les informations techniques et le contenu visible afin que le navigateur interprète correctement la page.
2. Quand l’utiliser ?
Dans chaque fichier HTML complet.
3. Syntaxe essentielle
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma page</title>
</head>
<body>Mon contenu</body>
</html>4. Ce qui se passe
head contient les informations sur la page ; body contient ce qui est affiché.
5. À ne pas confondre avec
header, qui représente un en-tête visible placé dans body.
6. Erreurs fréquentes
Placer le contenu visible dans head ou oublier le titre de la page.
7. À retenir
Une page commence par le doctype et sépare ses informations de son contenu.
Lists
1. À quoi ça sert ?
Une liste regroupe plusieurs éléments liés dans une structure claire, avec ou sans ordre, pour rendre leur lecture plus facile.
2. Quand l’utiliser ?
Pour des étapes, un menu, des ingrédients ou une série de choix.
3. Syntaxe essentielle
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>4. Ce qui se passe
ul crée une liste à puces ; ol crée une liste numérotée.
5. À ne pas confondre avec
Une suite de paragraphes, qui ne représente pas automatiquement une liste.
6. Erreurs fréquentes
Placer du texte directement dans ul sans utiliser de balise li.
7. À retenir
Utilisez ol si l’ordre compte, sinon utilisez ul.
Deployment
1. À quoi ça sert ?
Le déploiement place les fichiers du site sur un serveur afin de les rendre accessibles sur Internet grâce à une adresse web.
2. Quand l’utiliser ?
Quand votre page est prête à être consultée et partagée.
3. Syntaxe essentielle
mon-site/
├── index.html
├── style.css
└── script.js4. Ce qui se passe
Un hébergeur copie vos fichiers sur un serveur et fournit une adresse web.
5. À ne pas confondre avec
Enregistrer le fichier sur votre ordinateur, ce qui ne le publie pas en ligne.
6. Erreurs fréquentes
Oublier index.html, utiliser de mauvais chemins ou ne pas envoyer tous les fichiers.
7. À retenir
Vérifiez les liens et les fichiers avant de publier le dossier complet.