cours1 min de lecture

HTML et CSS — rappel de structure

Les briques de base d'une page Web — balises, attributs, sélecteurs CSS. Socle indispensable avant tout JavaScript.

Introduction

Avant de rendre une page Web interactive, encore faut-il qu'elle existe sous une forme manipulable. Cette forme, c'est le HTML (HyperText Markup Language) pour la structure, et le CSS (Cascading Style Sheets) pour la présentation. Vous avez probablement croisé ces deux langages en classe de Seconde ; ce cours en rappelle les fondamentaux et pose des ressources pour combler les éventuels manques, car tout le reste du chapitre — événements, DOM, formulaires — s'appuie sur eux.

Pour réviser HTML et CSS, voir le cours SNT de Seconde HTML et CSS — le contenu et la présentation. Si vous n'avez pas fait SNT, ou si certains points vous échappent, ce cours en présente toutes les bases sans prérequis.

Une page Web est un arbre de balises imbriquées : <html> contient <head> (métadonnées invisibles) et <body> (contenu visible). Le navigateur lit ce code, construit une représentation interne, puis l'affiche.

Anatomie d'une balise HTML

Une balise s'écrit entre chevrons et délimite un contenu :

<p>Bonjour, monde.</p>

Ici, <p> ouvre un paragraphe, </p> le ferme. Une balise peut porter des attributs sous forme nom="valeur" :

<a href="https://nsi.rocks" target="_blank">Site du cours</a>

href indique la destination du lien, target="_blank" demande l'ouverture dans un nouvel onglet.

Certaines balises sont auto-fermantes car elles n'ont pas de contenu : <img src="photo.jpg" alt="Description">, <br>, <input>, <hr>.

Une page minimale complète

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Ma première page</title>
  </head>
  <body>
    <h1>Bienvenue</h1>
    <p>Voici un paragraphe d'introduction.</p>
    <ul>
      <li>Premier point</li>
      <li>Deuxième point</li>
    </ul>
  </body>
</html>

Quelques balises structurantes à connaître :

Balise	Rôle
`<h1>` à `<h6>`	Titres hiérarchisés
`<p>`	Paragraphe de texte
`<ul>`, `<ol>`, `<li>`	Listes non ordonnées / ordonnées
`<a href="…">`	Lien hypertexte
`<img src="…" alt="…">`	Image
`<div>`	Conteneur générique (bloc)
`<span>`	Conteneur générique (inline)
`<button>`	Bouton cliquable

Quelle balise sert à créer un lien hypertexte ?

L'arbre du document

Une page HTML forme une arborescence : chaque balise a un parent (sauf <html>, racine) et peut avoir des enfants. Cette structure est ce que JavaScript manipulera plus tard, sous le nom de DOM (Document Object Model). Pour l'instant, retenez que la position d'une balise dans l'arbre est cruciale — un <li> doit vivre dans un <ul> ou <ol>, jamais isolé.

<body>
  <header>
    <h1>Titre du site</h1>
  </header>
  <main>
    <article>
      <h2>Un article</h2>
      <p>Son contenu.</p>
    </article>
  </main>
</body>

CSS — donner du style

Le HTML décrit quoi, le CSS décrit comment c'est affiché. Le CSS fonctionne par règles, chaque règle associant un sélecteur à des propriétés :

p {
  color: navy;
  font-size: 18px;
  line-height: 1.5;
}

h1 {
  text-align: center;
  border-bottom: 2px solid gray;
}

Les principaux sélecteurs :

Sélecteur	Cible
`p`	Toutes les balises `<p>`
`.intro`	Toutes les balises avec `class="intro"`
`#header`	La balise unique avec `id="header"`
`ul li`	Les `<li>` qui descendent d'un `<ul>`
`button:hover`	Un `<button>` au survol de la souris

Comment cibler en CSS la balise avec id='menu' ?

Lier HTML et CSS

Trois manières de coller du CSS à du HTML :

<!-- 1. CSS externe (recommandé) -->
<link rel="stylesheet" href="style.css">

<!-- 2. CSS dans la page -->
<style>
  p { color: red; }
</style>

<!-- 3. CSS inline (à éviter) -->
<p style="color: red;">Texte rouge</p>

La méthode externe est presque toujours la bonne : un seul fichier de styles, partagé par toutes les pages d'un site.

Classes et identifiants

Deux attributs HTML omniprésents :

id="…" : identifiant unique dans la page. Un seul id="footer" par document. Pratique pour cibler depuis JavaScript ou CSS.
class="…" : étiquette partagée entre plusieurs balises. Une même balise peut porter plusieurs classes : class="bouton primaire grand".

<button id="envoi" class="bouton primaire">Envoyer</button>
<button class="bouton secondaire">Annuler</button>

.bouton {
  padding: 8px 16px;
  border-radius: 4px;
}

#envoi {
  background-color: green;
  color: white;
}

Un id doit être unique dans la page. Plusieurs balises avec le même id provoquent des bugs subtils, notamment quand JavaScript essaie de cibler l'élément avec document.getElementById.

Cas particuliers et pièges

Balises non fermées : oublier </p> peut casser silencieusement la mise en page. Le navigateur essaie de réparer, mais le résultat est imprévisible.
Indentation cosmétique : l'indentation n'a aucune valeur sémantique en HTML. Elle aide la lecture humaine, rien de plus.
Sensibilité à la casse : <DIV> et <div> sont équivalents en HTML5, mais la convention est tout en minuscules. Idem pour les attributs.
Espaces dans les attributs : class="bouton primaire" définit deux classes (bouton et primaire), pas une seule.

Combien de classes pour ?

Pour aller plus loin

Le HTML moderne propose des balises sémantiques (<header>, <nav>, <main>, <article>, <section>, <footer>) qui décrivent le rôle des zones d'une page. CSS, lui, a évolué vers des modèles de mise en page puissants comme Flexbox et Grid. Vous les approfondirez en pratique lors des TP du chapitre — pour l'instant, l'essentiel est de savoir lire un arbre HTML et de retrouver une balise par son id ou sa classe.