Numérique et sciences informatiques (spécialité) · Première

HTML et CSS : cours de Première NSI

Publié le 7 novembre 2026 · Mis à jour le 7 novembre 2026 · Signaler une erreur

L'essentiel

HTML est un langage de balises : il décrit la structure d'une page (titres, paragraphes, liens, listes, sons, vidéos). ²⁴
Une balise ouvrante contient un nom et des attributs de la forme attribut=valeur ; la balise fermante reprend le nom précédé d'une barre oblique. ⁴
Un document a une racine qui contient un head et un body ; l'attribut lang indique la langue principale. ⁴
Les éléments sont de deux catégories : bloc ou texte (en ligne). ⁴
CSS s'ajoute au HTML pour la mise en forme : le HTML dit ce qu'est un contenu, le CSS dit comment il s'affiche. ⁴

Introduction : à quoi servent HTML et CSS ?

Quand tu ouvres un site dans ton navigateur, tu vois des titres, des images, des boutons et des couleurs. Derrière cet affichage, il y a un fichier texte que le navigateur lit puis traduit en image à l'écran. Ce fichier est écrit dans un langage de balises appelé HTML. ²

Le HTML ne sert pas à calculer ni à décider : il décrit le contenu. Il dit « ceci est un titre », « ceci est un paragraphe », « ceci est un lien ». Pour l'aspect visuel (couleurs, polices, marges), on y ajoute un autre langage, le CSS. ⁴ Ensemble, ils forment la base de la création de sites Web. ⁴

Dans ce cours, tu vas apprendre à lire et à écrire une page simple. Tu verras :

comment est faite une balise ;
comment est organisé un document complet ;
la différence entre éléments de bloc et éléments de texte ;
comment habiller une page avec du CSS ;
les erreurs qui reviennent le plus souvent.

Anatomie d'une balise HTML

Un élément permet de signaler, par exemple, un en-tête, un paragraphe, un lien hypertexte, une liste, un son ou une vidéo. ⁴ Le contenu concerné est placé entre deux repères : une balise qui marque le début et une balise qui marque la fin. On parle de balise ouvrante et de balise fermante. ⁴

ExempleUn paragraphe complet

<p>Bonjour, voici mon premier paragraphe.</p>

Décomposition :

 est la balise ouvrante (nom : p) ;
« Bonjour, voici mon premier paragraphe. » est le contenu affiché ;
 est la balise fermante, qui reprend le même nom.

Les parties d'une balise
Partie	Rôle	Exemple
Balise ouvrante	Marque le début de l'élément	<p>
Nom	Indique le type d'élément	p
Attribut	Précise une option sous la forme attribut=valeur	src="chat.png"
Contenu	Texte ou éléments placés à l'intérieur	Bonjour
Balise fermante	Marque la fin de l'élément	</p>

Les parties d'une balise · Chaque élément se lit de la même manière : ouverture, contenu, fermeture.

Structure d'un document HTML

Un document HTML complet n'est pas qu'une suite de paragraphes. Il possède un élément racine qui contient tous les autres. ⁴ Cette racine délimite le document. ⁴

ExempleUn squelette de page

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Ma première page</title>
  </head>
  <body>
    <h1>Bienvenue</h1>
    <p>Ceci est un paragraphe.</p>
  </body>
</html>

Lis-le de l'extérieur vers l'intérieur : la racine html enferme head et body. Le head contient un titre title qui s'affichera dans l'onglet du navigateur. Le body contient un titre de page h1 et un paragraphe p.

On dit que les éléments sont imbriqués : chaque élément est entièrement contenu dans un autre, comme des boîtes qui s'emboîtent.

Les éléments courants : de bloc ou de texte

Il existe beaucoup d'éléments, mais quelques-uns suffisent pour construire des pages complètes. Grâce à eux, on marque un titre, un paragraphe, un lien, une liste, et on peut aussi intégrer un son ou une vidéo. ⁴

