»boîtes bloc VS. boîtes en ligne
Chaque élément HTML présent sur votre page engendre une boîte, matérialisable en affichant ses bords. Ces boites peuvent être mitoyennes ou imbriquées les unes dans les autres.
Le propos ici est de comprendre quel rendu on obtient pour quel boite et comment modifier ce rendu.
Il y a deux grands groupes de balises pour l'affichage
- les balises de type bloc qui réservent un bloc de la largeur disponible ou spécifiée dans la page, par exemple:
un flux de texte <p>coupé par un paragraphe</p> donne ce rélusltat
un flux de texte
coupé par un paragraphe
donne ce rélusltat
- les balises de type inline (en-ligne) qui sinsrcivent dans le flux du texte, par exemple :
un texte avec<em>une partie en gras</em> donne ce résultat
un texte avec une partie en gras donne ce résultat
Les balises a, img, em, strong, span, sont de type inline.
Une boite bloc peut contenir d'autres boites bloc et/ou des boites en ligne.
Une boite en ligne ne peut contenir que des boites en ligne :
<span>un texte<p>un paragraphe</p> re un text</span>
Est incorrect en XHTML
display
La propriété display est une propriété fondamentale car elle permmet de spécifier quelle règle appliquer à l'élément défini par le sélecteur.
Par exemple une liste de la forme:
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
'affichera par défaut de la manière suivante:
- item1
- item2
- item3
En modifiant la propréiété CSS display de la manière suivante:
<style>
.enLigne{
list-style-type: none;
display: inline;
}
</style>
<ul>
<li class="enLigne">item1</li>
<li class="enLigne">item2</li>
<li class="enLigne">item3</li>
</ul>
nous obtiendrons l'affichage suivant:
- item1
- item2
- item3
Pour en finir avec l'attribut display, il est intéressant de noter qu'il peut prendre pour valeur none. La balise ayant une propriété à none, ne s'affiche pas sur la page et aucun espace ne lui est réservé. Il y a un intérêt à cela: concilier optimisation pour le référencement et affichage pour l'utilisateur final.
Admettons que vous vouliez afficher le titre de votre site sur une image de fond, cela se ferait de la manière suivante:
<style>
h1 {
background: url(bg.jpg) no-repeat;
}
</style>
<h1>Mon titre</h1>
Et on aurait le rendu suivant dans le navigateur:
Mon Titre
Maintenant imaginons que vous vouliez afficher ce même titre avec une police plus exotique. Vous devez savoir que les internautes visionnent votre page avec les polices présentes sur leur ordinateur. Donc vous pourriez tenter de faire appel à la règle CSS font-family: policeExotique; , mais vous n'avez aucune garantie que les internautes possèdent cette police sur leur machine (c'est pourquoi la plupart des sites sont écrits en arial ou verdana, c'est parce que ces polices sont universelles). Partant de ce principe, Vous pouvez générer une image contenant votre titre dans l'image, avec The Gimp :-D ou photoshop :-/ et l'intégrer comme suit:
<img src="bg-title.jpg" />
Ce qui donnerait à l'affichage dans le navigateur:
Graphiquement parlant vous avez atteint votre objectif, tous les internautes verront votre titre dans la bonne police. OUI MAIS à l'endroit où réside une information cruciale pour le référencement (Mon Titre pourrait être le nom d'une entreprise par exemple), Google verra une simple image et ne saura pas lui donner de sens ... Au mieux vous pouvez remplir les attributs alt et title, afin d'associer une description à cette image, mais google y prêtera moins d'attention que s'il avait lu <h1>Mon Titre</h1>. La Manière de faire la plus élégante est alors la suivante:
<style>
#head{
background: url(bg-title.jpg) no-repeat;
}
h1 {
diplay: none;
}
</style>
<div id="head">
<h1>Mon titre</h1>
</div>
Qui donnera le rendu suivant dans le navigateur:
Voilà comment pour un même rendu graphique, il est possible de créer une page sémantiquement riche pour google en jouant avec la propriété display!
