Les blocs et conteneurs en XHTML

Noter ce cours :

Les blocs et conteneurs généraux

Les balises XHTML se décomposent en deux types différents :

Les balises de type block on la particularité de créer un retour à la ligne. Un exemple vaut mieux qu'un long discours :

<p>Ceci est un premier bloc.</p><p>Ceci un deuxième.</p>

Voici comment on pourrait représenter ça au travers d'un schéma :

Agencement des blocs en XHTML

Vous verrez que vos paragraphes ne seront pas sur la même ligne. Les sites web sont constitués d'une suite de blocs que vous allez pouvoir agencer comme vous le souhaitez, grâce à des CSS, mais aussi à d'autres balises de type block. Comme autres balises très utilisées, vous avez la balise <div> qui est un conteneur général. Vous pouvez tout mettre dans une balise <div> ou presque. Voici un exemple de code XHTML suivi d'un schéma qui peut vous montrer ce que l'on peut obtenir au niveau de l'agencement des blocs :

<div>
<p>Ceci est un premier bloc.</p>
<p>Ceci un deuxième.</p>
</div>
<div>
<p>Ceci est un troisième bloc.</p>
<p>Ceci un quatrième.</p>
</div>

Blocs et conteneurs en XHTML

Les conteneurs vont vous permettre de regrouper certaines balises entre-elles. Ici nous en avons profité pour regrouper des balises <p>. Ce qui est intéressant avec ça, et nous le verrons plus tard, est que les conteneurs vont simplifier énormément les opérations de positionnement. Car le XHTML c'est bien beau, mais cela ne permet pas de positionner précisément les blocs où on le souhaite, au pixel près (seules les CSS le permettent).

Après avoir vu les balises de type block, intéressons-nous aux balises de type inline. Les balises de type inline ont la particularité de ne pas effectuer de retour à la ligne. Elles se placent toujours à l'intérieur de balises de type block (mais peuvent être à l'intérieur de balises de type inline si une balise de type block les englobe, comme nous l'avons vu avec les <div> plus haut). Comme balises de type inline, il existe les liens <a>, les balises <strong>, <em>, <img />, <span> et bien d'autres.

Voici un exemple de code utilisant une balise de type inline, et sa représentation sous forme de schéma bloc :

<p>Ceci est un <strong>premier</strong> bloc.</p>

Balises inline

Comme vous pouvez le constater, la balise de type inline n'a pas créé de retour à la ligne. Vous pourrez de toute façon en forcer un avec les CSS si vous le souhaitez (tout comme vous pouvez transformer une balise de type block en balise de type inline, on verra tout ça plus tard dans d'autres chapitres et ce cours prendra tout son sens).

Chapitre suivant

Les listes

Vous avez aimé cet article intitulé Les blocs et conteneurs en XHTML ? Partagez-le !
Vulgarisation-informatique.com
Cours en informatique & tutoriels