HTML Block et élements inline

Chaque élément HTML a une valeur d'affichage par défaut, selon le type d'élément dont il s'agit.

Il existe deux valeurs d'affichage : block et inline.

É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 (il s'étend aussi loin que possible vers la gauche et la droite).

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

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

L' <div>élément 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 un élément de niveau bloc.

Exemple

<p>Hello World</p>
<div>Hello World</div>

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

< adresse >

< article >

< à part >

< bloc de citation >

< toile >

< jj >

< div >

< dl >

< dt >

< ensemble de champs >

< légende >

< chiffre >

< pied de page >

< formulaire >

< h1 > - < h6 >

< en-tête >

< h >

< li >

< principal >

< navigation >

< aucun script >

< ol >

< p >

< pré >

< rubrique >

< tableau >

< pied >

< ul >

< vidéo >

Éléments en ligne

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

Un élément en ligne ne prend que la largeur nécessaire.

Il s'agit d'un élément <span> à l'intérieur d'un paragraphe.

Exemple

<span>Hello World</span>

Voici les éléments en ligne en HTML :

< un >

< abbr >

< acronyme >

< b >

< bdo >

< grand >

<br> _ _

< bouton >

< citer >

< code >

< dfn >

< em >

< je >

< image >

< entrée >

< kbd >

< étiquette >

< carte >

< objet >

< sortie >

< q >

< échantillon >

< script >

< sélectionner >

< petit >

< étendue >

< fort >

< sous >

< souper >

< zone de texte >

< heure >

< tt >

< var >

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

L'élément <div>

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

L' <div>élément n'a pas d'attributs obligatoires, mais style, classet idsont communs.

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

Exemple

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

L'élément <span>

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

L' <span>élément n'a pas d'attributs obligatoires, mais style, classet idsont communs.

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

Exemple

<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold;">dark green</span> eyes.</p>

Résumé du chapitre

• Il existe deux valeurs d'affichage : block et inline
• 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 ne prend que la largeur nécessaire
• L' <div>élément est au niveau du bloc et est souvent utilisé comme conteneur pour d'autres éléments HTML
• L' <span>élément est un conteneur en ligne utilisé pour marquer une partie d'un texte ou une partie d'un document