HTML : Comprendre les bases

HTML (HyperText Markup Language) est la base de toute page web. C’est un langage de balisage qui structure le contenu (titres, paragraphes, images, liens, etc.).

Structure d’un document HTML

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Titre de la page</title>
  </head>
  <body>
    <h1>Bonjour !</h1>
    <p>Voici ma première page HTML.</p>
  </body>
</html>

Explication des parties :

<!DOCTYPE html> : Indique que c’est un document HTML5
<html> : Conteneur principal de la page
<head> : Contient les métadonnées (titre, encodage, favicon...)
<body> : Contenu visible sur la page (texte, images, etc.)

Balises HTML essentielles

<h1> à <h6> : Titres, du plus important au moins important
<p> : Paragraphe de texte
<a href="..."> : Lien hypertexte
<img src="..."> : Image
<ul>, <ol>, <li> : Listes (non ordonnées et ordonnées)
<div> : Zone de contenu (structure/division)

Bonnes pratiques

Fermer toutes ses balises correctement (<p>...</p>)
Utiliser une indentation claire pour chaque niveau
Ajouter l’attribut alt pour les images (accessibilité)
Utiliser les bons niveaux de titre (éviter de sauter de <h1> à <h4>)
Inclure un encodage UTF-8 dans le <head>

Erreurs fréquentes à éviter

Oublier de fermer une balise (ex : <p>Bonjour)
Mettre du contenu visible dans le <head> au lieu du <body>
Oublier les guillemets dans les attributs : <a href=page.html> ❌
Dupliquer les IDs : chaque id doit être unique
Utiliser <br> pour faire de gros espaces (utilisez plutôt du CSS)

Exemple de page complète

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Ma première page</title>
  </head>
  <body>
    <h1>Bienvenue !</h1>
    <p>Ceci est une page HTML basique.</p>
    <img src="image.jpg" alt="Image de démonstration">
    <a href="https://smeax.fr">Retour au site</a>
  </body>
</html>

Tuto css / JavaScript

Pour suivre le prochaine tuto sur le CSS clique ICI
Pour suivre le prochaine tuto sur le JavaScript clique ICI