Toute page web se décompose entièrement en de tels blocs imbriqués les uns dans les autres, un paragraphe contenant lui-même un lien, qui contient lui-même du texte : c’est cette structure d’emboîtement qui donne au document sa hiérarchie logique, indépendamment de son apparence visuelle finale.
Comment WordPress les compose
L’éditeur de blocs sauvegarde chaque bloc sous la forme d’un ou plusieurs éléments HTML précis, entourés de commentaires spéciaux qui permettent à WordPress de reconnaître à quel bloc chaque portion correspond :
<!-- wp:paragraph -->
<p class="has-text-align-center">Bienvenue sur le site.</p>
<!-- /wp:paragraph -->Une fois affiché, ce paragraphe devient un élément à part entière de l’arbre DOM, ciblable en CSS ou manipulable en JavaScript comme n’importe quel autre.
À ne pas confondre
- Un élément « vide » comme
<img>ou<input>reste un élément à part entière malgré l’absence de contenu textuel entre ouverture et fermeture. - Le terme « nœud » est plus large que celui d’élément : un morceau de texte brut ou un commentaire sont aussi des nœuds de l’arbre DOM, sans pour autant être des éléments HTML.
- Un élément peut contenir d’autres éléments imbriqués à volonté, tant que les règles de contenu autorisé de la spécification HTML sont respectées, par exemple un paragraphe ne peut pas contenir un autre paragraphe.
- Le nom d’un élément détermine son rôle par défaut pour les technologies d’assistance, même sans attribut supplémentaire : un bouton natif est ainsi immédiatement identifié comme actionnable par un lecteur d’écran.