Balises de contenu

Balises de contenu : texte

Ces balises agissent sur le texte. Attention : ces balises indiquent la structure des données et non la présentation qu'on souhaite leur donner.

Il est important d'utiliser les bonnes balises au bons endroits pour des raisons d'accessibilité et de sémantique.

Principales balises pour organiser du contenu texte :

Code But Spécificités Exemple de code Rendu dans ce site
<blockquote>
</blockquote>		 Paragraphe de citation Bloc
L'attribut facultatif "cite" permet d'indiquer l'URL source
Ne peut contenir que des élements de type bloc		 <blockquote cite="www.google.fr"> <p>La presse écrite et audiovisuelle perturbée par la grève</p></blockquote>

La presse écrite et audiovisuelle perturbée par la grève
<br /> Permet un saut de ligne Ne contient aucune donnée.
Doit se refermer !
Ne pas abuser de cette balise : l'évite souvent au profit d'un balisage plus sémantique.		 texte 1 <br /> texte2 texte 1
texte2
<div>
</div>		 Element de type bloc commun : permet de séparer les grandes parties d'une page. Bloc
Attention de ne pas abuser des div : on peut souvent les éviter pour un même rendu : ne pas oublier qu'il existe d'autres balises de type bloc.		 <div>Contenu de la div</div>
Contenu de la div
<h1></h1>
...
<h6></h6>		 Tîtres de niveau 1 à 6
Niveau 1 : tître de page
Nniveau 6 : sous sous ... sous tître		 Type bloc
Un tître est un paragraphe propre, l'espacement au texte est réglé en CSS et non avec <br /> ni < p></p>		 <h1>Grand titre</h1><h2>Sous titre</h2>

Grand titre

Sous titre
<p>
</p>		 Entoure un paragraphe. Bloc
L'espacement est réglable en CSS, nul besoin d'utiliser des balises br.		 <p>contenu du paragraphe</p>

contenu du paragraphe
<pre>
</pre>		 Texte préformaté
Restitue les espacements, les tabulations comme sous un editeur texte		 Bloc
Utile pour représenter du code sans insérer de balises pour les retours chariots..		 Le code source de la page contient les bonnes indentations non représentables sans balise <pre>
<pre>function exemple($param){ if ($param==3) { return true; } else { return false; }</pre> 
function exemple($param){
    if ($param==3) {
        return true;
    } else {
        return false;
    }
<span>
</span>		 Element en ligne commun
Identifie plusieurs zones de texte		 En ligne
Comme l'élement div, à utiliser avec parcimonie : on peut souvent s'en passer 		texte <span>Contenu du span</span> texte texte contenu du span texte

Marquage logique du texte

Ces balises permettent d'identifier le type du texte contenu, avant d'utiliser une balise span, regardez s'il n'y a pas de balise correspondant à vos besoins dans cette liste !
De même, oubliez les balises b et i...

Attention : ces balises doivent être contenues dans des balises bloc pour que le code soit valide.

Code But Spécificités Exemple de code Rendu sur ce site
<abbr>
</abbr>		 Pour une abbréviation En ligne
Utilisez l'attribut title pour faire apparaître une infobulle		 <abbr title="Société Nationale des Chemins de Fer">S.N.C.F.</abbr> SNCF
<acronym>
</acronym>		 Acronyme (pour résumer : abbréviation prononçable) En ligne
Utilisez l'attribut title pour faire apparaître une infobulle		 <acronym title="Light Amplification by Stimulated Emission of Radiation">Laser</acronym> LASER
<address>
</address>		 Pour mettre en valeur des adresses internet Bloc
Ne peut contenir aucun bloc		 <address>Site de l'auteur : http://webghusse.free.fr</address>
Site de l'auteur : http://webghusse.free.fr
<cite>
</cite>		 Référence de type bibliographique
Citation d'un écrit		 En ligne
Proche de la balise q		 <cite>Les sanglots longs</cite> Les sanglots longs
<code>
</code>		 Indique que le contenu est du code source En ligne <code>function essai($param){return 0;}</code> function essai($param){return 0;}
<dfn>
</dfn>		 Marque une définition En ligne
Ajout directement dans le body invalide en XHTML 1.1		 <p>L'alouette : <dfn>oiseau particulièrement gentil</dfn></p>

L'alouette : oiseau particulièrement gentil
<em>
</em>		 Accentuation d'une portion de texte
De l'anglais emphasis		 En ligne
Remplacez vos <i> par <em>		 <em>Texte accentué</em> Texte accentué
<kbd>
</kbd>		 Marque une saisie clavier En ligne J'ai saisi ceci : <kbd>su</kbd> J'ai saisi ceci : su
<q>
</q>		 Référence à une parole En ligne
Proche de la balise cite		 Il m'a dit : <q>Ouahhhh</q> sans guillements Il m'a dit : Ouahhhh sans guillements
<samp>
</samp>		 Marque un exemple en ligne <samp>Exemple : 1 +1 = 2</samp> Exemple : 1 +1 = 2
<strong>
</strong>		 Accentuation de texte En ligne
Remplacez vos <b> par <strong>		 il est important de <strong>bien remplir le formulaire !</strong> il est important de bien remplir le formulaire !
<var>
</var>		 Marque une variable En ligne On trie le tableau <var>$tab</var> On trie le tableau $tab