Les balises Div et Span

 

Les balises Div et Span

la balise Div

L'élément div est généralement utilisé avec des class et des id. On pourrait dire la même chose pour l'élément span, mais il y a tout de même une différence qui reste importante.

On utilisera plutôt des <div> ... </div> pour donner une identité à des boîtes CSS, à des blocs de structure. Ces blocs peuvent, par exemple, correspondre à un ensemble de paragraphes.

On ajoutera donc à un bloc un id pour lui donner une identité unique, ou bien une class si l'on compte utiliser plusieurs fois le même type de bloc dans une même page.

Lorsque vous utilisez les balises <div> ... </div>, on parle d'élément de type bloc.

En fait, vous n'avez qu'à vous dire que lorsqu'on parle de div, on parle forcément de bloc de structure ou de boîte.

Exemple d'utilisation

Si je veux donner une identité à l'une de mes boîtes, j'utiliserai un id avec ma paire de balises

<div> ... </div>.Ceci me permettra d'identifier cet élément qui doit être unique, et je pourrai aussi lui affecter un style bien particulier.

J'écrirai donc dans ma feuille de style ceci :#navigation {...}

Tandis que dans mon document HTML, je noterai :

<div id="navigation"> ... </div>

La balise <Span>

Les balises ..<span> ... </span>. sont utilisés pour modifier un morceau de texte qui est, la plupart du temps, déjà contenu entre des <div> </div>

.
On utilise souvent cette balise pour souligner l'importance d'un mot ou d'un morceau de texte. Pour cela, on aura tendance à modifier la couleur, la taille, la police d'écriture du texte...

Par exemple, si je veux qu'un mot qui est au sein de mon paragraphe soit écrit en vert, voici ce que je devrai écrire :

.vert {color : green}

Mon texte et <span class="vert">mes mots en verts<span> !

Etant donné que les balises <span> </span> sont utilisés pour modifier un morceau de texte déjà contenus dans des <div> </div>

, nous parlerons de style en ligne.

Conclusion

On utilisera les <div> </div> pour créer des boîtes CSS et pour leur donner une identité.
Les balises <span> </span> seront, quant à elles, utilisées pour modifiées le style d'un mot ou d'un morceau de texte qui est inclus dans une boîte ou un bloc.