imbrication des éléments

"Eléments blocs"
et "éléments en ligne"

Toutes les propriétés CSS ne s'appliquent pas forcément à tous les éléments HTML. Voici pourquoi...

Les éléments HTML peuvent être de trois types : le type "bloc" (parfois appelé "boîte"), le type "en-ligne" et le type "invisible". Certaines propriétés CSS ne sont conçues que pour s'appliquer aux éléments "blocs".

Sélection de liens concernant les éléments blocs et les éléments en ligne.

Ces liens pointent vers des pages dont les contenus complètent notre article.

La propriété "Display"
Il existe en réalité plus de 3 modes d'affichage pour les éléments HTML. Cet article présente les modes "run-in", "compact" et bien d'autres modes rarement utilisés.

Comprendre la structure HTML et le rendu CSS des balises : bloc et en-ligne
Alsacréations insiste sur la distinction à faire entre la structure HTML des éléments et leurs types de rendu : même lorsque l'on modifie la façon d'afficher un élément en jouant sur sa propriété "display", on ne change pas sa structure HTML intrinsèque.

3 modes d'affichage pour les éléments HTML

Par défaut, les éléments HTML sont affichés selon l'un des modes suivants :

1- Bloc / block

éléments superposésOccupe toute la largeur disponible. Lorsque 2 éléments blocs se suivent dans une page, ils sont positionnés (par défaut) l'un sous l'autre.

Exemple typique d'élément bloc : l'élément <p> (le paragraphe).

2- En-ligne / inline

éléments côte à côteN'occupe que la largeur indispensable à l'affichage du contenu et ne provoque pas de retour à la ligne. Lorsque 2 éléments en-ligne se suivent dans une page, ils sont positionnés l'un à côté l'autre (si la largeur de page le permet).

Exemple typique d'élément en-ligne : l'élément <img> (image).

3- Invisible / not displayed

élément invisibleCertains éléments ne servent qu'à apporter des informations invisibles pour l'internaute.

Exemple typique d'élément non affiché : l'élément <meta>.

Rôle des éléments les plus courants

Les éléments de type "block" sont généralement ceux que l'on utilise pour la mise en page, alors que les éléments "inline" sont surtout utilisés pour attribuer un style à une portion de texte.

Voici quelques éléments de type bloc que vous connaissez sans doute :

  • <div> : balise multi-usage. Cette balise est souvent utilisée pour positionner un contenu dans la page.
  • <h1> ... <h6> : encadre un titre ou un sous-titre.
  • <p> : paragraphe.
  • <ul>, <ol>, <dl> : listes (non ordonnée, ordonnée ou avec définition).
  • <li>, <dt>, <dd> : élément de liste, définition, et titre de définition.
  • <table> : tableau.
  • <blockquote> : paragraphe indenté (décalé à droite) normalement utilisé pour présenter une citation.
  • <pre> : bloc de code préformaté.
  • <form> : formulaire de saisie.

Et voici quelques éléments en-ligne que vous avez sans doute déjà utilisés :

  • <span> : balise multi-usage, trés pratique pour appliquer un style CSS à une portion de texte, par exemple.
  • <a> : ancre, permet de créer un lien sortant ou permet de spécifier un point précis de la page vers lequel on veut diriger un lien.
  • <strong> : utilisé pour marquer l'importance particulière d'une portion de texte. Tous les navigateurs actuels afficheront cette portion en gras. NOTE : l'ancienne balise <b> (bold) est obsolète et ne doit plus être utilisée.
  • <em> : utilisé pour accentuer l'importance d'une portion de texte (de façon moins forte que <strong>). Tous les navigateurs actuels afficheront cette portion en italique. NOTE : l'ancienne balise <i> (italic) est obsolète et ne doit plus être utilisée.
  • <img> : image, permet de placer une image au milieu du flux de texte.
  • <br> : saut de ligne. Voilà un cas tout à fait particulier d'élément en-ligne, qui provoque un saut de ligne. Malgré cette particularité, <br> n'est définitivement pas un bloc et doit être classé comme élément en-ligne.
  • <input> : champs de saisie dans un formulaire, tel que ou
  • <abbr> : signale une abbréviation (placez votre curseur dessus pour voir le fonctionnement). Note : Internet Explorer ne gère pas cette balise dans ses versions antérieures à la version 7.