En pratique, on retient l'idée suivante, que tu peux vérifier en testant :

un élément de bloc occupe sa propre ligne, comme un titre h1 ou un paragraphe p ;
un élément en ligne s'insère au milieu d'une phrase sans la couper, comme strong (mise en valeur) ou a (lien).

Besoin	Élément	Remarque
Titre principal	`h1`	un seul par page, en général
Sous-titre	`h2` à `h6`	du plus important au moins important
Paragraphe	`p`	un bloc de texte
Lien	`a`	l'attribut `href` donne la destination
Liste à puces	`ul` et `li`	chaque entrée est un `li`
Liste numérotée	`ol` et `li`	chaque entrée est un `li`
Image	`img`	attributs `src` (fichier) et `alt` (description)

MéthodeÉcrire une liste

Ouvre la liste avec ul (puces) ou ol (numéros).
Écris chaque entrée dans un élément li.
Ferme chaque li, puis ferme la liste.

<ul>
  <li>Python</li>
  <li>JavaScript</li>
</ul>

Le lien hypertexte est ce qui fait du Web un réseau de pages reliées entre elles. L'élément a reçoit un attribut href qui indique la destination. Un lien peut mener vers un autre site, vers une autre page du même site, ou rester sur la même page : un lien intra-page renvoie vers une autre partie du document déjà ouvert. ³

CSS : mettre en forme la page

Si tu affiches la page d'exemple précédente telle quelle, elle est sobre : texte noir sur fond blanc, titres plus gros. Le HTML s'occupe de la structure. Pour l'apparence, on utilise le langage de mise en forme CSS, qui accompagne le HTML dans la création de sites. ⁴

Cette séparation est précieuse : tu peux changer toutes les couleurs d'un site en modifiant un seul fichier de style, sans toucher au contenu.

ExempleUne première règle

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

p est le sélecteur : la règle vise tous les paragraphes ;
color et font-size sont des propriétés ;
navy et 18px sont leurs valeurs ;
chaque déclaration se termine par un point-virgule ;
les accolades entourent l'ensemble des déclarations.

Sélecteur	Écriture CSS	Ce qu'il vise
Par nom d'élément	`h1 { ... }`	tous les `h1`
Par classe	`.alerte { ... }`	tous les éléments portant `class="alerte"`
Par identifiant	`#entete { ... }`	l'élément portant `id="entete"`

Une classe peut être donnée à plusieurs éléments ; un identifiant doit être unique dans la page.

ExempleClasse en action

HTML :

<p>Un paragraphe normal.</p>
<p class="alerte">Attention, ce paragraphe est signalé.</p>

CSS :

.alerte {
  color: red;
  font-weight: bold;
}

Seul le second paragraphe devient rouge et gras, car lui seul porte la classe alerte.

MéthodeRelier un fichier CSS au HTML

Écris tes règles dans un fichier, par exemple style.css.
Dans le head de la page, ajoute un élément link qui désigne ce fichier :

<link rel="stylesheet" href="style.css">

Enregistre les deux fichiers dans le même dossier, puis recharge la page dans le navigateur.

On peut aussi écrire du CSS directement dans la page, mais un fichier séparé est plus propre dès que le site grandit.

color : couleur du texte ;
background-color : couleur de fond ;
font-size : taille du texte ;
text-align : alignement (left, center, right) ;
margin : espace à l'extérieur d'un élément ;
padding : espace à l'intérieur, entre le contenu et la bordure ;
border : bordure.

Plusieurs règles peuvent viser le même élément. Si elles se contredisent sur une propriété, c'est en général la règle la plus précise qui l'emporte, ou, à précision égale, la plus récente dans le fichier.

Méthode : construire une page de A à Z

ExemplePage de présentation complète

