Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Catégories de contenu

La plupart des éléments HTML font partie d'une ou plusieurs catégories de contenu — ces catégories regroupent des éléments qui partagent des caractéristiques communes. Il s'agit d'un regroupement souple (cela ne crée pas réellement de relation entre les éléments de ces catégories), mais cela permet de définir et de décrire le comportement partagé des catégories et leurs règles associées. Il est possible que certains éléments (comme <track>) ne fassent partie d'aucune de ces catégories.

Les catégories de contenu servent à définir le modèle de contenu des éléments, c'est-à-dire ce que chaque élément peut avoir comme descendants. Par exemple, un élément <p> ne peut contenir que du contenu phrasé, tandis qu'un élément <div> peut contenir du contenu de flux.

Il existe sept principales catégories de contenu, qui peuvent être résumées par le diagramme de Venn ci-dessous :

Un diagramme de Venn montrant comment les différentes catégories de contenu s'entrecroisent. Les sections suivantes expliquent ces relations en détail.

Note : Une discussion plus détaillée sur ces catégories de contenu et leurs fonctionnalités comparées dépasse le cadre de cet article ; pour cela, vous pouvez lire les sections pertinentes de la spécification HTML (angl.).

Contenu de méta-données

Les éléments appartenant à la catégorie de contenu de méta-données modifient la présentation ou le comportement du reste du document, créent des liens vers d'autres documents, ou transmettent d'autres informations hors bande. Tout ce qui se trouve dans <head>, y compris <title>, <link>, <script>, <style>, et le moins utilisé <base>, constitue du contenu de méta-données. Il existe un élément <meta> pour les méta-données qui ne peuvent pas être représentées par ces autres éléments.

Les éléments de méta-données sont :

Quelques-uns de ces éléments appartiennent à plus d'une catégorie de contenu. Par exemple, <script> est membre des catégories de contenu de méta-données, de flux et de phrasé, et est un élément supportant les scripts ; <script> peut être utilisé là où du contenu de méta-données, du contenu phrasé, ou des éléments supportant les scripts sont attendus.

Contenu de flux

