Documentation HTML
Référence HTML concise et illustrée par des exemples. Lisez le concept, voyez le code, puis pratiquez-le dans un parcours Coddy.
Commencer un parcours guidé en HTMLPour commencer
- Doctype`<!DOCTYPE html>` est la première ligne de tout document HTML. Elle indique au navigateur d'afficher la page en mode standard plutôt qu'en mode quirks. Découvrez la syntaxe, l'effet des anciens doctypes et comment vérifier le mode.
- Balises HTMLLes balises HTML balisent le contenu pour que le navigateur sache ce qu'est chaque partie : un titre, un paragraphe, un lien, une image. Découvrez le fonctionnement des balises et des éléments, les balises sans balise fermante, l'imbrication et les balises les plus utilisées.
- Attributs HTMLLes attributs ajoutent des informations à un élément HTML : la destination d'un lien, ce que montre une image, la classe CSS qui s'applique. Découvrez la syntaxe, les attributs globaux acceptés par tous les éléments, class et id, les attributs booléens et les attributs data-*.
- Commentaire HTMLUn commentaire HTML est du texte entre <!-- et --> que le navigateur n'affiche pas. Découvrez la syntaxe, les commentaires sur plusieurs lignes, comment commenter du code, le raccourci clavier, pourquoi on ne peut pas imbriquer les commentaires et pourquoi ils ne sont jamais privés.
- Balise divLa balise <div> est un conteneur bloc générique sans signification propre. Découvrez comment regrouper du contenu avec elle, la styliser avec une classe, construire des mises en page avec des div et flexbox, et quand une balise sémantique ou un bouton est un meilleur choix.
- Balise spanLa balise <span> est un conteneur inline générique : elle entoure quelques mots dans une ligne pour que vous puissiez les styliser ou les manipuler en script sans couper la ligne. Découvrez comment l'utiliser, en quoi elle diffère de div et quand une balise plus précise convient mieux.
Texte
- Titres h1 à h6HTML a six niveaux de titres, de <h1> à <h6>, qui donnent son plan à une page. Découvrez les tailles par défaut, l'ordre des titres, le nombre de h1 à utiliser, comment changer leur taille en CSS et comment les lecteurs d'écran s'en servent.
- Retour à la ligneUtilisez <br> pour commencer une nouvelle ligne dans un bloc de texte. Découvrez quand <br> convient et quand un paragraphe vaut mieux, comment conserver les sauts de ligne d'un texte, comment laisser les mots longs se couper avec <wbr> et comment empêcher une ligne de se couper.
- Espace en HTMLLes navigateurs réduisent toute suite d'espaces en HTML à une seule. Découvrez comment ajouter des espaces avec , le rôle de l'espace insécable, comment conserver espaces et tabulations avec <pre> et white-space, et quand l'espacement CSS est le meilleur outil.
- Gras et italiqueMettez du texte en gras en HTML avec <strong> ou <b>, et en italique avec <em> ou <i>. Découvrez quelle balise utiliser dans quel cas, comment combiner gras et italique, et comment obtenir le gras ou l'italique en CSS.
- Souligner, barrerSoulignez du texte en HTML avec <u> ou la propriété CSS text-decoration, et barrez-le avec <s> ou <del>. Découvrez le sens de chaque balise, comment <ins> et <del> marquent des modifications, et pourquoi souligner un texte qui n'est pas un lien déroute les lecteurs.
- Exposant et indiceÉcrivez du texte en exposant avec <sup> et en indice avec <sub> : puissances, ordinaux, appels de note et formules chimiques. Découvrez les usages courants, comment éviter qu'ils écartent les lignes, et quand un caractère Unicode ou MathML convient mieux.
- Ligne horizontaleTracez une ligne horizontale en HTML avec la balise <hr>. Découvrez ce qu'elle signifie, comment changer sa couleur, son épaisseur, sa largeur et son style en CSS, comment créer un séparateur avec du texte au milieu et comment faire une ligne verticale.
- Centrer du texteCentrez du texte en HTML avec la propriété CSS text-align: center. Découvrez où la placer, pourquoi elle ne marche pas sur un span, comment centrer un texte verticalement dans une boîte, comment aligner le texte au début, à la fin ou sur les deux bords, et comment mettre un retrait aux paragraphes.
Liens et images
- Lien HTML (a href)Comment l'élément <a> crée des liens : l'attribut href, les URL absolues et relatives, aller à une section de la page avec #id, les liens de téléchargement, les cartes cliquables et les erreurs qui cassent un lien.
- Lien nouvel ongletAjoutez target="_blank" à un lien pour l'ouvrir dans un nouvel onglet. Cette page présente rel="noopener" et noreferrer, comment signaler qu'un lien ouvre un nouvel onglet, les autres valeurs de target et comment le faire en JavaScript.
- Lien mailtoCréez un lien qui ouvre un nouvel e-mail avec href="mailto:", remplissez l'objet, le corps, cc et bcc, encodez-les correctement, et créez des liens d'appel avec tel: et sms:.
- Bouton lienLa bonne façon de créer un bouton qui mène à une autre page est un lien stylisé comme un bouton. Voyez pourquoi un bouton dans un lien et la navigation par onclick posent problème, quand un bouton de formulaire est le bon choix, et comment styliser et désactiver des liens en forme de bouton.
- Insérer une imageComment insérer une image en HTML avec la balise <img> : src et alt, régler la taille avec width et height, images responsives, recadrage avec object-fit, légendes avec figure, chargement différé et l'espace sous les images.
Listes et tableaux
- Listes HTMLComment faire des listes en HTML : des puces avec <ul>, des listes numérotées avec <ol> (start, reversed, lettres et chiffres romains), des listes imbriquées, des listes de définitions, et styliser ou supprimer les puces en CSS.
- Tableau HTMLComment faire un tableau en HTML : des lignes avec <tr>, des cellules avec <td>, des cellules d'en-tête avec <th> et scope, une légende, thead, tbody et tfoot, des lignes zébrées et des tableaux qui défilent sur petit écran.
- Bordure de tableauComment ajouter des bordures à un tableau HTML en CSS : des traits simples avec border-collapse, border-spacing, uniquement des lignes horizontales, uniquement les bordures intérieures, des coins arrondis, et pourquoi l'attribut border est obsolète.
- Colspan et rowspanFusionnez des cellules de tableau sur plusieurs colonnes avec colspan et sur plusieurs lignes avec rowspan. Découvrez comment compter les cellules pour garder un tableau régulier, construire des en-têtes groupés et garder les tableaux fusionnés lisibles pour les lecteurs d'écran.
Formulaires
- Formulaire HTMLComment construire un formulaire en HTML : l'élément form, les attributs name, action et method (GET ou POST), le regroupement avec fieldset et legend, la validation intégrée avec required et pattern, et la gestion de l'envoi en JavaScript.
- Types d'inputTous les types de la balise HTML <input> au même endroit : text, email, password, number, range, date et time, color, file, hidden et les autres, avec ce que chacun valide, le clavier qu'il ouvre sur téléphone et les attributs qu'ils partagent.
- Bouton HTMLComment faire un bouton en HTML avec l'élément <button> : les trois types (submit, button, reset), envoyer une valeur avec le formulaire, les boutons désactivés, les icônes, et un style CSS qui garde l'anneau de focus.
- Case à cocherComment faire une case à cocher en HTML avec <input type="checkbox"> : les labels, l'attribut checked, ce qu'envoie le formulaire quand elle est cochée et quand elle ne l'est pas, les groupes de cases, « tout sélectionner » avec l'état indeterminate, et le style.
- Bouton radioComment fonctionnent les boutons radio en HTML : le regroupement avec l'attribut name, un choix par défaut avec checked, les groupes obligatoires, lire la valeur choisie en JavaScript, le comportement au clavier, et les styliser en cercles ou en cartes personnalisés.
- Liste déroulanteComment faire une liste déroulante en HTML avec <select> et <option> : valeurs, option par défaut ou placeholder, required, groupes d'options, sélection multiple, lire et définir la valeur en JavaScript, et styliser la flèche.
- TextareaComment faire un champ de texte sur plusieurs lignes avec <textarea> : rows et cols, texte par défaut entre les balises, redimensionnement et agrandissement automatique, maxlength avec un compteur de caractères, retours à la ligne dans le texte envoyé, et style.
- Label HTMLComment l'élément <label> nomme un champ de formulaire : le relier avec for et id ou en l'entourant, la zone de clic agrandie pour les cases à cocher et les radios, les indications et messages d'erreur, les labels masqués, et les erreurs qui cassent le lien.
HTML sémantique
- HTML sémantiqueLe HTML sémantique consiste à choisir les balises pour ce qu'est le contenu, pas pour son apparence. Découvrez les balises sémantiques de mise en page (header, nav, main, article, aside, footer), ce qu'elles apportent aux lecteurs d'écran et aux moteurs de recherche, et comment vérifier la structure de votre page.
- Balise headerL'élément <header> contient l'introduction d'une page ou d'une section : un logo, un titre, une navigation, un auteur. Découvrez comment construire l'en-tête d'un site, en quoi <header> diffère de <head> et des titres, comment l'utiliser dans des articles et comment le rendre fixe au défilement.
- Balise footerL'élément <footer> conclut une page ou une section : copyright, coordonnées, liens, informations sur l'auteur. Découvrez comment construire le pied de page d'un site avec des colonnes de liens, comment le garder en bas d'une page courte, et comment fonctionnent les footer dans les articles.
- Balise navL'élément <nav> marque un bloc de liens de navigation principaux. Découvrez comment construire une barre de navigation avec <nav> et une liste, comment signaler la page actuelle, comment nommer plusieurs nav sur une même page et comment faire un bouton de menu mobile.
- Balise sectionL'élément <section> regroupe un contenu sur un même thème sous son propre titre. Découvrez quand utiliser <section>, quand <article> ou <div> est le meilleur choix, comment les trois s'imbriquent et comment une section nommée devient un repère.
Head et balises meta
- Balise titleL'élément <title> nomme la page dans l'onglet du navigateur, dans les favoris et dans les résultats de recherche. Découvrez où le placer, quelle longueur lui donner, en quoi il diffère de <h1> et de l'attribut title, et comment le changer en JavaScript.
- Meta viewportLa balise meta viewport indique aux téléphones de mettre la page en page à la largeur de l'écran plutôt qu'à une largeur d'ordinateur. Découvrez la balise standard, le rôle de chaque valeur, pourquoi le CSS responsive en dépend et quelles valeurs éviter.
- Redirection HTMLRedirigez une page vers une autre avec une balise meta refresh en HTML pur, avec JavaScript ou sur le serveur. Découvrez la syntaxe de meta refresh, comment actualiser une page automatiquement, pourquoi une redirection 301 côté serveur est le meilleur choix, et ce que font les moteurs de recherche de chacune.
- FaviconUn favicon est la petite icône de l'onglet du navigateur. Découvrez la balise link qui l'ajoute, les fichiers et tailles à fournir (ICO, SVG, PNG, apple-touch-icon), comment faire un favicon en SVG ou en emoji, comment le changer en JavaScript et pourquoi un ancien favicon s'affiche encore.
- Attribut langL'attribut lang indique aux navigateurs, aux lecteurs d'écran et aux outils de traduction la langue de votre contenu. Découvrez où le placer, quels codes utiliser (en, fr, fr-CA, pt-BR), comment marquer une expression dans une autre langue, et ce qu'il change de façon visible.
Médias et éléments interactifs
- Balise iframeL'élément <iframe> affiche une autre page web dans la vôtre. Découvrez les attributs nécessaires (src, title, width, height), comment intégrer des vidéos YouTube et des cartes, comment rendre une iframe responsive, comment sandbox limite ce qu'elle peut faire, et pourquoi certains sites refusent de s'y charger.
- Vidéo en HTMLL'élément <video> lit des fichiers vidéo avec le lecteur propre au navigateur. Découvrez le balisage, les attributs qui comptent (controls, autoplay, muted, loop, playsinline, poster, preload), les formats de repli avec <source>, les sous-titres avec <track>, la taille responsive et le contrôle de la lecture en JavaScript.
- Audio en HTMLL'élément <audio> lit des fichiers son avec le lecteur intégré du navigateur. Découvrez le balisage, les attributs (controls, autoplay, loop, muted, preload), les formats à utiliser, pourquoi l'autoplay avec son est bloqué, et comment construire votre propre bouton de lecture en JavaScript.
- Details et summaryLes éléments <details> et <summary> créent une section repliable sans JavaScript : le summary reste toujours visible et un clic dessus affiche ou masque le reste. Découvrez le balisage, les attributs open et name, les accordéons, le style de la flèche et l'événement toggle.