Fichier index.html :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Club informatique</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Club informatique</h1>
    <p>Nous nous retrouvons le <strong>jeudi</strong>.</p>
    <h2>Au programme</h2>
    <ul>
      <li>Pages Web</li>
      <li>Jeux en JavaScript</li>
    </ul>
  </body>
</html>

Fichier style.css :

body {
  background-color: #f5f5f5;
  text-align: center;
}
h1 {
  color: darkgreen;
}

Le HTML décrit les contenus, le CSS donne le fond gris clair, centre le texte et colore le titre principal.

Exercices corrigés

Exercice 1 Décortiquer une balise

★☆☆Environ 5 min

Un lien est écrit ainsi : une balise ouvrante dont l'intérieur (entre les signes < et >) est a href="contact.html", puis le texte « Nous écrire », puis une balise fermante.

Donne le nom de la balise.
Écris ce qu'il y a entre < et > pour la balise ouvrante, puis pour la balise fermante.
Quel est l'attribut ? Quelle est sa valeur ?
Quel texte l'utilisateur voit-il à l'écran ?

Indice 1

Le nom est le premier mot après le signe <.

Indice 2

Un attribut s'écrit nom=valeur.

Voir la correction pas à pas

Le nom de la balise est a, car c'est le premier mot après le signe <.
La balise ouvrante contient a href="contact.html" ; la balise fermante contient /a, avec une barre oblique et le même nom.
L'attribut est href ; sa valeur est "contact.html", la destination du lien.
Le contenu placé entre les deux balises est « Nous écrire » : c'est ce que l'utilisateur voit, sous forme de lien cliquable.

Toute balise se lit de la même façon : nom, attributs éventuels, contenu, fermeture. Le texte visible est toujours le contenu entre les deux balises, jamais les attributs.

Exercice 2 Corriger une page défectueuse

★★☆Environ 10 min

Voici une page mal construite :

<html>
  <head>
    <h1>Mes recettes</h1>
  </head>
  <body>
    <p>Un gâteau <strong>facile</p></strong>
    <ul>
      <li>Farine
      <li>Sucre</li>
    </ul>
  </body>
</html>

Repère au moins trois erreurs, explique-les, puis réécris la page corrigée. On veut une page en français.

Indice 1

Cherche ce qui est placé au mauvais endroit, puis les balises mal fermées.

Indice 2

Pense à l'attribut qui indique la langue sur la racine.

Voir la correction pas à pas

Le titre h1 est placé dans le head, alors que le contenu visible doit se trouver dans le body. Le navigateur corrige souvent ce genre d'erreur tout seul, mais la page n'est plus valide. On déplace donc le titre dans le body.
L'imbrication est incorrecte dans facile : strong ouvert en dernier doit se fermer en premier, donc facile.
Le premier li n'est pas fermé : on ajoute </li> après « Farine ».
La racine n'indique pas la langue : on ajoute lang="fr" sur html.
On peut aussi ajouter un title dans le head, qui reste vide sinon.

Version corrigée :

<html lang="fr">
  <head>
    <title>Mes recettes</title>
  </head>
  <body>
    <h1>Mes recettes</h1>
    <p>Un gâteau <strong>facile</strong></p>
    <ul>
      <li>Farine</li>
      <li>Sucre</li>
    </ul>
  </body>
</html>

Les trois erreurs principales sont un contenu visible placé dans le head, une imbrication croisée et une balise non fermée. Quand une page se comporte bizarrement, vérifie d'abord ces points.

Exercice 3 Écrire une règle CSS

★★★Environ 15 min

Une page contient deux paragraphes :

<p>Texte ordinaire.</p>
<p class="astuce">Pense à enregistrer ton fichier.</p>

Écris le CSS qui :

met en bleu le texte de tous les paragraphes ;
met un fond jaune clair (lightyellow) et du gras uniquement sur le paragraphe de classe astuce.

Explique ensuite ce qui s'affiche pour chaque paragraphe.

Indice 1

