HTML : le squelette de toute page web
HTML (HyperText Markup Language) est le langage qui structure le contenu d’une page web. Chaque élément (titre, paragraphe, image, lien) est défini par une balise. Voici toutes les balises indispensables.
Structure de base d’une page HTML
<!DOCTYPE html> <!-- Indique que c'est du HTML5 -->
<html lang="fr"> <!-- Langue de la page -->
<head>
<meta charset="UTF-8"> <!-- Encodage des caractères (accents) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Description de la page pour Google">
<title>Titre de la page (onglet du navigateur)</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Tout le contenu visible va ici -->
</body>
</html>Balises de texte
<!-- Titres : h1 (le plus important) à h6 (le moins important) -->
<h1>Titre principal (1 seul par page pour le SEO)</h1>
<h2>Sous-titre de section</h2>
<h3>Sous-sous-titre</h3>
<!-- Paragraphes -->
<p>Ceci est un paragraphe. Le navigateur ajoute automatiquement un espace avant et après.</p>
<!-- Mise en forme du texte -->
<strong>Texte important (gras)</strong>
<em>Texte mis en emphase (italique)</em>
<mark>Texte surligné</mark>
<small>Texte plus petit</small>
<del>Texte barré</del>
<code>Code informatique</code>
<!-- Saut de ligne et ligne horizontale -->
<br> <!-- Saut de ligne -->
<hr> <!-- Ligne de séparation -->Liens et navigation
<!-- Lien vers une autre page -->
<a href="https://itskillscenter.io">Visitez ITSkillsCenter</a>
<!-- Lien qui s'ouvre dans un nouvel onglet -->
<a href="https://google.com" target="_blank" rel="noopener">Google</a>
<!-- Lien vers une section de la même page -->
<a href="#contact">Aller à la section contact</a>
<section id="contact">...</section>
<!-- Lien email et téléphone -->
<a href="mailto:contact@itskillscenter.io">Nous écrire</a>
<a href="tel:+221771234567">Nous appeler</a>Images
<!-- Image basique -->
<img src="photo.jpg" alt="Description de l'image" width="600" height="400">
<!-- alt est OBLIGATOIRE :
- Décrit l'image pour les malvoyants
- Affiché si l'image ne charge pas
- Aide le référencement Google -->
<!-- Image avec légende -->
<figure>
<img src="equipe.jpg" alt="L'équipe ITSkillsCenter" loading="lazy">
<figcaption>Notre équipe de formateurs à Dakar</figcaption>
</figure>Listes
<!-- Liste non ordonnée (à puces) -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- Liste ordonnée (numérotée) -->
<ol>
<li>Apprendre HTML</li>
<li>Apprendre CSS</li>
<li>Apprendre JavaScript</li>
</ol>
<!-- Liste de définitions -->
<dl>
<dt>HTML</dt>
<dd>Langage de structure des pages web</dd>
<dt>CSS</dt>
<dd>Langage de mise en forme visuelle</dd>
</dl>Tableaux
<table>
<thead>
<tr>
<th>Formation</th>
<th>Durée</th>
<th>Prix</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML/CSS</td>
<td>30h</td>
<td>50 000 FCFA</td>
</tr>
<tr>
<td>JavaScript</td>
<td>40h</td>
<td>75 000 FCFA</td>
</tr>
</tbody>
</table>Balises sémantiques (HTML5)
<!-- Ces balises donnent du SENS à votre contenu (bon pour le SEO) -->
<header>En-tête du site (logo, navigation)</header>
<nav>Menu de navigation</nav>
<main>Contenu principal (1 seul par page)</main>
<section>Section thématique</section>
<article>Contenu autonome (article de blog, produit)</article>
<aside>Contenu secondaire (sidebar, publicités)</aside>
<footer>Pied de page (copyright, liens légaux)</footer>
<!-- Structure type d'une page -->
<body>
<header>
<nav>...</nav>
</header>
<main>
<section>...</section>
<section>...</section>
</main>
<aside>...</aside>
<footer>...</footer>
</body>💡 Pourquoi les balises sémantiques ?
- SEO : Google comprend mieux la structure de votre page
- Accessibilité : les lecteurs d’écran naviguent entre les sections
- Lisibilité : le code est plus clair que des
<div>partout
Formulaires
<form action="traitement.php" method="POST">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" required>
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<label for="message">Message :</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Envoyer</button>
</form>
<!-- Types d'input utiles -->
<input type="text"> <!-- Texte -->
<input type="email"> <!-- Email (validé) -->
<input type="password"> <!-- Mot de passe -->
<input type="number"> <!-- Nombre -->
<input type="tel"> <!-- Téléphone -->
<input type="date"> <!-- Date -->
<input type="url"> <!-- URL -->
<input type="file"> <!-- Fichier -->
<input type="checkbox"> <!-- Case à cocher -->
<input type="radio"> <!-- Bouton radio -->Conteneurs génériques
<!-- div : conteneur bloc (prend toute la largeur) -->
<div class="carte">
<h3>Titre</h3>
<p>Contenu</p>
</div>
<!-- span : conteneur en ligne (dans le texte) -->
<p>Le prix est de <span class="prix">15 000 FCFA</span></p>Exercice pratique
🎯 Défi : Page web complète en HTML pur
- Créez une page avec la structure sémantique complète (header, nav, main, footer)
- Ajoutez : un titre h1, 3 sections avec h2, des paragraphes, une image avec figure
- Créez un menu de navigation avec 4 liens
- Ajoutez un tableau avec 3 colonnes et 4 lignes
- Créez un formulaire de contact complet
- Validez votre code sur validator.w3.org
