Aide-mémoire HTML et CSS : recherche, impression et démos | We.Inc
Recherchez toutes les balises HTML et propriétés CSS courantes sur une seule fiche : structure sémantique, texte, formulaires, médias, sélecteurs, unités, mise en page et style visuel, avec de mini démos en direct et une mise en page adaptée à l'impression.
Aide-mémoire HTML et CSS
Cette fiche liste les balises HTML et les propriétés CSS utilisées sur presque tous les sites web, regroupées par usage : configuration du document, structure sémantique, texte, listes, médias, formulaires, sélecteurs, unités, mise en page et style visuel. Tapez dans le filtre pour en trouver une, ouvrez une mini démo pour la voir fonctionner, ou appuyez sur Imprimer pour une copie papier propre.
Ce que contient la fiche
Partie
Entrées
HTML
CSS
Avec une démo en direct
Filtrez par mot-clé ou basculez entre HTML et CSS : la liste se réduit au fil de la saisie. Les entrées dotées d'une démo ouvrent un petit aperçu isolé. La mise en page d'impression masque les commandes et garde le tableau de chaque groupe d'un seul tenant sur la page.
Tapez une balise, une propriété ou une tâche, par exemple table, sticky ou email, dans le champ de filtre.
Limitez à HTML ou CSS avec les boutons, ou laissez les deux activés.
Appuyez sur Afficher la démo sur une entrée pour la voir rendue, et sur Copier pour récupérer la syntaxe.
Appuyez sur Imprimer pour obtenir une copie papier ou PDF sans l'habillage de la page.
Pensez à un élément sémantique avant une div. header, nav, main et footer offrent gratuitement des repères aux lecteurs d'écran.
Chaque contrôle de formulaire a besoin d'une étiquette. Le texte d'exemple disparaît pendant la saisie et ne la remplace pas.
Commencez chaque feuille de style par box-sizing: border-box sur tout. Les largeurs veulent alors dire ce que vous attendez.
Préférez rem pour les tailles de police et les espacements qui doivent suivre le réglage de texte du lecteur, et px pour les bordures très fines.
Questions fréquentes
Combien existe-t-il de balises HTML ?
Le HTML Living Standard définit bien plus d'une centaine d'éléments, mais les pages courantes n'en utilisent que quelques dizaines. Cette fiche couvre ceux que vous rencontrerez sur presque tous les sites ; MDN tient à jour la référence complète des éléments.
Quelle est la différence entre une balise et un élément ?
Une balise est le balisage que vous tapez, comme <p> ou </p>. Un élément est l'ensemble que le navigateur construit à partir de là : la balise ouvrante, son contenu et la balise fermante. Les éléments vides comme <img> et <br> n'ont pas de balise fermante du tout.
Puis-je imprimer cet aide-mémoire ?
Oui. Le bouton Imprimer ouvre la boîte de dialogue d'impression de votre navigateur avec une mise en page qui retire le filtre, les boutons et les démos et conserve les tableaux de syntaxe. Choisissez Enregistrer au format PDF pour garder une copie numérique.
Faut-il apprendre le CSS ou un framework comme Tailwind en premier ?
Apprenez d'abord les propriétés CSS. Les frameworks utilitaires en sont des raccourcis, donc savoir que p-4 signifie padding: 1rem rend le framework plus simple, et le débogage dans les outils de développement affiche toujours le CSS sous-jacent.
Comment HTML et CSS se partagent le travail
Le HTML dit ce qu'est chaque élément de contenu : un titre, une liste, un champ de formulaire, un bloc de navigation. Le CSS dit à quoi il ressemble et où il se place. Les garder séparés permet à une seule feuille de style de restyler des centaines de pages, et le balisage reste lisible pour les moteurs de recherche et les technologies d'assistance.
Si vous hésitez sur l'élément à utiliser, demandez-vous comment ce contenu s'appellerait dans un document imprimé. Une liste d'étapes est un ol, un ensemble de faits est un dl ou un table, une note en marge est un aside.
Lire les règles CSS
Une règle se compose d'un sélecteur, puis d'accolades contenant des paires propriété et valeur séparées par des points-virgules. Quand deux règles ciblent le même élément, le sélecteur le plus spécifique l'emporte ; en cas d'égalité, c'est celle placée le plus bas dans la feuille de style qui gagne.
Tout réuni dans une petite page
Balisage sémantique et quelques lignes de CSS
Un en-tête, un contenu principal avec un formulaire et un pied de page, stylés avec une poignée de propriétés de la fiche.
Première ligne de chaque page ; active le mode standard
Élément racine ; lang définit la langue de la page
Métadonnées, titre, liens vers le CSS et les scripts
Encodage, viewport, description et balises sociales
Relie les feuilles de style, icônes et préchargements
Charge du JavaScript ; defer l'exécute après l'analyse
Introduction ou barre supérieure d'une page ou d'une section
Un bloc de liens de navigation principaux
Le contenu principal unique ; un par page
Un groupe de contenu thématique, généralement avec un titre
Contenu autonome comme un article ou une fiche produit
Contenu lié mais secondaire, comme une barre latérale
Informations de fin : contact, mentions légales, liens
Widget de dépliage natif, sans script
Une boîte de dialogue modale ou non modale
Titres dans l'ordre ; un seul h1 par page est la norme
Un paragraphe
Importance forte et emphase, gras et italique par défaut
Texte surligné
Code en ligne et blocs préformatés
Une citation longue
Abréviation avec sa forme développée
Une date ou une heure lisible par les machines
Saut de ligne dans un texte ; séparation thématique entre blocs
Listes non ordonnées et ordonnées
Liste de descriptions en paires nom et valeur
Données tabulaires avec légende, en-tête et corps
Cellule d'en-tête ; scope la relie à sa colonne ou sa ligne
Un lien ; ajoutez target et rel pour les nouveaux onglets
Une image ; alt, width et height sont attendus
Direction artistique et formats de repli
Média autonome avec une légende
Vidéo intégrée
Intègre une autre page
Graphiques vectoriels en ligne
Englobe les champs et les envoie
Nomme un contrôle ; cliquer dessus donne le focus au contrôle
Texte, email, nombre, date, case à cocher, bouton radio et plus
Liste déroulante
Saisie de texte sur plusieurs lignes
Un bouton ; définissez type pour éviter les envois accidentels
Regroupe des contrôles liés sous une légende
Contrôles intégrés avant l'envoi
Sélecteurs de nom d'élément, de classe et d'ID
Tout niveau de profondeur ou enfants directs seulement
Frère suivant immédiat, ou tout frère suivant
Cible selon la présence ou la valeur d'un attribut
États de survol du pointeur et de focus clavier
Choisit des éléments selon leur position
Sélection du parent et regroupement de sélecteurs
Contenu généré avant ou après un élément
Pixel CSS absolu
Relatif à la taille de police racine / à la taille de police de l'élément
Relatif au parent (la dimension dépend de la propriété)
Unités de viewport ; dvh suit les barres d'outils mobiles
Largeur du glyphe 0, pratique pour la longueur des lignes
Part de l'espace libre dans une grille
Valeur fluide entre un minimum et un maximum
La largeur inclut le padding et la bordure
Espace à l'extérieur et à l'intérieur de la bordure
Comment la boîte participe à la mise en page
Lignes ou colonnes sur une dimension
Lignes et colonnes sur deux dimensions
Sort une boîte du flux normal, ou l'y fixe
Ordre d'empilement des éléments positionnés
Ce qu'il advient du contenu qui ne tient pas
Styles pour une taille d'écran ou une préférence
Couleur du texte et arrière-plan
Graisse, taille, interligne et famille en une ligne
Contour et coins arrondis
Ombre portée autour de la boîte
Transparence de l'élément entier
Déplacer, pivoter, redimensionner ou incliner sans affecter la mise en page