Envoyer un mail à l’auteur
xavier at ultra-fluide.com

Ressources

• Marquage sémantique XSLT
• CSS
• XHTML
  • Attribut target et W3C
  • MathML et XHTML
  • Block et Inline en XHTML et CSS
• Extensions Firefox
• TrustRank, anti-spam
• Datamining
• Divers web

Block ou Inline, éléments et positionnement.

Confusion

Les notions de Block et Inline conduisent parfois à de belles confusions lors des premiers pas vers les standards web, voire à des quiproquos sur les forums spécialisés. Il est vrai que le W3C ne facilite pas la tâche des webmasters dans l'emploi de cette terminologie.

D'où vient l'Ambiguïté ?
Le W3C a introduit ce même vocabulaire dans deux champs distincts des standards lui réservant des significations sans véritables relations : Block et Inline définissent à la fois des catégories d'éléments en XHTML, mais également des modes de positionnement en CSS. C'est pourquoi il est nécessaire d'être précis dans l'utilisation de ces termes, et de préciser un contexte appartenant soit à une problématique de présentation (CSS) ou au contraire à une question purement structurelle (XHTML). Le mélange est courant d'autant que :

• lorsque l'on découvre l'une des normes du W3C rien n'indique que ce vocabulaire existe aussi dans une autre recommandation,
• pour compliquer le tout, les notions Block et Inline ne sont pas totalement sans lien lorsque l'on passe de XHTML à CSS. En effet il y a correspondance entre le positionnement CSS par défaut d'un élément (absence de propriété display explicite) et le nom de l'ensemble de contenus XHTML auquel il appartient. Ainsi par défaut, un élément Block (au sens XHTML) a un positionnement Block (CSS), alors que qu'un élément Inline (au sens XHTML) a un positionnement Inline (CSS).

Block et Inline en XHTML

XHTML définit sur une syntaxe XML un langage permettant de coder la structure du contenu d'une page web. Comme pour tout langage XML, la spécification de XHTML passe par sa DTD (exemple pour XHTML 1.0 STRICT). Les termes Block et Inline sont introduits dans la DTD XHTML et y définissent, aux cotés d'autres vocables, des ensembles de contenus. Pour illustrer, voici les principaux ensembles de contenus que la DTD s'attache à définir :

• Flow
• Heading
• Block
• Inline
• List
• Form
• Formctrl

Une DTD définit un langage XML en listant les éléments XML qui seront utilisés dans le langage, mais aussi en indiquant quelles sont les imbrications possibles de ces éléments.
Une DTD n'est pas un document très lisible pour qui n'en a pas l'habitude, et pour simplifier disons que la DTD XHTML procède sur un plan logique de la façon suivante :

1. liste des éléments autorisés (regroupés par modules dans les versions récentes)
   Ainsi par exemple, on sait que XHTML utilise les éléments : <html/>, <body/>, <div/>, <p/>, <span/>, <a/>, <br/>, <ul/>, <form/>, <input/>, <table/>, <tr/>...
2. appartenance de chaque élément à un ensemble de contenus
   Ainsi, <div/> et <p/> appartiennent à Block, <a/> et <span/> à Inline, <ul/> à List, <input/> à Formctrl... Sachant également que Flow est un regroupement de Heading, Block, List et Inline.
3. définition pour chaque élément de ses contenus autorisés
   Les contenus autorisés sont une liste d'éléments et/ou d'ensembles de contenus et/ou d'une chaîne de caractères (du texte). Par exemple <br/> est vide, <div/> contient du texte, des éléments appartenant à Flow ou est vide, <a/> contient du texte, des éléments appartenant à Inline ou est vide, <ul/> contient au moins 1 élément <li/>, <form/> contient un élément <form/> et/ou des éléments appartenant à Heading ou Block ou List et ne peut être vide, <tr/> contient au moins un élément <td/> ou <th/>...

Ces informations permettent de définir la structure principale d'un document XHTML. La DTD XHTML définit également des attributs et des catégories d'attribut, des contenus possibles pour chaque attribut, les attributs possibles pour chaque élément. Pour une information complète on pourra se reporter à la recommandation du W3C portant sur la modularisation de XHTML.

Pour terminer et revenir à nos Block et Inline, disons simplement qu'ils contribuent à définir la structure possible d'un document XHTML, d'où nous pourrons retenir par exemple que :

