Leçon 8 : Le regroupement d'éléments (span et div)

Les éléments <span> et <div> servent à regrouper et structurer un document et seront souvent utilisés avec les attributs class et id.

Dans cette leçon, nous verrons de plus près l'utilisation des deux éléments <span> et <div>, et leur importance centrale pour CSS.

  • Le regroupement avec <span>
  • Le regroupement avec <div>

Le regroupement avec <span>

L'élément <span> est ce qu'on pourrait appeler un élément neutre, qui n'ajoute rien au document en lui-même. Mais CSS peut utiliser l'élément <span> pour ajouter des caractéristiques visuelles à des parties spécifiques du texte des documents.

Cette citation de Benjamin Franklin en constitue un exemple :

	
	<p>Tôt couché et tôt levé
fortifie, enrichit et rend avisé.</p>

Supposons que les avantages aux yeux de M. Franklin de ne pas gaspiller son sommeil soient accentués en rouge. Dans ce but, nous pouvons baliser les avantages avec des éléments <span>. Chaque span reçoit alors un attribut class défini ainsi dans la feuille de style :

	
	<p>Tôt couché et tôt levé
<span class="benefit">fortifie</span>,

	<span class="benefit">enrichit</span>
et <span class="benefit">rend avisé</span>.</p>

Le code CSS associé :

	
	span.benefit {
		color:red;
	}

Bien sûr, vous pouvez aussi utiliser l'attribut id pour ajouter du style aux éléments <span>, tant que vous appliquez un id unique à chacun des trois éléments <span>, comme appris dans la leçon précédente.

Le regroupement avec <div>

Alors que <span> s'utilise dans un élément de type bloc comme vu précédemment, <div> sert à regrouper un ou plusieurs éléments de type bloc.

Hormis cette différence, le regroupement avec <div> fonctionne plus ou moins de la même façon. Voyons un exemple avec deux listes de présidents des États-Unis répartis selon leur affiliation politique :

	
	<div id="democrats">
	<ul>
	<li>Franklin D. Roosevelt</li>
	<li>Harry S. Truman</li>
	<li>John F. Kennedy</li>
	<li>Lyndon B. Johnson</li>
	<li>Jimmy Carter</li>
	<li>Bill Clinton</li>
	</ul>
	</div>

	<div id="republicans">
	<ul>
	<li>Dwight D. Eisenhower</li>
	<li>Richard Nixon</li>
	<li>Gerald Ford</li>
	<li>Ronald Reagan</li>
	<li>George Bush</li>
	<li>George W. Bush</li>
	</ul>
	</div>

Dans notre feuille de style, nous pouvons utiliser le regroupement exactement de la même façon que précédemment :

	
	#democrats {
		background:blue;
	}

	#republicans {
		background:red;
	}

Dans les exemples précédents, nous avons utilisé les éléments <div> et <span> pour des choses très simples telles que les couleurs du texte et de l'arrière-plan. Ces deux éléments ont le potentiel pour des choses beaucoup plus évoluées, mais nous ne les abordons pas ici. Cela interviendra plus loin dans le tutoriel.

Résumé

Dans les leçons 7 et 8, vous avez vu les sélecteurs id et class, et les éléments span et div.

Vous êtes maintenant capable de regrouper et d'identifier, plus ou moins, toutes les parties d'un document, ce qui constitue un grand pas vers la maîtrise de CSS. Dans la leçon 9, nous introduirons le modèle des boîtes.

<< Leçon 7: L'identification et le regroupement d'éléments (class et id)

Leçon 9: Le modèle des boîtes >>