Aller au contenu principal

Le HTML

Introduction

Le développement web de base repose sur deux technologies essentielles :

  • Le HTML (HyperText Markup Language) ;
  • Le CSS (Cascading Style Sheets).

Ces deux langages permettent de structurer et de styliser des pages web.

Définition

Le HTML est un langage de balisage utilisé pour définir la structure et le contenu d'une page web. Contrairement aux langages de programmation classiques (comme Python), le HTML ne contient pas de logique ou de calculs. Il décrit simplement des éléments d'une page, comme :

  • Des titres ;
  • Du texte ;
  • Des images ;
  • Des liens ;
  • Des tableaux ;
  • Des formulaires, etc.

Fonctionnement​

Le HTML fonctionne avec des balises (tags) entourées de crochets angulaires < >.

👉 En pratique, une balise sert simplement à dire au navigateur ce que représente le contenu :

  • un titre ;
  • un paragraphe ;
  • une image ;
  • un lien, etc.

Le navigateur lit le fichier HTML de haut en bas et affiche chaque élément en fonction de la balise utilisée.

Par exemple :

<h1>Bienvenue sur mon site</h1>
<p>Ceci est un paragraphe de texte.</p>

Dans cet exemple :

  • <h1> indique un gros titre.
  • <p> indique un paragraphe de texte.
Ouverture/Fermeture

Chaque balise possède une ouverture (ex. : <h1>) et, dans la plupart des cas, une balise de fermeture correspondante (ex. : </h1>).

Structure basique d'une page

Le code minimal d'une page :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>titre de la page</title>
    </head>
    <body>

    </body>
</html>

La balise <meta> permet de préciser l'encodage des caractères.
La balise <title> permet de marquer un titre dans l'onglet de la page.

👉 À retenir :

  • Tout ce qui est visible à l’écran se trouve dans la balise <body>.
  • La balise <head> contient des informations utiles pour le navigateur, mais qui ne s’affichent pas directement sur la page.

Différentes balises​

Chaque balise HTML a un rôle précis : elle indique au navigateur comment afficher le contenu.

Quelques balises HTML courantes :

  • <html> : Définit la structure globale de la page.
  • <head> : Contient des métadonnées, comme le titre de la page ou des liens vers des fichiers CSS.
  • <body> : Contient tout le contenu visible de la page.
  • <a> : Crée des liens hypertexte.
  • <img> : Insère des images.
  • <ul> et <li> : Créent des listes.
  • <p> : Crée des paragraphes.
  • <h1>, <h2> jusqu'à <h6> : Créent des titres de niveau 1, 2, ... , 6.

Il existe beaucoup de balises différentes, ajoutant du contenu dans une page, manipulant le texte, etc.
Les balises peuvent également s'imbriquer les unes dans les autres :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>titre de la page</title>
    </head>
    <body>
        <div>
            <a href="monbureaunumerique.fr">Lien vers MBN</a>
        </div>
    </body>
</html>

👉 On peut voir les balises comme des boîtes : une balise peut en contenir une autre, tant que l’ouverture et la fermeture sont correctement respectées.

Attributs​

Certaines balises ont besoin d'attributs pour fonctionner, c'est-à-dire que l'on doit leur préciser des informations, en plus du tag.

C'est notamment le cas pour les balises <img> ou <a>, a qui l'on doit préciser pour l'un la source de l'image à insérer dans la page, et pour l'autre le lien à insérer :

<img src="chat.png">
<a href="nsi-learning.fr">Lien vers le site</a>
  • Pour img, on précise l'attribut src : la position de l'image à insérer ;
  • Pour a, on précise l'attribut href : le lien vers qui la balise doit renvoyer lorsque l'on clique dessus.

Erreurs fréquentes​

❌ Oublier une balise de fermeture :

<p>Bonjour

❌ Mal imbriquer les balises :

<p><strong>Texte</p></strong>

✅ Correct :

<p><strong>Texte</strong></p>

Ces erreurs peuvent empêcher la page de s’afficher correctement.

Question 1 sur 17
🧠

Vérifie tes connaissances

⭐Score: 0/17
Question 17

Quelle écriture est correcte ?