HTML Éléments de bloc et en ligne

Chaque élément HTML a une valeur d'affichage par défaut, qui dépend de son type.

Les deux valeurs d'affichage les plus courantes sont bloc et en ligne.

Éléments de niveau bloc

Un élément de niveau bloc commence toujours sur une nouvelle ligne, et les navigateurs ajoutent automatiquement un espace (une marge) avant et après l'élément.

Un élément de niveau bloc occupe toujours toute la largeur disponible (s'étend à gauche et à droite autant qu'il le peut).

Deux éléments de bloc couramment utilisés sont : <p> et <div> .

L'élément <p> définit un paragraphe dans un document HTML.

L'élément <div> définit une division ou une section dans un document HTML.

L'élément <p> est un élément de niveau bloc.

L'élément <div> est également un élément de niveau bloc.

Exemple

<p>Bonjour le monde</p>
<div>Bonjour le monde</div>
Essayez-le vous-même »

Voici les éléments de niveau bloc en HTML :

<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>

Éléments en ligne

Un élément en ligne ne commence pas sur une nouvelle ligne.

Un élément en ligne n'occupe que la largeur nécessaire.

Ceci est un élément <span> à l'intérieur d'un paragraphe.

Exemple

<span>Bonjour le monde</span>
Essayez-le vous-même »

Voici les éléments en ligne en HTML :

<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>

Remarque : Un élément en ligne ne peut pas contenir un élément de niveau bloc !

L'élément <div>

L'élément <div> est souvent utilisé comme conteneur pour d'autres éléments HTML.

L'élément <div> n'a pas d'attributs requis, mais style , class et id sont courants.

Lorsqu'il est utilisé avec CSS, l'élément <div> peut être utilisé pour styliser des blocs de contenu :

Exemple

<div style="background-color:black;color:white;padding:20px;">
<h2>Londres</h2>
<p>Londres est la capitale de l'Angleterre. C'est la ville la plus peuplée du Royaume-Uni, avec une zone métropolitaine de plus de 13 millions d'habitants.</p>
</div>
Essayez-le vous-même »

Vous en apprendrez plus sur l'élément <div> dans le prochain chapitre .

L'élément <span>

L'élément <span> est un conteneur en ligne utilisé pour marquer une partie d'un texte ou d'un document.

L'élément <span> n'a pas d'attributs requis, mais style , class et id sont courants.

Lorsqu'il est utilisé avec CSS, l'élément <span> peut être utilisé pour styliser des parties du texte :

Exemple

<p>Ma mère a des yeux <span style="color:blue;font-weight:bold;">bleus</span> et mon père a des yeux <span style="color:darkolivegreen;font-weight:bold;">verts foncés</span>.</p>
Essayez-le vous-même »

Résumé du chapitre

  • Un élément de niveau bloc commence toujours sur une nouvelle ligne et occupe toute la largeur disponible
  • Un élément en ligne ne commence pas sur une nouvelle ligne et n'occupe que la largeur nécessaire
  • L'élément <div> est un élément de niveau bloc et est souvent utilisé comme conteneur pour d'autres éléments HTML
  • L'élément <span> est un conteneur en ligne utilisé pour marquer une partie d'un texte ou d'un document

Balises HTML

Balise Description
<div> Définit une section dans un document (niveau bloc)
<span> Définit une section dans un document (en ligne)

Pour une liste complète de toutes les balises HTML disponibles, visitez notre Référence des balises HTML .

Vidéo : HTML Bloc et En Ligne