HTML & CSS, les fondamentaux

HTML dit ce que sont les choses (un titre, un paragraphe, une liste, un bouton). CSS dit à quoi elles ressemblent (couleurs, espacements, disposition). Confondre les deux est la source de la plupart des difficultés des débutants.

C'est le socle de JavaScript et de tout le front-end.

01 — Deux rôles distincts

Structure, puis présentation

On écrit d'abord un HTML propre et lisible sans style, puis on l'habille avec CSS. Un HTML bien structuré est plus facile à styler, à rendre accessible et à référencer.

02 — La sémantique

Choisir la bonne balise

• En-têtes, navigation, contenu principal, pied de page identifiés par des balises dédiées.
• Titres hiérarchisés (un seul H1, puis H2, H3…).
• Listes pour des listes, boutons pour des actions, liens pour naviguer.
• Attribut alt sur les images porteuses de sens.

03 — Le modèle de boîte

Comprendre l'espacement

Chaque élément est une boîte : contenu, marge intérieure (padding), bordure, marge extérieure (margin). La majorité des « bugs » de mise en page viennent d'une mauvaise compréhension de ce modèle.

04 — La mise en page moderne

Flexbox et Grid

Flexbox pour aligner des éléments sur une ligne ou une colonne ; Grid pour des grilles à deux dimensions. Ensemble, ils remplacent les anciennes bidouilles (float, positions absolues à tout-va).

05 — Responsive et accessibilité

Pour tous les écrans, pour tout le monde

• Unités relatives, images fluides, points de rupture (media queries) selon le contenu.
• Contrastes suffisants, taille de texte lisible.
• Navigation possible au clavier, focus visible.

06 — Questions fréquentes

Questions fréquentes

Faut-il apprendre un préprocesseur (Sass) ?

Pas au début. CSS moderne (variables, imbrication) couvre beaucoup. Sass s'ajoute quand les feuilles de style grossissent.

Bootstrap ou CSS pur ?

Apprenez le CSS d'abord. Un framework fait gagner du temps ensuite, mais sans les bases on ne sait pas le dépanner.

Combien de temps pour être à l'aise ?

Quelques semaines pour reproduire des maquettes simples, quelques mois pour des mises en page complexes et accessibles.

07 — Ressources & liens

Où aller, concrètement