Le contenu de flux est une catégorie large qui englobe la plupart des éléments pouvant se trouver à l'intérieur de l'élément <body>, y compris les éléments d'en-tête, les éléments sectionnants, les éléments phrasés, les éléments d'intégration, les éléments interactifs et les éléments liés aux formulaires. Il inclut aussi les noeuds de texte (mais pas ceux qui ne contiennent que des caractères d'espacement).

Les éléments de flux sont :

Quelques autres éléments appartiennent à cette catégorie, mais seulement si une condition spécifique est remplie :

Contenu sectionnant

Le contenu sectionnant, sous-ensemble du contenu de flux, crée une section dans le plan du document qui définit la portée des éléments <header> et <footer>.

Les éléments sectionnants sont :

Contenu de titre

Le contenu de titre, sous-ensemble du contenu de flux, définit le titre d'une section. Cette définition s'applique aussi bien aux sections marquées par un élément explicite de contenu sectionnant qu'à celles définies implicitement par le contenu de titre lui‑même.

Les éléments de titre sont :

Note : Bien que susceptible de contenir du contenu de titre, le <header> n'est pas lui-même un contenu de titre.

Contenu phrasé

Le contenu phrasé, sous-ensemble du contenu de flux, désigne le texte et le balisage présents dans un document. Des séquences de contenu phrasé forment des paragraphes.

Les éléments de phrasé sont :

Quelques autres éléments appartiennent à cette catégorie mais seulement selon certaines conditions :

  • <a> s'il contient seulement du contenu phrasé
  • <area> s'il est un descendant de l'élément <map>
  • <del> s'il contient seulement du contenu phrasé
  • <ins> s'il contient seulement du contenu phrasé
  • <link> si l'attribut itemprop est présent
  • <map> s'il contient seulement du contenu phrasé
  • <meta> si l'attribut itemprop est présent

Contenu intégré

Le contenu intégré, sous-ensemble du contenu de flux, importe une autre ressource ou insère du contenu provenant d'un autre langage de balisage ou d'un autre espace de noms dans le document.

Les éléments de contenu intégré sont :

Contenu interactif

Le contenu interactif, sous-ensemble du contenu de flux, regroupe des éléments conçus spécifiquement pour une interaction avec l'utilisateur·ice.

Les éléments de contenu interactif sont :

Quelques éléments appartiennent à cette catégorie seulement sous certaines conditions :

Contenu tangible

Contenu tangible est un contenu qui n'est ni vide ni caché ; c'est un contenu rendu et substantiel. Le contenu tangible n'est pas utilisé pour définir des modèles de contenu mais sert à définir une règle générale : les éléments dont le modèle de contenu autorise du contenu de flux ou du contenu phrasé doivent comporter au moins un nœud dans leur contenu qui soit du contenu tangible et qui n'ait pas l'attribut hidden défini.

Les éléments palpables sont :

Certains éléments appartiennent à cette catégorie seulement sous certaines conditions :

  • <audio>, si l'attribut controls est présent
  • <dl>, si les enfants de l'élément incluent au moins un groupe nom-valeur
  • <input>, si l'attribut type ne vaut pas hidden
  • <ol>, si ses enfants incluent au moins un élément <li>
  • <ul>, si ses enfants incluent au moins un élément <li>

Éléments supports de script

Les éléments supports de script sont des éléments qui ne contribuent pas directement à la sortie rendue d'un document. Ils servent plutôt à prendre en charge les scripts, soit en contenant ou en définissant directement du code de script, soit en définissant des données qui seront utilisées par des scripts. Presque tous les éléments, y compris ceux qui n'acceptent que des éléments spécifiques (comme <ul>, qui accepte des éléments <li>), peuvent contenir des éléments supports de script.

Les éléments supports de script sont :

Contenu associé aux formulaires

Le contenu associé aux formulaires est un sous-ensemble du contenu de flux comprenant des éléments qui ont un propriétaire de formulaire et qui peuvent être utilisés partout où du contenu de flux est attendu. Un propriétaire de formulaire est soit l'élément <form> englobant, soit le <form> dont l'id est indiqué dans l'attribut form de l'élément.

Les éléments associés aux formulaires sont :

This category contains several sub-categories:

listed (éléments listés)

Les éléments qui figurent dans les collections HTMLFormElement.elements et HTMLFieldSetElement.elements. Comprend <button>, <fieldset>, <input>, <object>, <output>, <select> et <textarea>.

submittable (éléments participants à l'envoi du formulaire)

Les éléments pouvant être utilisés pour construire l'ensemble des données du formulaire lors de son envoi. Comprend <button>, <input>, <select> et <textarea>.

resettable (éléments de ré-initialisation)

Les éléments pouvant être affectés lors de la réinitialisation d'un formulaire. Comprend <input>, <output>, <select> et <textarea>.

autocapitalize-and-autocorrect-inheriting (éléments héritant des attributs autocapitalize et autocorrect)

Les éléments qui héritent des attributs autocapitalize et autocorrect de leur propriétaire de formulaire. Comprend <button>, <fieldset>, <input>, <output>, <select> et <textarea>.

labelable (éléments étiquetables)

Les éléments pouvant être associés avec des éléments <label>. Ce sont : <button>, <input> (tous les types sauf hidden), <meter>, <output>, <progress>, <select> et <textarea>.

Modèle de contenu transparent

En plus des catégories de contenu énumérées, le modèle de contenu d'un élément peut aussi être défini comme « transparent ». Si le contenu autorisé d'un élément X est « transparent », on examine alors le parent de X. On intersecte le contenu autorisé du parent de X avec les catégories de contenu de X, et le résultat correspond à ce que « transparent » signifie dans ce contexte. Si le parent de X a lui aussi un modèle de contenu transparent, on remonte l'arbre jusqu'à trouver un modèle non transparent. Lorsqu'il n'existe pas un tel parent, « transparent » signifie « contenu de flux ».

Par exemple, un élément <ruby> accepte du contenu phrasé. L'élément <ins> appartient à la catégorie du contenu phrasé lorsqu'il contient uniquement du contenu phrasé. Par conséquent, un élément <ins> peut être placé à l'intérieur d'un élément <ruby>. Le contenu autorisé de l'élément <ins> est « transparent », ce qui, lorsqu'il est imbriqué dans <ruby>, signifie « contenu phrasé ». Toutefois, les éléments <rt> ne sont pas du contenu phrasé. Ainsi, un élément <rt> ne peut pas être imbriqué à l'intérieur de cet élément <ins>, même si <rt> et <ins> peuvent tous deux se trouver dans <ruby>, et que <ins> est « transparent ».

html
<ruby>
  Texte avant
  <ins>
    <!-- Invalide : rt ne peut pas être placé à l'intérieur de ins ici -->
    <rt>Prononciation</rt>
  </ins>
</ruby>
html
<ruby>
  Texte avant
  <!-- Valide : ins peut être à l'intérieur de ruby, et rt peut être à l'intérieur de ruby -->
  <ins>Texte inséré</ins>
  <rt>Prononciation</rt>
</ruby>
html
<ruby>
  Texte avant
  <!-- Valide : rt peut être à l'intérieur de ruby, et ins peut être à l'intérieur de rt -->
  <rt><ins>Prononciation</ins></rt>
</ruby>

Le caractère transparent est un modèle de contenu, pas une catégorie de contenu, il définit uniquement ce qu'un élément peut contenir, et non l'endroit où l'élément peut être placé. Autrement dit, lorsqu'on détermine la licéité des enfants d'un élément, on ne peut pas « voir à travers » des enfants transparents. Par exemple, un élément <ul> n'accepte que des éléments <li> et des éléments supports de script, et n'autorise pas <del> ou <ins>, même si le <del> ne contient que des éléments <li>.

html
<ul>
  <del>
    <li>Oranges</li>
    <li>Papier toilette</li>
  </del>
  <li>Dentifrice</li>
</ul>
html
<ul>
  <li><del>Oranges</del></li>
  <li><del>Papier toilette</del></li>
  <li>Dentifrice</li>
</ul>