Grouper des éléments

On peut vouloir structurer le contenu d'un document en zones logiques par exemple en sections, ou en parties pour pouvoir par exemple appliquer un style commun à toutes les sections du document. Il y a deux éléments pour définir des zones ou divisions du documents : l'élément div et l'élément span.

Division en bloc ou inline

L'élément div représente une division en mode bloc. Voyons un exemple pour comprendre ce que le mode bloc.

Un texte en mode bloc est donc un texte qui sera automatiquement précédé et suivi d'un saut de ligne. À l'opposé, on à les textes en mode inline (dans le texte) qui ne sont donc pas précédé et suivi d'un retour à la ligne mais restent dans le texte. On utilise à cette fin l'élément SPAN.

Utilisation

Une des utilisations typique du groupement d'éléments est l'application de style à tout le groupe d'un coup. On utilise alors les éléments DIV et SPAN avec les attributs id et class.

L'attribut id permet de donner un identifiant à un élément. Cet identifiant doit être unique dans le document. Par contre, l'élément class indique une liste de classes auxquelles appartient l'élément. Plusieurs éléments peuvent donc appartenir à la même classe.

Imaginons que l'on rédige un document qui représente un article. On va par exemple pouvoir utiliser un élément DIV pour représenter l'article et encadrer les auteurs des photos et de l'article avec un élément SPAN.

Le premier groupe en mode bloc est créé avec un élément DIV et on lui donne un identifiant unique article. Ensuite, on définit deux groupements inline avec l'élément SPAN et on leur donne une classe, la classe auteur. On peut maintenant appliquer un style en tenant compte des groupes.

Et voici le résultat dans un navigateur.

Grâce à ces divisions, on a pu appliquer facilement un style à un groupe d'élément, de plus, ces division apportent plus d'information au texte, on repère qu'on a un article et deux auteurs.