Introduction

Jusqu'à présent, nous avons vu certains éléments du HTML, mais ils ne font que se succéder les uns derrière les autres sans mise en forme. Il faut avouer que ce n'est pas très agréable à regarder, mais de toute façon, l'esthétisme de notre page n'est tout simplement pas le travail du HTML, mais cela du CSS et parfois du JavaScript. Nous pouvons, par contre, faire en sorte de différencier les éléments, ce qui nous permettra non seulement d'améliorer la visibilité de notre code, mais aussi d'y greffer le CSS et le JavaScript.

Pour ce faire, nous allons mettre en place des conteneurs qui engloberont notre code. Il en existe de deux sortes, les conteneurs génériques et les sémantiques. Dans cet article, nous verrons les conteneurs génériques et les sémantiques seront abordés dans un prochain article.

Les conteneurs génériques.

Il y a deux types de conteneurs génériques : ceux de type « bloc » (En anglais : block) et ceux de type « en ligne » (En anglais : inline).
 

Le conteneur de type bloc

Nous allons utiliser le conteneur `<div>` (pour division) et sachez que c'est le plus utilisé.

<div>  
  <h1>Les conteneurs</h1>  
  <p>Lorem ipsum dolor sit amet.</p>  
</div>

Ce conteneur va permettre de réunir nos éléments car ils font partie du même groupe. Dans le code  ci-dessus, le titre `<h1>` est lié au texte `<p>`. Vous pouvez remarquer que j'ai indenté le code entre la balise ouvrante et fermante de la `div`. 

Le conteneur de type « en ligne »

Il s'agit du conteneur `<span>` et il est utilisé pour du contenu dit « phrasé » (du texte).

<p>Lorem ipsum dolor sit amet, <span>adipisicing elit</span> sit.</p>

Il nous permettra, par la suite, de mettre du style à une partie de notre texte et seulement à une partie.

Utilisation des conteneurs

Comme vous pouvez le constater, ils ont tous les deux des balises fermantes que vous ne devez pas oublier.

Bon d'accord, ces balises ne font... rien. Mais alors, à quoi servent-elles ? Juste à rendre le code plus lisible avec l'indention ? En fait, c'est le ciment pour le CSS et le JavaScript grâce aux attributs « class » et « id » et je vous explique comment dans le prochain article.