Emboîtement des éléments blocs et en-ligne

D'une façon générale, un élément en-ligne peut s'emboîter dans un élément bloc, alors que l'inverse n'est pas vrai.

Emboîtement autorisé :

<p>
  Phrase avec un <strong> mot </strong> important
</p>

Emboîtement INTERDIT :

<strong>
  <p>Première phrase</p>
  <p>Deuxième phrase</p>
</strong>

Ce dernier exemple fonctionne sans doute dans certains navigateurs, mais il n'est pas conforme aux conventions concernant les emboîtements d'éléments et ne doit pas être utilisé dans vos pages.

Vous pouvez par contre emboîter sans problème un élément block dans un autre élément block ou un élément inline dans un autre élément inline.

Ces règles générales comportent quelques exceptions dont vous trouverez une liste sur alsacreations.

Changer le mode d'affichage d'un élément

Il peut être parfois bien pratique (voire même indispensable !) de changer la façon dont un élément s'affiche.

La propriété CSS "display" permet de basculer d'un mode d'affichage à l'autre trés simplement en écrivant :

display:block
display:inline
ou
display:none

A titre d'exemple, voici comment afficher et gérer un lien (élément en-ligne <a>) sous forme de bloc :

Code :

<a href="bloc-en-ligne.php" style="background-color:#FFCCCC; display:block;">
  <img src="images/blocs-lignes.gif" alt="">
  Exemple de lien
</a>

Résultat :

Exemple de lien

Voici comment se présenterait ce lien sans la propriété "display:block" :

Exemple de lien

 

NOTE IMPORTANTE : si la propriété "display" permet de changer la façon dont un élément est affiché à l'écran, elle ne modifie absolument pas sa nature réelle. Les éléments "block" ne peuvent être emboîtés dans des éléments "inline", même si vous avez modifié leurs propriétés d'affichage !

Propriétés CSS réservées aux éléments "bloc"

D'une façon générale, la plupart des propriétés CSS visant à positionner un élément dans la page sont réservées aux éléments "bloc" ou ayant la propriété "display:block".

C'est par exemple le cas des propriétés suivantes :

Cas (un peu) particuliers

1- Positionnement d'éléments en-ligne

Comme nous venons de le voir dans le chapitre précédente, la propriété "position" ne peut pas s'appliquer à un élément en-ligne. On peut cependant positionner ce type d'élément à l'aide de la propriété "float".

Cette propriété permet de positionner n'importe quel type d'élément sur le côté gauche (float:left;) ou droit (float:right;) d'un pavé de texte, par exemple. L'image que comporte ce paragraphe est positionnée à l'aide d'un "float:left". Pour en savoir plus sur l'utilisation de cette propriété, consultez notre page intitulée mise en page avec les CSS.

2- Hauteur et largeur pour des éléments en-ligne

D'une façon générale, les éléments en-ligne n'ont pas de largeur ni de hauteur pré-définies. C'est leur contenu qui déterminera ces valeurs.

On serait donc tenté de croire que ces balises ne peuvent avoir de propriété width ou height.

Il existe pourtant quelques balises en-ligne qui font exception. Il s'agit de :

qui portent le nom d'éléments "remplacés" ou "replacés", suivant les traductions.

3- Cadres et marges pour des éléments en-ligne

Les éléments en-ligne peuvent parfaitement se voir attribuer des marges internes et externes (padding et margin), ainsi que des bordures (border) ou un fond (background).

Contrairement à ce qu'on pourrait croire, un élément en-ligne peut donc avoir l'apparence d'une "boîte".

Exemple :

<p> Exemple de mot <span style="border-style:solid; border-width:2px"> encadré </span></p>

Résultat :

Exemple de mot encadré



 


Le copyright de cette page appartient à css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention (y compris les 2 liens ci-dessus) dans le contenu copié.
This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.


Valid HTML 4.01 Transitional - Vérifier l'orthographe avec RankSpirit et "BonPatron"
Dans cette page :
Raccourcis
Contact liens d'évitement et raccourcis clavier Droits de copie Accueil Imprimer
Aller au menu