HTML et CSS : les bases

Toute page web, de la plus simple au plus grand réseau social, est affichée par le navigateur à partir de code HTML et CSS, complété le plus souvent par du JavaScript pour l’interactivité. HTML et CSS ne sont pas des langages de programmation au sens strict : ils ne calculent pas, ils décrivent. C’est ce qui les rend accessibles en quelques heures.

HTML : la structure

HTML (HyperText Markup Language) a été créé par Tim Berners-Lee au CERN pour le Web naissant, au début des années 1990. C’est un langage de balisage : on entoure le contenu de balises qui disent ce qu’il est.

<h1>Mon titre</h1>
<p>Un paragraphe avec un <a href="https://example.org">lien</a>.</p>

Une balise ouvrante <p> et une balise fermante </p> forment un élément. Les attributs apportent des précisions : href (adresse d’un lien), src (source d’une image), alt (texte alternatif), class (nom utilisé par le CSS).

Les balises essentielles

Le HTML doit décrire le sens et non l’apparence : un titre est balisé <h2> parce que c’est un titre, pas pour qu’il soit gros. Ce HTML dit « sémantique » est mieux compris par les moteurs de recherche et par les lecteurs d’écran utilisés par les personnes aveugles.

CSS : l’apparence

CSS (Cascading Style Sheets, feuilles de style en cascade) a été proposé par Håkon Wium Lie en 1994 ; la première recommandation du W3C date de 1996. Une règle CSS se compose d’un sélecteur et de déclarations :

h1 {
  color: navy;
  font-size: 2rem;
}
.alerte {
  background: #fff3cd;
  padding: 1rem;
}

Les notions clés à comprendre ensuite : le modèle de boîte (contenu, padding, border, margin), la mise en page avec Flexbox et Grid, les unités (px, rem, %, vw), et les media queries qui adaptent la page à la taille de l’écran (responsive design). La « cascade » désigne les règles qui décident quelle déclaration l’emporte quand plusieurs s’appliquent au même élément.

Un exemple complet

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ma première page</title>
  <style>
    body { font-family: sans-serif; max-width: 40rem; margin: auto; }
    h1 { color: #1a4d8f; }
  </style>
</head>
<body>
  <h1>Bonjour</h1>
  <p>Ceci est ma première page web.</p>
</body>
</html>

La partie <head> contient les informations sur la page (encodage, titre de l’onglet, styles) ; le <body> contient ce qui s’affiche. En pratique, le CSS se place dans un fichier séparé relié par <link rel="stylesheet" href="style.css">.

HTML, CSS et JavaScript

Le HTML actuel est un « standard vivant » maintenu par le WHATWG, qui a succédé au HTML5 publié par le W3C en 2014 ; le CSS évolue par modules.

Comment apprendre

1. Un éditeur de code gratuit (Visual Studio Code, ou un éditeur en ligne) et un navigateur suffisent.
2. Utiliser les outils de développement du navigateur (touche F12, ou clic droit > Inspecter) pour voir le HTML et le CSS de n’importe quelle page.
3. Suivre une documentation de référence : MDN Web Docs, disponible en français.
4. Réaliser un petit projet concret : CV en ligne, page de présentation.
5. Publier gratuitement sur un hébergeur de sites statiques.

Questions fréquentes

Combien de temps pour apprendre HTML et CSS ?

Quelques heures pour les bases du HTML, quelques semaines de pratique pour être à l’aise avec la mise en page CSS. Maîtriser finement le CSS et l’accessibilité demande plus longtemps.

Faut-il apprendre HTML à l’heure des créateurs de sites et de l’IA ?

Pour créer un site simple, ce n’est pas indispensable. Mais comprendre le HTML aide à corriger un affichage, à vérifier le code produit par un outil et c’est la base de tout métier du Web.

HTML est-il un langage de programmation ?

Non, c’est un langage de description (de balisage) : il ne contient ni conditions ni boucles. JavaScript, lui, est un langage de programmation.