Un sélecteur de classe commence par un point.

Indice 2

La couleur bleue du texte s'applique aussi au paragraphe de classe astuce, qui reste un paragraphe.

Voir la correction pas à pas

Pour viser tous les paragraphes, on utilise le sélecteur d'élément p avec la déclaration color: blue;.
Pour viser le seul paragraphe signalé, on utilise le sélecteur de classe .astuce : le point indique qu'il s'agit d'une classe.
On y place deux déclarations : background-color: lightyellow; et font-weight: bold;.

Le CSS complet est :

p {
  color: blue;
}
.astuce {
  background-color: lightyellow;
  font-weight: bold;
}

Le premier paragraphe s'affiche en bleu, sur fond blanc, en graisse normale. Le second est aussi en bleu (il est un p), mais avec un fond jaune clair et en gras, grâce à la classe.

Une règle large (par élément) pose le style commun, et une règle de classe ajoute des particularités. Le second paragraphe cumule les deux règles car elles ne se contredisent pas.

Les questions qu'on se pose

Quelle est la différence entre une balise et un élément ?

Dans le langage courant, les deux mots sont employés l'un pour l'autre : un élément HTML s'appelle aussi balise ou tag. ⁴ Si l'on veut être précis, l'élément est l'ensemble « balise ouvrante + contenu + balise fermante », alors que la balise désigne chacun des deux repères.

Pourquoi séparer le HTML et le CSS au lieu de tout écrire au même endroit ?

Parce que ce ne sont pas les mêmes rôles : le HTML décrit le contenu, le CSS son aspect. ⁴ En les séparant, tu modifies le style de dix pages en changeant un seul fichier, et tu peux relire le contenu sans être gêné par des détails de couleur.

Que se passe-t-il si j'oublie de fermer une balise ?

Le navigateur ne plante pas : il essaie de deviner où ton élément s'arrête. Le résultat peut donc être inattendu, par exemple un texte entier en gras. Prends l'habitude de fermer chaque balise tout de suite après l'avoir ouverte, puis de remplir son contenu.

Comment savoir si un élément est de bloc ou en ligne ?

Teste-le : place-le entre deux phrases dans une page. S'il passe à la ligne et occupe toute la largeur, c'est un bloc ; s'il reste dans le fil de la phrase, il est en ligne. Les deux catégories existent en HTML. ⁴ Un titre h1 ou un paragraphe p sont des blocs ; strong et a sont en ligne.

Faut-il apprendre toutes les balises par cœur ?

Non. Retiens la structure d'une balise, la structure d'un document et une dizaine d'éléments courants (titres, paragraphe, liste, lien, image). Pour le reste, une page de référence suffit. L'important est de comprendre la logique : un élément, des attributs, un contenu.

Sources

Ressources libres sur la science informatique - programmation, réseau, codage de l'information, Éduscol STI. Consulté le 7 novembre 2026.
Ressource pédagogique NSI — HTML & CSS, Éduscol. Consulté le 7 novembre 2026.
HTML & CSS en NSI — Cours et exercices, Académie de Lyon. Consulté le 7 novembre 2026.
Élément HTML, Wikipédia. Consulté le 7 novembre 2026.

Les numéros dans le texte renvoient à ces sources. Une source qui ne dit pas ce qu'on lui fait dire ? Signale-le.

Signaler une erreur sur cette page

HTML et CSS : cours de Première NSI

L'essentiel

Introduction : à quoi servent HTML et CSS ?

Anatomie d'une balise HTML

Structure d'un document HTML

Les éléments courants : de bloc ou de texte

CSS : mettre en forme la page

Méthode : construire une page de A à Z

Exercices corrigés

Exercice 1 Décortiquer une balise

Exercice 2 Corriger une page défectueuse

Exercice 3 Écrire une règle CSS

Quiz

Les questions qu'on se pose

Sources

Primaire

Collège

Lycée

Supérieur