• Les éléments Block peuvent en général contenir des éléments Inline, alors que les éléments Inline ne peuvent jamais contenir d'élément Block
• <div/> et <p/> sont des éléments Block
• <span/> et <br/> sont des éléments Inline
• <div/> et <p/> peuvent contenir <span/> et <br/>, alors que l'inverse n'est pas vrai
• <span/> peut contenir <span/> et <br/>
• <br/> ne contient rien car c'est un élément Inline vide

Block et Inline en CSS

CSS est un langage de feuilles de styles qui autorise à définir des styles et les attacher aux éléments d'un document structuré (typiquement un document XML, et en particulier un document XHTML). Ces styles sont ensuite interprétés par le moteur de rendu du logiciel chargé de représenter le document (sur écran, imprimante...)

L'un des concepts centraux de CSS repose sur la notion de boîte (box en anglais) que l'on peut simplement se représenter comme un rectangle. Le document complet est, en terme de représentation, un assemblage de boîtes qui peuvent se trouver cote à cote ou imbriquées. 2 boites sont imbriquées, lorsque sur le plan structurel, l'une (le parent) contient l'autre (l'enfant). Au contraire, 2 boites sont cote à cote, lorsque sur le plan structurel, l'une suit l'autre en tant que contenu de la même boîte parent.

Nous nous intéresserons uniquement aux boites cote à cote, pour lesquelles, lorsqu'elles sont placées naturellement dans la page, différents agencements sont possibles et en particulier :

• l'une sous l'autre, et ce quelles que soient leurs dimensions. C'est le mode de visualisation Block.
• l'une à droite de l'autre avec éventuellement retour à la ligne lorsque les dimensions des différents éléments l'imposent. C'est le mode de visualisation Inline.

Le choix d'un mode de visualisation se définit grâce à la propriété CSS display qui peut, entre autre, prendre la valeur bloc ou inline. Les modes de visualisation block et inline diffèrent dans le détail sur bien des points. En voici quelques exemples :

• la hauteur et largueur d'une boite peuvent être spécifiées en visualisation block mais pas inline,
• une boîte block peut être positionnée sur l'axe horizontal et vertical, alors qu'une boite inline ne peut l'être sur l'axe vertical,
• une boîte bénéficiant d'un positionnement absolu dans la page ne peut pas être inline...

Block et inline sont donc des notions qui interviennent en profondeur pour définir le rendu visuel des documents.

Mélange des genres, éléments à la fois Block et Inline

Un élément Inline au sens XHTML est par défaut caractérisé par la propriété display:inline en CSS. C'est le cas de l'élément <a> par exemple. Mais dans certaines circonstances il est utile de visualiser un élément <a> en Block. Cela permet notamment d'en maîtriser la taille (possibilité d'utiliser les propriétés height et width) et d'obtenir ainsi une zone cliquable étendue pour un menu. Voici pour illustrer un menu vertical dont les items sont cliquables sur 1.5em de haut et 150 pixels de large indépendamment du contenu de l'item :

<style type="text/css">
  ul {
      list-style:none;  
      padding:0; 
      width: 150px; 
      border-top:1px solid;
  }
  li {  
      width: 100%;
      height: 1.5em;
      border-bottom:1px solid;  
  }
  a  {
      display:block;  
      width: 100%;
      height: 100%;  
  }
</style>

<body>
      <ul>
          <li><a href="#">item1</a></li>  
          <li><a href="#">item2</a></li>
          <li><a href="#">item3</a></li>
      </ul>
</body>

Nos éléments <a/> sont donc dans ce menu, Inline au sens XHTML et Block en CSS.

A l'inverse un élément Block au sens XHTML est par défaut caractérisé par la propriété display:block en CSS, comme l'est l'élément <li/>. On pourra alors volontairement changer le mode de visualisation d'éléments <li/> en Inline pour les avoir côte à côte. Prenons cette fois ci le cas d'un menu horizontal dont la structure XHTML est identique à l'exemple précédent :

<style type="text/css">
  ul {
      list-style:none;  
      padding:0;
      border-left:1px solid;
  }
  li {  
      display:inline;          
      padding:0 10px;
      border-right:1px solid;
  }
</style>

<body>
      <ul>
          <li><a href="#">item1</a></li>  
          <li><a href="#">item2</a></li>
          <li><a href="#">item3</a></li>
      </ul>
</body>

Nos éléments <li/> sont cette fois ci Block au sens XHTML mais Inline en CSS.