Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Les balises universelles div et span

Les balises universelles div et span

Dans ce chapitre vous allez pouvoir ajouter à votre inventaire deux autres balises XHTML Ces deux dernières ont un aspect très différent des autres que vous avez apprises dans les chapitres précédents.

Qu'est ce que les balises génériques ?

Les balises universelles div et span sont des balises génériques, qui peuvent être envisagées lorsque toutes les autres balises ne sont pas souhaitables. Les tags universels sont très utiles dans la mesure où on veut appliquer des styles à des parties du document qui ne sont pas entourées par des balises.

Supposons qu'on veut appliquer un style CSS à un mot (dans un paragraphe) qui n'est pas encadré par une balise, peut être parce qu'aucun tag ne peut être envisagé : il ne s'agit pas d'un lien(a), ni d'un élément important (em, strong), ni abréviation (abbr) etc. Dans cette situation, le mot qu'on veut styliser est hors portée, car il n'est pas encadré par une balise.

Pour remédier à ce problème. On a prévu les balises génériques, qui n'ont pas de sens et qui s'utilisent le plus souvent avec les sélecteurs des classes et id. Donc on pourra attribuer une balise universelle à ce mot, sans pour autant lui donner un sens, et puis l'élément en question sera désormais accessible à nos styles CSS.

Les balises universelles n'ont pas de sens ni en terme de fond ni en terme de forme :

Les balises universelles sont : <div> et <span>. Quelle est la différence entre ces deux tags ? Si vous vous souvenez, la balise div est de type bloc (élément block), alors que la balise span est de type en-ligne (inline). Ceci implique que l'élément span n'est valable qu'à l'intérieur d'un bloc : un paragraphe, une liste désordonnée etc. La balise div quant à elle peut contenir des sous-blocs ou des balises inline. Trêve de papotage, passons à la pratique.

La balise XHTML span

La balise span sert à découper les données en caractères (PCDATA) d'un élément bloc (p, h1 etc.) ou en-ligne (em, strong etc.). Par la suite vous pouvez appliquer un style aux données textuelles enveloppées par l'élément span.

J'ai le code xhtml suivant :

<p>Contrairement aux autres tags, les balises universelles n'ont pas de sens, 
mais elles permettent d'obtenir des effets très impressionnants avec les CSS.</p>.

Que faire pour que qu'une partie de ce petit paragraphe (mot, lettre, phrase, quelques lignes etc..) soit affichée en couleur rouge ? C'est simple, il suffit tout d'abord d'encadrer la cible par la balise span, ensuite lui affecter le style que vous avez crée par le biais d'une classe ou id, par exemple : .textRouge {colo: red;}. Ou directement par l'attribut style.

Appliquer un style CSS à un mot avec une classe

<p>Contrairement aux autres tags, les balises
<span class="textRouge">universelles</span>
 n'ont pas de sens,
 mais elles permettent d'obtenir des effets très impressionnants
 avec les CSS. </p>

Contrairement aux autres tags, les balises universelles n'ont pas de sens, mais elles permettent d'obtenir des effets très impressionnants avec les CSS.

Appliquer un style CSS à une lettre avec un id

<p><span id="textRouge">C</span>ontrairement
aux autres tags, les balises universelles n'ont pas de sens,
 mais elles permettent d'obtenir des effets très
 impressionnants avec les CSS.</p>

Contrairement aux autres tags, les balises universelles n'ont pas de sens, mais elles permettent d'obtenir des effets très impressionnants avec les CSS.

Appliquer un style CSS à une phrase avec l'attribut style

<p>Contrairement aux autres tags, <span style="color: red;">
les balises universelles n'ont pas de sens, mais elles permettent
 d'obtenir des effets très impressionnants avec les CSS.</span></p>

Contrairement aux autres tags, les balises universelles n'ont pas de sens, mais elles permettent d'obtenir des effets très impressionnants avec les CSS.

La balise XHTML div (division)

Comme son nom l'indique. La balise div sert à diviser la page Web en des blocs. Et puis ces derniers vont hériter des styles attribués à la balise div, puisqu'ils représentent des éléments enfants pour le div conteneur.

A la différence de la balise span, la balise div permet de contenir des sous-blocs et des balises en-ligne. Par exemple je peux insérer une citation, un paragraphe et une liste non ordonnée à l'intérieur de la balise div, qui a pour style une couleur verte. Ceci aura pour conséquence de transmettre les styles spécifiés à la balise div (en l'occurrence la couleur verte) à tous ces enfants.

Rien nous vous interdit à imbriquer un élément div dans un autre. Par exemple on peut créer un div qui va envelopper tout le contenu de la page. Et dans ce dernier on peut mettre d'autres div, un pour la bannière, un autre pour la barre de navigation, un autre pour le pied de page et ainsi de suite.

Exemple

<div style="color: green;"><p>Les deux langages
 qui permettent de créer des pages web sont :</p>
<ul><li>XHTML ;</li><li>CSS.</li></ul></div>

Les deux langages qui permettent de créer des pages web sont :

  • XHTML ;
  • CSS.

Faites attention ! La balise Div engendre un retour à la ligne avant et après, puisqu'elle fait partie des éléments de type bloc. Avant d'achever ce tuto je vous recommande vivement de maîtriser cette balise, car elle permet de remplir beaucoup de fonctions, notamment la création de l'ossature d'un site Web comme on vient de le voir.

Les balises génériques div et span et Le respect de la sémantique

Vous devez utiliser les balises universelles avec modération. Car elles peuvent représenter un danger potentiel pour la sémantique, Surtout en cas d'utilisation abusive et inappropriée. Donc ne les utilisez qu'en cas de besoin, lorsque les autres balises ne conviennent pas. Par exemple mettez :

<h1>bla bla</h1> au lieu de <div class="titre">bla bla</div>
<blockquote>bla bla</blockquote> au lieu de <div class="citation">bla bla</div>
<strong>bla bla</strong> au lieu de <span class="important">bla bla</span>

C'est vrai que vous pouvez solliciter le même effet visuel avec les balises universelles, mais le contenu de votre document sera dépourvu de tout sens. Donc faites le bon choix des balises si vous voulez mettre en évidence un mot ou une phrase servez-vous de la balise <strong>, si vous voulez introduire un titre principal, ne vous trompez pas de balise, utilisez le tag <h1> sans réfléchir et ainsi de suite.

Les moteurs de recherche tel que Google se basent sur le sens des balises pour référencer votre site, au cours de l'indexation. Google donnera plus d'importance aux titres principaux et aux mots introduits par <strong> et <em> ce qui n'est pas le cas avec les balises universelles.

Le prochain chapitre va nous ouvrir largement la porte sur les CSS, youpi La propriété CSS de formatage de texte font-family.

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau