Organisation des éléments - noelno/dovelei GitHub Wiki
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.
La majorité des éléments HTML5 y appartient.
<area>
sans parent <map>
, <link>
et <meta>
sans attribut itemprop
, et <style>
sans attribut scoped
<address>
,<blockquote>
,<dialog>
,<dl>
,<fieldset>
,<figure>
,<footer>
,<form>
, <header>
, <main>
,<ol>
,<output>
,<p>
,<pre>
, <table>
et <ul>
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.
<base>
, <command>
, <link>
, <meta>
, <noscript>
, <script>
, <style>
, <template>
et <title>
Elements qui délimitent le document / l'application en zones.
Ces zones correspondent à la portée des headers et footers enfants.
<article>
, <aside>
, <nav>
et <section>
Tous les titres, de <h1>
à <h6>
Elements qui pour la plupart apparaissent dans un flux de texte et sont pour la plupart rendus en-ligne (display: inline
ou inline-block
).
-
<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>
Elements qui importent des ressources externes (non métadonnées) ou des technologies n'utilisant pas le même vocabulaire que le HTML5
<audio>
, <canvas>
, <embed>
, <iframe>
, <img>
, <math>
, <object>
, <svg>
et <video>
Elements qui permettent une interaction avec l'utilisateur (liens, médias, contrôles de formulaire)
<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
Dans les spécifications du W3C et du WHATWG on trouvera entre-autres les catégories suivantes :
Tout élément du flow ayant du contenu (au moins un élément ou contenu texte enfant) et n'ayant pas pour attribut hidden
Élements non rendus qui déclenchent une fonctionnalité : les éléments <script>
et <template>
É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.
Cf. page Sections
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.