Les différences entre les éléments de niveau bloc et en ligne

HTML est composé de divers éléments qui agissent comme les blocs de construction des pages Web. Chacun de ces éléments appartient à l'une des deux catégories suivantes: éléments de niveau bloc ou élément en ligne. Comprendre la différence entre ces deux types d'éléments est une étape importante dans la création de pages Web.

Éléments de niveau bloc

Alors, qu'est-ce qu'un élément de niveau bloc? Un élément de niveau bloc est un élément HTML qui commence une nouvelle ligne sur une page Web et s'étend sur toute la largeur de l'espace horizontal disponible de son élément parent. Il crée de gros blocs de contenu comme des paragraphes ou des divisions de page. En fait, la plupart des éléments HTML sont des éléments de niveau bloc.

Les éléments de niveau bloc sont utilisés dans le corps du document HTML. Ils peuvent contenir des éléments en ligne, ainsi que d'autres éléments de niveau bloc.

Éléments en ligne

Contrairement à un élément de niveau bloc, un élément en ligne:

Il peut commencer à l'intérieur d'une ligne.

instagram viewer

Il ne démarre pas une nouvelle ligne.
Sa largeur ne s'étend que dans la mesure où elle est définie par ses balises.

Un exemple d'élément en ligne est le , ce qui rend la police du contenu du texte contenu en gras. Un élément en ligne ne contient généralement que d'autres éléments en ligne, ou il ne peut rien contenir du tout, comme le
étiquette de rupture.

Il existe également un troisième type d'élément en HTML: ceux qui ne s'affichent pas du tout. Ces éléments fournissent des informations sur la page mais ne sont pas affichés lorsqu'ils sont rendus dans un navigateur Web.

Par example:

définit les métadonnées.
est l'élément de document HTML qui contient ces éléments.

Changement de type d'élément en ligne et de bloc

Vous pouvez changer le type d'un élément d'inline à block, ou vice versa, en utilisant l'une de ces propriétés CSS:

```
bloc de visualisation; 
```
```
affichage: en ligne; 
```
```
affichage: aucun ;
```

le CSS la propriété d'affichage vous permet de changer une propriété en ligne en bloc, ou un bloc en en ligne, ou ne pas afficher du tout.

Quand changer la propriété d'affichage

En général, laissez la propriété display seule, mais dans certains cas, l'échange des propriétés d'affichage en ligne et en bloc peut être utile.

Menus de liste horizontale: Les listes sont des éléments de niveau bloc, mais si vous voulez que votre menu s'affiche horizontalement, vous devez convertir la liste en élément en ligne afin que chaque élément de menu ne commence pas sur une nouvelle ligne.
En-têtes dans le texte : Parfois, vous souhaiterez peut-être qu'un en-tête reste dans le texte, mais conservez les valeurs d'en-tête HTML. Changer les valeurs h1 à h6 en inline permettra au texte qui vient après sa balise de fermeture de continuer à s'écouler à côté de lui sur la même ligne, au lieu de commencer sur une nouvelle ligne.
Retrait de l'élément : Si vous souhaitez supprimer complètement un élément du document débit normal, vous pouvez régler l'affichage sur
```
rien
```
Une remarque, soyez prudent lorsque vous utilisez l'affichage: aucun. Bien que ce style rende effectivement un élément invisible, vous ne voulez jamais l'utiliser pour masquer le texte que vous avez ajouté pour des raisons de référencement, mais que vous ne voulez pas afficher pour les visiteurs. C'est un moyen infaillible de pénaliser votre site pour une approche black hat en matière de référencement.

Erreurs courantes de formatage des éléments en ligne

L'une des erreurs les plus courantes commises par un débutant dans la conception Web est d'essayer de définir une largeur sur un élément en ligne. Cela ne fonctionne pas car les largeurs des éléments en ligne ne sont pas définies par la boîte du conteneur.

Les éléments en ligne ignorent plusieurs propriétés:

```
largeur
```
et
```
la taille
```
```
largeur maximale
```
et
```
hauteur maximum
```
```
min-largeur
```
et
```
min-hauteur
```

Microsoft Internet Explorer (remplacé par Microsoft Edge) a par le passé appliqué de manière incorrecte certaines de ces propriétés, même aux boîtes en ligne. Ce n'est pas conforme aux normes. Cela peut ne pas être le cas avec les versions plus récentes du navigateur Web de Microsoft.

Si vous devez définir la largeur ou la hauteur qu'un élément doit occuper, vous devrez l'appliquer à l'élément de niveau bloc contenant votre texte en ligne.