Organisation des éléments - noelno/dovelei GitHub Wiki

En HTML5

Les spécifications HTML5 donnent pour chaque élément HTML existant son modèle de contenu, à savoir une définition normative du contenu attendu de l'élément (les balises et texte que l'élément peut contenir ou pas).

Plutôt que de lister toutes les balises autorisées pour chaque élément, les rédacteurs de ces spécifications ont défini un système d'organisation des contenus, en sept catégories principales, et utilisent ces catégories pour détailler les modèles de contenu.

Flux (flow)

La majorité des éléments HTML5 y appartient.

Balises n'appartenant pas au flow

<area> sans parent <map>, <link> et <meta> sans attribut itemprop, et <style> sans attribut scoped

Balises flow n'entrant dans aucune autre catégorie

<address>,<blockquote>,<dialog>,<dl>,<fieldset>,<figure>,<footer>,<form>, <header>, <main>,<ol>,<output>,<p>,<pre>, <table> et <ul>

Métadonnées (metadata)

Elements décrivant l'apparence ou le comportement d'un contenu, ou la relation entre le document courant et un autre document, ainsi que toute autre information gravitant autour de ce contenu/document.

Les 9 balises appartenant au contenu métadonnées

<base>, <command>, <link>, <meta>, <noscript>, <script>, <style>, <template> et <title>

Contenu sectionnant

Elements qui délimitent le document / l'application en zones.
Ces zones correspondent à la portée des headers et footers enfants.

Les quatre balises de contenu sectionnant

<article>, <aside>, <nav> et <section>

Titraille (headings)

Tous les titres, de <h1> à <h6>

Phrasé (phrasing content)

Elements qui pour la plupart apparaissent dans un flux de texte et sont pour la plupart rendus en-ligne (display: inline ou inline-block).

Les 57 balises appartenant au contenu phrasé

  • <abbr>, <area> (si <map> parent), <b>, <bdi>,<bdo>,<br>,<cite>,<code>,<data>, <datalist>,<del>,<dfn>,<em>,<embed>,<i>, <ins>, <kbd>,<map>, <mark>,<meter>,<output>, <progress>,<q>,<ruby>,<s>,<samp>, <small>,<span>,<strong>,<sub>,<sup>, <time>, <u>, <var>, <wbr> et contenu texte
  • cinq balises de contenu métadonnées : <noscript>,<script> et <template> + <link itemprop=""> et <meta itemprop="">
  • quatre balises de contenu interactif : <a>,<label>, <select>, <textarea>
  • les neuf balises de contenu embarqué : <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg> et <video>

Embarqué (embedded)

Elements qui importent des ressources externes (non métadonnées) ou des technologies n'utilisant pas le même vocabulaire que le HTML5

Les neuf balises appartenant au contenu embarqué

<audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg> et <video>

Interactif (interactive)

Elements qui permettent une interaction avec l'utilisateur (liens, médias, contrôles de formulaire)

Les 14 balises appartenant au modèle de contenu interactif

<a>, <audio controls="">, <button>, <details>, <embed>, <iframe>, <img usemap="">, <input> sauf si type="hidden", <label>, <object usemap="">, <select>, <textarea>, <th>, <video controls=""> et toute balise portant l'attribut tabindex

Autres types et catégories

Dans les spécifications du W3C et du WHATWG on trouvera entre-autres les catégories suivantes :

Contenu palpable

Tout élément du flow ayant du contenu (au moins un élément ou contenu texte enfant) et n'ayant pas pour attribut hidden

Éléments supportant les scripts

Élements non rendus qui déclenchent une fonctionnalité : les éléments <script> et <template>

Élément transparent

Élement dont le modèle de contenu est hérité du premier parent non transparent.
Exemple : un <a> dans un <p> a le même modèle de contenu que <p>, à savoir du contenu phrasé. Quelques éléments transparents : <a>, <pre>, <ins>, <object>, <param>, <map>... Si un élément transparent n'a pas de parent, son modèle de contenu est celui du flux.

Elements Sectioning roots (racine de sectionnement)

Cf. page Sections

Catégories spécifiques aux formulaires

En HTML4

Le HTML4 a deux principaux modèles de contenu : le contenu inline et le contenu block.

En bref, sauf exception, les balises inline ne peuvent pas contenir de bloc.

Dans la DTD du HTML4.01 Strict, on retrouve aussi la notion de flux, qui regroupe le contenu inline et les contenu block.

Sources :

⚠️ **GitHub.com Fallback** ⚠️