Regroupement avec 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>

Le regroupement avec <span>
L’élément <span> est un élément neutre, qui n’ajoute rien au document. Mais CSS peut utiliser l’élément <span> pour ajouter des caractéristiques visuelles à des parties spécifiques du texte des documents.
Exp:

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

Pour accentuer en rouge des parties de cette citation . Dans ce but, on utilise la balise <span>. Chaque span reçoit un attribut class défini dans la feuille de style :

Fichier HTML

<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> 

Fichier CSS

span.benefit { color:red; } 

On peut 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>.

<span> s’utilise dans un élément de type bloc, <div> sert à regrouper un ou plusieurs éléments de type bloc.
Le regroupement avec <div> fonctionne plus ou moins de la même façon.
Exp: Deux listes de présidents des États-Unis répartis selon leur affiliation politique :

Fichier HTML

<div id="democrats"> 
  <ul> 	
         <li>Jimmy Carter</li>
         <li>Bill Clinton</li>
         <li>Barack Obama</li>
         <li>Joe Biden</li>
  </ul> 
</div>
<div id="republicans"> 
  <ul>
        <li>Ronald Reagan</li> 
	<li>George Bush</li>
 	<li>George W. Bush</li>
        <li>Donald Trump</li> 
  </ul> 
</div> 

Fichier CSS

#democrats { background:blue; }
#republicans { background:red; }