17 chapitres5 h 38 minDébutant
HTML et CSS
Cours HTML et CSS gratuit pour le BTS SIO : balises, formulaires, Flexbox, Grid, responsive, accessibilité, SEO, mise en ligne et 70 exercices corrigés.
Par Josselyn C., prof de BTS SIO. Mis à jour le .
L'essentiel
HTML et CSS sont les deux langages de toute page web : HTML décrit le contenu et sa structure (titres, paragraphes, liens, images, formulaires), CSS décrit sa présentation (couleurs, polices, espacements, mise en page). Au BTS SIO, ils servent dès la première année, en SLAM comme en SISR : la compétence « Développer la présence en ligne de l'organisation » du bloc 1, évaluée à l'oral E5, porte sur un site, ses mentions légales et son référencement ; en SLAM, chaque application web de ton E6 a une interface en HTML et en CSS.
À la fin de ce cours, tu sauras :
- écrire une page HTML valide, structurée avec les bonnes balises sémantiques ;
- construire un formulaire accessible et comprendre pourquoi sa validation dans le navigateur ne suffit pas ;
- mettre en forme une page en CSS, comprendre quelle règle gagne et pourquoi ;
- construire une mise en page avec Flexbox et Grid, qui s'adapte du téléphone à l'écran large ;
- rendre un site accessible (RGAA, WCAG), le préparer pour Google et publier ses mentions légales ;
- mettre un site en ligne, avec un nom de domaine et HTTPS.
Prérequis. Aucun. Il te faut un éditeur de code (VS Code, gratuit) et un navigateur récent (Firefox, Chrome, Edge ou Safari). Rien à installer d'autre pour les chapitres 1 à 12.
Le fil rouge. Tout au long du cours, tu construis le site de la médiathèque des Tilleuls, une médiathèque municipale fictive : une page d'accueil, un agenda des ateliers, un formulaire d'inscription, des mentions légales. C'est le genre de site que l'on te confie en stage, et c'est une très bonne réalisation pour la compétence « présence en ligne » de ton portfolio E5.
Comment travailler. Tape les exemples toi-même au lieu de les copier : c'est en tapant que tu repères les balises et les accolades. Garde le navigateur ouvert à côté de l'éditeur, enregistre, rafraîchis, regarde. Chaque chapitre se termine par des exercices dont la réponse est masquée : cherche d'abord, ouvre ensuite.
| Ton objectif | Chapitres à travailler en priorité |
|---|---|
| Découvrir HTML et CSS | 1 à 9 |
| Construire ton portfolio | 2, 4, 6, 9, 10, 13 et 15 |
| Préparer la compétence « présence en ligne » (E5) | 12, 13, 14 et 15 |
| Faire les interfaces de tes applications (E6 SLAM) | 4, 5, 9, 10 et 11 |
| Réviser avant une évaluation | 16 et 17 |
Sommaire
HTML et CSS
0 chapitre sur 17
- Chapitre 1 : C'est quoi HTML et CSS ? Comment marche une page web15 min
- Chapitre 2 : Structure d'une page HTML : balises, squelette et texte22 min
- Chapitre 3 : Liens, images et tableaux en HTML22 min
- Chapitre 4 : Balises sémantiques HTML5 : header, nav, main, section, article18 min
- Chapitre 5 : Formulaire HTML : input, label et validation23 min
- Chapitre 6 : Les bases du CSS : sélecteurs, couleurs, unités et polices23 min
- Chapitre 7 : Cascade, héritage et spécificité en CSS16 min
- Chapitre 8 : Box model, display et position en CSS21 min
- Chapitre 9 : Flexbox et CSS Grid : la mise en page25 min
- Chapitre 10 : Responsive design : media queries et images responsives21 min
- Chapitre 11 : CSS moderne : variables, nesting, :has() et animations23 min
- Chapitre 12 : Accessibilité web : RGAA et WCAG en pratique18 min
- Chapitre 13 : Référencement naturel (SEO) d'une page web17 min
- Chapitre 14 : Mentions légales, CGU et politique de confidentialité24 min
- Chapitre 15 : Mettre un site en ligne : hébergement, nom de domaine et déploiement14 min
- Chapitre 16 : Exercices corrigés HTML et CSS type examen27 min
- Chapitre 17 : Aide-mémoire : balises HTML et propriétés CSS10 min
Questions fréquentes
Quelle est la différence entre HTML et CSS ?
HTML décrit le contenu d'une page et sa structure : ceci est un titre, ceci est un paragraphe, ceci est un lien ou un champ de formulaire. CSS décrit sa présentation : couleurs, polices, espacements, mise en page. On les écrit dans des fichiers séparés, ce qui permet de changer l'apparence de tout un site sans toucher au contenu (chapitre 1).
HTML est-il un langage de programmation ?
Non. HTML est un langage de balisage : il décrit un document, mais il n'a ni variables, ni conditions, ni boucles. CSS est un langage de feuilles de style. Pour programmer un comportement dans la page (réagir à un clic, calculer, interroger un serveur), on utilise JavaScript.
Comment relier un fichier CSS à une page HTML ?
Dans le <head> de la page, ajoute <link rel="stylesheet" href="css/style.css">, où href est le chemin du fichier CSS à partir de la page. Si le style ne s'applique pas, ouvre l'onglet Réseau des outils de développement (F12) : un 404 sur style.css signale un chemin faux ou un nom de fichier mal orthographié (les trois façons d'ajouter du CSS).
Quelle est la différence entre margin et padding ?
Le padding est l'espace intérieur, entre le contenu et la bordure : il agrandit la boîte, sa couleur de fond et sa zone cliquable. La margin est l'espace extérieur, qui écarte la boîte de ses voisines ; elle est transparente. Pour aérer le texte d'un bouton, c'est du padding ; pour éloigner deux cartes, de la margin, ou mieux gap (le box model).
Flexbox ou Grid : lequel utiliser ?
Flexbox aligne des éléments sur une seule dimension, une ligne ou une colonne : un menu, une rangée de boutons, le contenu d'une carte. Grid les place sur deux dimensions, lignes et colonnes à la fois : la structure d'une page, une grille de cartes alignées. On combine souvent les deux, Grid pour la page et Flexbox dans les composants (chapitre 9).
Quelle est la différence entre une classe et un id ?
Une classe (class="carte", ciblée en CSS par .carte) peut être portée par autant d'éléments que tu veux, et un élément peut avoir plusieurs classes. Un id (id="contenu", ciblé par #contenu) est unique dans la page ; il sert d'ancre pour les liens et de repère pour les scripts. En CSS, on met en forme avec des classes : un id pèse beaucoup plus lourd dans le calcul de spécificité et rend les règles difficiles à surcharger.
Comment rendre un site responsive ?
Ajoute la balise <meta name="viewport" content="width=device-width, initial-scale=1">, écris d'abord le CSS de la version mobile, puis enrichis-le pour les écrans plus larges avec des media queries (@media (width >= 48rem)). Utilise des largeurs fluides (%, fr, max-width), des grilles qui s'adaptent seules (repeat(auto-fill, minmax(16rem, 1fr))) et des images avec srcset (chapitre 10).
Quelles mentions légales doit afficher un site internet ?
L'article 1-1 de la LCEN impose d'identifier l'éditeur du site (nom ou dénomination, adresse, téléphone, numéro d'immatriculation et capital pour une société), le directeur de la publication et l'hébergeur (nom, adresse, téléphone). Les mentions sont accessibles depuis toutes les pages, en général par un lien dans le pied de page. Un particulier qui édite un site non professionnel peut rester anonyme en indiquant seulement son hébergeur (modèle de mentions légales).
Le RGAA est-il obligatoire ?
Oui pour les administrations, les organismes chargés d'une mission de service public et les entreprises dont le chiffre d'affaires en France dépasse 250 millions d'euros, qui doivent aussi publier une déclaration d'accessibilité. Depuis le 28 juin 2025, l'European Accessibility Act impose en plus l'accessibilité de nombreux services privés, dont le commerce en ligne et la banque, hors microentreprises. La version en vigueur du RGAA est la 4.1.2 ; une version 5 est annoncée (chapitre 12).
Où HTML et CSS servent-ils au BTS SIO ?
Dans les deux options, à l'oral E5 : la compétence « Développer la présence en ligne de l'organisation » porte sur un site, ses mentions légales, son référencement et la mesure de sa visibilité. En SLAM, les interfaces web des applications de ton E6 sont en HTML et CSS, et la sécurité de ce que les formulaires envoient au serveur relève de l'écrit E7. Les exercices corrigés reprennent ces situations.