68 balises · 4 catégories
Documentation HTML
Toutes les balises HTML avec leur description, leurs attributs et des exemples visibles tout de suite dans un aperçu en direct. De la structure du document aux formulaires, tableaux et médias.
68 entrées
Sections et sémantique
Les éléments qui découpent la page en parties logiques et décrivent leur sens.
- <article>Un contenu autonome qui garde son sens une fois lu ou partagé séparément.
- <section>Une partie thématique d’un document, généralement avec son propre titre.
- <header>L’introduction d’une page ou d’une section : logo, titre, navigation, informations sur l’auteur.
- <footer>Le pied de page d’une page ou d’une section : auteur, droits d’auteur, liens, coordonnées.
- <main>Le contenu principal et unique de la page. Une seule instance visible par page.
- <nav>Un bloc de liens de navigation principaux : menu, sommaire, fil d’Ariane.
- <aside>Un contenu secondaire, lié de façon lâche à son environnement : encadré, barre latérale, remarque.
- <h1>-<h6>Des titres à six niveaux, du plus important h1 au moins important h6. Ensemble, ils forment le plan de la page.
- <hgroup>Regroupe un titre avec un sous-titre, un slogan ou un surtitre.
- <address>Les coordonnées de l’auteur d’un article ou du propriétaire d’un site.
- <search>Marque la partie d’une page contenant un champ de recherche ou des filtres de résultats.
Texte et mise en forme
Paragraphes, liens, mises en valeur, citations et balises pour les extraits de code.
- <a>Un lien vers une autre page, un fichier, une adresse e-mail ou un endroit sur la même page.
- <p>Un paragraphe de texte.
- <strong>Un texte de grande importance : un avertissement, une information clé.
- <br>Un retour à la ligne à l’endroit où il est inséré, sans commencer un nouveau paragraphe.
- <hr>Une rupture thématique dans le contenu, par exemple un changement de scène dans un récit ou un passage à un autre sujet.
- <pre>Un texte préformaté : il conserve les espaces, les tabulations et les retours à la ligne exactement comme dans le code.
- <blockquote>Une citation plus longue provenant d’une autre source, affichée comme un bloc séparé et indenté.
- <div>Un conteneur de bloc générique sans signification, pour grouper des éléments et les styliser.
- <span>Un conteneur en ligne générique sans signification, pour styliser un fragment de texte.
- <em>Un accent dans la phrase : un mot qui, à la lecture à voix haute, se prononce avec insistance.
- <b>Attire l’attention sur un fragment de texte sans lui donner davantage d’importance, par exemple des mots-clés.
- <i>Un texte sur un autre ton ou dans une autre voix : expressions étrangères, noms latins, pensées d’un personnage, termes techniques.
- <u>Un texte avec une annotation qu’on ne peut pas exprimer par des mots, le plus souvent le marquage d’une faute d’orthographe.
- <s>Un contenu qui n’est plus d’actualité, par exemple un ancien prix. Le navigateur le barre.
- <small>Les petits caractères : mentions légales, informations juridiques, droits d’auteur et courtes remarques annexes.
- <mark>Met en évidence un fragment de texte comme un surligneur, parce qu’il est pertinent dans le contexte actuel.
- <abbr>Une abréviation ou un acronyme, avec un développement facultatif dans l’attribut title.
- <cite>Le titre d’une œuvre : un livre, un article, un film, une chanson, un jeu ou un logiciel.
- <code>Un fragment de code informatique : le nom d’une variable, d’une fonction, d’une balise ou d’un fichier, ainsi qu’un court extrait.
- <kbd>Une saisie effectuée par l’utilisateur : des touches, des raccourcis clavier et des commandes à saisir.
- <samp>Un résultat type d’un programme : un message, une réponse de la console ou le texte d’une erreur.
- <var>Une variable dans une formule mathématique ou dans un programme, ainsi qu’un symbole substituable dans une commande.
- <sub>Un indice inférieur : un texte abaissé et réduit, par exemple dans les formules chimiques.
- <sup>Un indice supérieur : un texte élevé et réduit, par exemple les exposants et les numéros de notes de bas de page.
- <time>Une date, une heure ou une durée écrites de façon lisible pour les humains et, en même temps, compréhensible pour les machines.
- <data>Relie un contenu lisible à une valeur pour les machines, par exemple le nom d’un produit à son code.
- <q>Une courte citation insérée dans une phrase. Le navigateur ajoute lui-même les guillemets.
- <dfn>Un terme défini à cet endroit du texte, c’est-à-dire la première utilisation, explicative, du concept.
- <bdi>Isole un fragment de texte dont le sens d’écriture est inconnu, par exemple un nom d’utilisateur écrit en arabe.
- <bdo>Impose le sens d’affichage du texte, en contournant l’algorithme bidirectionnel automatique.
- <wbr>Un endroit où le navigateur peut couper un mot long ou une chaîne de caractères, quand la ligne manque de place.
- <ins>Un texte ajouté à un document, par exemple dans une nouvelle version d’un règlement ou dans un article corrigé.
- <del>Un texte supprimé d’un document, affiché barré pour conserver l’historique des modifications.
- <ruby>Les annotations ruby : un petit texte au-dessus des caractères, le plus souvent la prononciation de caractères chinois ou japonais.
- <rt>Le texte de l’annotation dans un élément ruby : la prononciation ou le sens affiché au-dessus du texte de base.
- <rp>Des parenthèses de secours autour d’une annotation ruby, visibles seulement là où ruby n’est pas pris en charge.
Formulaires
Champs, boutons, listes de choix et tout ce qui sert à envoyer des données.
- <form>Un formulaire qui collecte des données auprès de l’utilisateur et les envoie à une adresse donnée.
- <input>Un champ de formulaire : texte, e-mail, mot de passe, nombre, date, curseur, case à cocher, fichier et bien plus encore.
- <label>L’étiquette d’un champ de formulaire. Cliquer sur l’étiquette déplace le curseur vers le champ.
- <button>Un bouton cliquable : il envoie un formulaire, le réinitialise, ou lance une action sur la page.
- <select>Une liste déroulante dans laquelle l’utilisateur choisit une ou plusieurs options.
- <option>Une option unique d’une liste `<select>`, ou une suggestion dans un `<datalist>`.
- <optgroup>Un groupe nommé d’options à l’intérieur d’une liste `<select>`.
- <textarea>Un champ de texte multiligne pour des saisies plus longues : messages, avis, descriptions.
- <fieldset>Un groupe de champs de formulaire liés, avec un cadre et une légende `<legend>`.
- <legend>La légende d’un groupe de champs `<fieldset>`, affichée sur son cadre.
- <datalist>Une liste de suggestions pour un champ `<input>`. Vous pouvez choisir une proposition ou saisir votre propre valeur.
- <output>Le résultat d’un calcul ou d’une action de l’utilisateur, par exemple un total dans une calculatrice.
- <progress>Une barre de progression pour une tâche : l’envoi d’un fichier, une installation ou l’avancement d’un cours.
- <meter>Une jauge pour une valeur dans une plage connue : espace utilisé, résultat d’un test, niveau de batterie.
Comparaisons
Les différences entre des balises proches et quand choisir l’une ou l’autre.
- <div> vs <span><div> est un conteneur de bloc sans signification, et <span> son équivalent en ligne. Les deux servent seulement à grouper et styliser, jamais à décrire le contenu.
- <section> vs <article> vs <div><article> est un contenu autonome, <section> est une partie thématique d’un ensemble plus grand, et <div> est un conteneur neutre sans aucune signification.
- <strong> vs <b><strong> marque un contenu important, urgent ou grave. <b> attire l’attention sur un fragment, sans lui donner plus de poids. Visuellement, les deux sont en gras.
- <em> vs <i><em> accentue un mot et change le sens à la lecture à voix haute. <i> indique un autre ton (étranger, nom, pensée) sans rien changer au sens. Les deux sont en italique.
- class vs idclass peut se répéter sur plusieurs éléments et s’y combiner, alors que id doit être unique dans tout le document et sert aux ancres, étiquettes et à JavaScript.
- <button> vs <a><button> exécute une action sur la page, par ex. envoyer un formulaire. <a> navigue : il change d’adresse ou ouvre une ressource. Les deux fonctionnent au clavier.
- <header> vs <head><head> est une section invisible avec les métadonnées de la page, unique dans le document. <header> est un élément visible d’introduction, répétable sur la page.