web-dev-qa-db-fra.com

Pourquoi HTML5 recommande-t-il de mettre l'élément de code dans pre?

La documentation HTML5 recommande mettre l'élément code à l'intérieur de l'élément pre, mais je ne comprends pas en quoi c'est mieux ou plus sémantique que d'utiliser simplement l'élément de code et CSS. Dans leur propre exemple:

<pre><code class="language-Pascal">var i: Integer;
begin
   i := 1;
end.</code></pre>

Pourrait également être écrit (Faire quelques hypothèses sur les valeurs par défaut du navigateur pour pre):

<style>
code {
    display: block;
    white-space: pre;
}
</style>
…
<code class="language-Pascal">var i: Integer;
begin
   i := 1;
end.</code>

Même si le pre est là pour distinguer un bloc de code d'une chaîne de code en ligne, je ne vois pas que ce soit un plus choix sémantique que de spécifier le bloc-ness du code dans une classe.

Y a-t-il une raison spécifique pour laquelle le pre est recommandé par rapport à une solution CSS?

htmlcsscode-formatting
63
kojiro

<code> ne représente qu'un "fragment de code informatique". Il a été initialement pensé pour des extraits de code simples comme i++ ou <code>.

<pre> "représente un bloc de texte préformaté, dans lequel la structure est représentée par des conventions typographiques plutôt que par des éléments". Son but d'origine n'était rien de plus que cela: fournir un texte de la même manière que celui donné par l'auteur, par ex.

+ ---------------------------------- + 
 | | 
 | ATTENTION! TEXTE PRÉFORMÉ À L'AVANCE! | = o = 
 | __; ~ ^ 
 + ---------------- TT ------------ ° 
 || _____________ _____________________ 
 || | À GRANDMA> | TOTALEMENT PAS UN PIÈGE> 
 OÖo || | °°°°°°°°°°°° °°°°°°°°°°°°°°°°°°°°° 
 | ö || | | .mm, 
 ~ "" "~" "" ~ "" "~" "" ~ "" "~" "" ~~ "" "~" "" ~ "" "~" "" ~ "" "~" "" ~ "" "~" "" ~ "" "~" ".. MWMWc ... ~" "" ~ ""

Vous n'avez pas besoin de les utiliser les uns avec les autres. <pre> a ses propres rôles, comme <code> a son propre. Toutefois, <pre> est un moyen de signaler que l'espace blanc dans le fragment donné est important, un rôle que <code> est manquant.

Mais revenons à votre question: notez la formulation exacte:

L'exemple suivant montre comment un bloc de code pourrait être balisé à l'aide des éléments pre et code.

<pre><code class="language-Pascal">var i: Integer;
begin
   i := 1;
end.</code></pre>

Une classe est utilisée dans cet exemple pour indiquer la langue utilisée.

Il dit pourrait, pas devrait. Vous êtes libre de faire cela comme vous le souhaitez. Ce n'est pas recommandé par le W3C, cependant, je vous recommande personnellement d'utiliser <pre><code>....

Plus d'explications

Chaque fois que des espaces blancs font partie de votre code et de la structure de votre code, vous devez indiquer que cette structure doit être conservée. La structure du code étant donnée par des conventions typographiques (tabulations, sauts de ligne, espaces), je personnellement vous recommande d'utiliser <pre><code>, même si c'est sans doute plus de code et un autre nœud dans le DOM. Mais chaque fois qu'un espace blanc manquant rendra votre code imparfait, c'est nécessaire.

En dehors de cela, vous pouvez facilement faire la différence entre le code en ligne et les blocs de code sans vérifier element.className, et certains surligneurs de syntaxe JS fonctionnent plutôt bien avec <pre><code>... et enlevez le <code> automatiquement.

De plus, si vous utilisez une règle générale pour <code> avec white-space:pre;, vous ne pouvez pas l'utiliser pour des extraits en ligne sans classes supplémentaires. Si vous deviez créer une classe à la place, vous n'avez rien gagné par rapport à <pre><code>.

Les références

  • W3C: HTML5: 4.5.12 L'élément de code (Recommandation W3C du 28 octobre 2014)

    L'élément codereprésente un fragment de code informatique. Il peut s'agir d'un nom d'élément XML, d'un nom de fichier, d'un programme informatique ou de toute autre chaîne qu'un ordinateur reconnaîtrait.

  • W3C: HTML5: 4.4.3 L'élément pré (Recommandation W3C du 28 octobre 2014)

    L'élément prereprésente un bloc de texte préformaté, dans lequel la structure est représentée par des conventions typographiques plutôt que par des éléments.

70
Zeta

CSS est pour la présentation.

L'espace blanc est important (pas de présentation) dans de nombreux langages de programmation.

11
Quentin

Pour représenter un bloc de code informatique, l'élément pré peut être utilisé avec un élément de code;

Pour représenter un bloc de sortie d'ordinateur, l'élément pré peut être utilisé avec un élément samp.

<pre><code> pour le code de bloc qui ne doit pas être encapsulé. Utilisation <code> pour le code en ligne qui peut encapsuler.

Sauts de ligne et espaces blancs dans le texte inclus entre <pre> les balises sont conservées telles quelles dans le document html lorsqu'elles s'affichent dans le navigateur. Les navigateurs rendent normalement <pre> texte dans une police à hauteur fixe, avec whitespace.

4
Prashobh

<pre> montre les sauts de ligne!

Cela vous empêche d'utiliser la fonction php telle que nl2br () ou d'ajouter manuellement <br /> à chaque fin de ligne.

Cordialement, Fantôme

0
Ghost