Personnalisation balise pre

:D . Bon désolé a tous pour commencer mon sujet par cette question qui peut sembler tout bete .

Puis qu'elle servent tout les deux a afficher du code ,pour quelle utilisation balise pre plus et que la balise code et inversement et qu'elles sont leurs différences ?

Auriez vous des exemple d'utilisation pour plus de concret SVP ?

En essayant de styler un balise "pre" je me suis rendu compte que l'interlignage du cade affiché a l'intérieur était plus espacé qu'au naturel , pourquoi ? et comment remédier a ça ?

merci a tous et bonne soirée a tous

Salut,

L'élément code est plus approprié pour afficher un fragment de code au fil du texte.

<p>Un paragraphe est structuré, en HTML, par l'élément <code>p</code>.</p>

L'élément pre est plus approprié pour afficher des blocs entiers de code (en gros, plusieurs lignes), plus précisément du texte préformaté, d'après la spécification HTML.

Enfin, sache que l'élément pre a des styles par défaut, plus ou moins variables selon les navigateurs, à commencer par l'utilisation d'une police à chasse fixe (en règle générale les polices Courier New et Courier, Courier étant une police Mac), la non-fusion des espaces (deux espaces consécutives seront affichées telles quelles) et la prise en compte de tous les retours à la ligne, de tous les retours chariot et de toutes les tabulations que l'on peut trouver dans le texte contenu dans cet élément. Quant à la hauteur de ligne, peut-être as-tu sauté des lignes.

Comment éviter cette déformation de la balise pre et faire en sorte a ce qu'elle soit supporté de la meme façon sur tout les navigateurs.

Merci pour toutes tes infos

Hello,

Il me semble aussi que pour la balise code il faut remplacer les symboles > par leur équivalent en code html alors qu'avec la balise pre ce n'est pas utile.

Bonjour,

pfoofen a écrit :
Il me semble aussi que pour la balise code il faut remplacer les symboles > par leur équivalent en code html alors qu'avec la balise pre ce n'est pas utile.

Pas de différence de ce type entre ces deux éléments. Il n'est pas nécessaire d'échapper ">" dans le contenu textuel des éléments (X)HTML de façon générale, sauf dans la chaîne "]]>". Pour simplifier, disons qu'il vaut mieux toujours échapper ">" en ">" (sauf dans les éléments script et style).
Modifié par Julien Royer (21 Apr 2010 - 10:48)

worms30 a écrit :
Puis qu'elle servent tout les deux a afficher du code

PRE ne sert pas à afficher du code, mais à indiquer que le contenu nécessite un rendu de type «préformatté» (espaces et retours à la ligne conservés).

Si tu veux afficher du code au sein d'un paragraphe, tu utilises CODE.
Si tu veux afficher un bloc préformatté de code, tu utilises CODE dans un élément PRE.

<p>La déclaration CSS <code>color: red;</code>.</p>
<pre><code>p {
  color: red;
}</code></pre>

worms30 a écrit :
En essayant de styler un balise "pre" je me suis rendu compte que l'interlignage du cade affiché a l'intérieur était plus espacé qu'au naturel

Sans doute parce que tu n'as pas défini d'interlignage sur body ou sur l'élément parent qui contient ton PRE, et donc l'interlignage va dépendre des propriétés de la fonte utilisée. Or, je suppose que tu n'utilises pas la même fonte pour le texte courant et pour ton PRE.
Solution: déclarer ton line-height explicitement. De préférence en utilisant un ratio comme valeur (ex: line-height: 150%; ou line-height: 1.5;).
Modifié par Florent V. (21 Apr 2010 - 11:03)

Florent V. a écrit :

PRE ne sert pas à afficher du code, mais à indiquer que le contenu nécessite un rendu de type «préformatté» (espaces et retours à la ligne conservés).

Si tu veux afficher du code au sein d'un paragraphe, tu utilises CODE.
Si tu veux afficher un bloc préformatté de code, tu utilises CODE dans un élément PRE.

Sinon on peut pas utiliser uniquement code et jouer sur la propriété : white-space ?

pfoofen a écrit :
Sinon on peut pas utiliser uniquement code et jouer sur la propriété : white-space ?

C'est techniquement possible:

code {
  display: block;
  margin: 1em 0;
  white-space: pre-wrap;
}

Mais ça serait idiot. Pourquoi se priver de la possibilité d'utiliser <code> dans le flux d'un paragraphe, et donc en limiter l'usage aux blocs de code?
Ou alors il faut utiliser <code> en inline et <code class="block"> pour des blocs de code. Par contre ça veut dire que sans les CSS ton bloc de code perd son rendu préformaté, qui peut être important pour le comprendre voire indispensable dans certains cas (exemple: un script Python, langage pour lequel retours à la ligne et indentation font partie de la syntaxe...).
Modifié par Florent V. (21 Apr 2010 - 15:35)