Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Éléments de bloc

Les éléments de bloc forment une catégorie d'éléments HTML (HyperText Markup Language) en opposition aux éléments en ligne.

Leur caractéristique principale réside dans le fait qu'ils sont séparés par un saut de ligne avant et après l'élément (créant ainsi un « bloc » de contenu). On peut, en quelque sorte, les représenter comme des blocs empilés les uns sur les autres. Ce faisant, ils prennent la largeur de leurs conteneurs.

Exemples

HTML

<p>Ce paragraphe est un élément de bloc. Son fond a été coloré pour illustrer son conteneur.</p>

CSS

p {
  background-color: #8ABB55;
}

Résultat

Contrainte

  • Les éléments de bloc ne peuvent apparaître qu'au sein d'un élément <body>

Élément de bloc ou élément en ligne ?

Les éléments de bloc diffèrent des éléments en lignes par :

La mise en forme
Par défaut, les éléments de bloc commencent sur des nouvelles lignes.
Le modèle de contenu
De façon générale, les éléments de bloc peuvent contenir des éléments en ligne et d'autres éléments de bloc. L'idée structurelle sous-jacente est que les éléments de bloc créent de plus grandes structures que les éléments en ligne.

La distinction entre bloc et ligne est utilisée dans les spécifications HTML jusqu'à la version 4.01. En HTML5, cette distinction binaire est remplacée par un ensemble plus complexe de catégories de contenu. La catégorie des éléments en bloc correspond approximativement à la catégorie de contenu de flux en HTML5, celle des éléments en ligne correspond à la catégorie de contenu phrasé. Il y a également d'autres catégories.

Éléments

La liste qui suit contient tous les éléments HTML en bloc (cette catégorie n'est pas strictement applicable pour les éléments apparus avec HTML5).

<address>
Information de contact.
<article> HTML5
Contenu d'un article.
<aside> HTML5
Contenu tangentiel.
<audio> HTML5
Lecteur audio.
<blockquote>
Long bloc de citation.
<canvas> HTML5
Canevas de dessin.
<dd>
Description d'une définition.
<div>
Division d'un document.
<dl>
Liste de définitions.
<fieldset>
Ensemble de champs.
<figcaption> HTML5
Légende d'une image.
<figure> HTML5
Permet de grouper des média avec une légende (voir <figcaption>).
<footer> HTML5
Bas de page ou de section.
<form>
Formulaire.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Éléments de titre de niveau 1 à 6.
<header> HTML5
En-tête de page ou de section.
<hgroup> HTML5
Information d'en-tête de groupe.
<hr>
Ligne de division horizontale.
<main>
Contient le contenu central unique au document.
<nav>
Contient des liens de navigation.
<noscript>
Contenu à utiliser si les scripts ne fonctionnent pas ou s'ils sont désactivés.
<ol>
Liste ordonnée.
<output> HTML5
Résultat d'un formulaire.
<p>
Paragraphe.
<pre>
Texte pré-formaté.
<section> HTML5
Section d'une page web.
<table>
Tableau.
<tfoot>
Pied de tableau.
<ul>
Liste non-ordonnée.
<video> HTML5
Lecteur vidéo.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Bat41, wakka27
 Dernière mise à jour par : SphinxKnight,