Cours de (X)HTML / CSS

Les éléments <div> et <span>

Ces éléments sont de type générique, c'est-à-dire sans information structurante prédéfinie. Leur utilité réside essentiellement dans les attributs id, class ou style et dans l'association avec des feuilles de style CSS ou du Javascript.

<div>

Elément générique de type bloc.
Peut contenir tous les autres éléments de type bloc ou en ligne. A la différence des autres éléments de type bloc, un élément <div> ne provoque pas de saut de ligne à sa suite mais simplement un retour à la ligne.

Exemple :

<div id="entete_univ">
	<h1>Université Paris VII</h1>
	<ul>
		<li>Licence</li>
		<li>Master</li>
		<li>Doctorat</li>
	</ul>
</div>
<p>
	L'Université Paris Diderot - Paris 7 est la première université pluridisciplinaire de France. 
</p>

Propriétés CSS associées :

<style type="text/css">
#entete_univ{
	color:green;
	font-weight:bold;
}
</style>

Rendu à l'affichage :

Université Paris VII

  • Licence
  • Master
  • Doctorat

L'Université Paris Diderot - Paris 7 est la première université pluridisciplinaire de France.

Haut de page

<span>

Elément générique de type en ligne.
Peut contenir tous les autres éléments en ligne.

Exemple :

<p>
	Il ne faut pas oublier : <span class="important">Il est important de lire la notice</span class="important">. 
</p>

Propriétés CSS associées :

<style type="text/css">
.important{
	color:red;
	font-style:italic;
}
</style>

Rendu à l'affichage :

Il ne faut pas oublier : Il est important de lire la notice.

Haut de page