Dans ce nouveau chapitre, nous allons parler des différents types d'éléments HTML et plus spécifiquement des types bloc et inline. Nous chercherons à comprendre les différences entre ces deux types et l'impact qu'elles ont sur la création de pages web.
Les éléments de type bloc sont ceux qui occupent toute la largeur disponible et commencent toujours sur une nouvelle ligne. Ils peuvent contenir d'autres éléments de type bloc, ainsi que des éléments de type inline. Par exemple, l'élément
Exemple avec l'élément
Pour illustrer cela, prenons l'exemple de l'élément
. Supposons que nous voulions lui ajouter une bordure pour mieux visualiser son espace occupé. En utilisant une règle CSS, nous pouvons définir une bordure d'un pixel solide en noir autour de cet élément.
<p style="border: 1px solid black;">Lorem ipsum dolor sit amet...</p>
Lorsque nous affichons cette page web, nous constatons que l'élément
occupe tout l'espace disponible, comme tous les éléments de type bloc. La bordure entoure entièrement l'élément, démontrant ainsi son espace d'occupation.
Les éléments de type bloc peuvent également contenir d'autres éléments de type bloc, par exemple, une liste non ordonnée ou des éléments de formulaire.
Les éléments de type bloc communs
Les éléments HTML les plus couramment utilisés et de type bloc sont :
- Les éléments
<p>
- Les éléments de titre
<h1>
, <h2>
, <h3>
, etc.
- Les éléments de listes ordonnées et non ordonnées
<ol>
et <ul>
- Les éléments de formulaire
<form>
- Les éléments de section
<div>
Les types inline
Les éléments de type inline ne commencent pas sur une nouvelle ligne et s'insèrent dans la ligne actuelle. Ils prennent uniquement la largeur nécessaire à leur contenu, contrairement aux éléments de type bloc. Un exemple d'élément de type inline est l'élément <strong>
. Dans l'exemple suivant, nous pouvons observer que cet élément occupe uniquement la largeur de son contenu.
<p>Ceci est un texte <strong>important</strong>.</p>
Les éléments de type inline sont souvent utilisés pour du texte ou des éléments qui se trouvent à l'intérieur d'un paragraphe ou d'une phrase, comme des liens, des images ou des éléments d'emphase.
Exemple avec l'élément
Prenons l'élément <strong>
à titre d'exemple. Pour mieux visualiser sa largeur de contenu, nous pouvons ajouter une bordure autour de celui-ci.
<p>Ceci est un texte <strong style="border: 1px solid black;">important</strong>.</p>
Dans ce cas, nous pouvons observer que l'élément <strong>
occupe uniquement la largeur de son contenu. La bordure est strictement ajustée autour du texte, sans occuper d'espace supplémentaire.
Les éléments de type inline communs
Les éléments HTML les plus couramment utilisés et de type inline sont :
- Les éléments de lien
<a>
- Les éléments d'image
<img>
- Les éléments d'emphase
<strong>
, <em>
, <u>
, etc.
Les différences entre les éléments de type bloc et inline
Maintenant que nous avons compris les bases des types bloc et inline, il est important de comprendre les différences entre ces deux types d'éléments.
Les éléments de type bloc occupent toute la largeur disponible et commencent sur une nouvelle ligne, tandis que les éléments de type inline ne commencent pas sur une nouvelle ligne et s'insèrent dans la ligne actuelle. Cela a un impact sur la façon dont nous les manipulons en CSS et sur les propriétés que nous pouvons leur appliquer.
L'impact des différences sur la création de pages web
Les différences entre les éléments de type bloc et inline ont un impact sur la création de pages web. En effet, nous devons les manipuler différemment en CSS pour obtenir le rendu souhaité.
Propriétés CSS spécifiques aux éléments de type bloc
Les éléments de type bloc peuvent être stylisés avec des propriétés CSS spécifiques telles que :
- Le dimensionnement avec
width
et Height
- Le positionnement avec
margin
et padding
- La gestion du flux avec
clear
et float
Ces propriétés permettent de contrôler l'apparence et la mise en page des éléments de type bloc dans une page web.
Propriétés CSS spécifiques aux éléments de type inline
Les éléments de type inline peuvent être stylisés avec des propriétés CSS spécifiques telles que :
- Le style du texte avec
font-size
et color
- Les traits de soulignement et d'annulation avec
text-decoration
- L'espacement entre les caractères avec
letter-spacing
Ces propriétés sont utilisées pour manipuler le contenu de ligne, comme du texte ou des éléments d'emphase, en leur appliquant différents effets visuels.
Conclusion
La connaissance des types d'éléments HTML et des différences de comportement entre les éléments de type bloc et inline est essentielle pour la création de pages web fonctionnelles et ergonomiques. En comprenant ces différences, vous serez en mesure de choisir les bons éléments HTML et de les styliser de manière appropriée pour obtenir le rendu souhaité. Dans la prochaine leçon, nous étudierons plus en détail la création de formulaires HTML et l'insertion d'images avec les éléments <form>
et <img>
.