sencillas - ¿Por qué HTML5 recomienda poner el elemento de código dentro de pre?

pagina html

Question

La documentación de HTML5 recomienda colocar el elemento de code dentro del elemento pre , pero no entiendo cómo es mejor o más semántico que solo usar el elemento de código y CSS. En su propio ejemplo:

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

También podría escribirse (Hacer algunas suposiciones sobre los valores predeterminados del navegador para pre ):

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

Incluso si el pre está ahí para distinguir un bloque de código de una cadena de código en línea, no veo que sea una opción más semántica que especificar el bloqueo del code en una clase.

¿Hay alguna razón específica por la que el pre sea ​​recomendado sobre una solución de CSS?

Answer 1

CSS es para la presentación

El espacio en blanco es significativo (no presentacional) en muchos lenguajes de programación.

Answer 2

Para representar un bloque de código de computadora, el elemento pre se puede usar con un elemento de código;

Para representar un bloque de salida de computadora, el elemento pre se puede usar con un elemento de muestra.

<pre><code> para código de bloque que no debe envolver. Use <code> para el código en línea que puede envolver.

Los saltos de línea y los espacios en blanco en el texto incluido dentro de las etiquetas <pre> se mantienen como en el documento html cuando se muestran en el navegador. Los floretes normalmente procesan el texto <pre> en una fuente de tono fijo, con whitespace en whitespace .

Answer 3

<code> representa solo un "fragmento de código de computadora" . Originalmente fue pensado para simples fragmentos de código como i++ o <code> .

<pre> "representa un bloque de texto preformateado, en el cual la estructura está representada por convenciones tipográficas en lugar de por elementos" . Su propósito original no era más que exactamente esto: proporcionar un texto de la misma manera que lo dio el autor, por ejemplo

+----------------------------------+ | | | WARNING! PREFORMATED TEXT AHEAD! | =o= | __; ~^ +----------------TT------------° || _____________ _____________________ || | TO GRANDMA > | TOTALLY NOT A TRAP > oÖo || |°°°°°°°°°°°° °°°°°°°°°°°°°°°°°°°°° | ö || | | .mm, ~"""~"""~"""~"""~"""~"""~~"""~"""~"""~"""~"""~"""~"""~"""~"""~""..MWMWc...~"""~""

No necesita usar cada uno con el otro. <pre> tiene sus propios roles, como <code> tiene sus propios roles. Sin embargo, <pre> es una forma de señalar que el espacio en blanco en el fragmento dado es importante, un rol que falta en <code> .

Sin embargo, de vuelta a su pregunta: tenga en cuenta la redacción exacta :

El siguiente ejemplo muestra cómo se puede marcar un bloque de código usando los elementos pre y de code .

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

Una clase se usa en ese ejemplo para indicar el idioma utilizado.

Dice que podría , no debería . Eres libre de hacer esto como quieras. No es recomendado por el W3C de ninguna manera, sin embargo, personalmente te recomiendo que uses <pre><code>...

Explicación adicional

Siempre que el espacio en blanco sea parte de su código y la estructura de su código, debe indicar que se debe mantener esta estructura. Como la estructura en el código viene dada por convenciones tipográficas (pestañas, avances de línea, espacios), personalmente recomiendo usar <pre><code> , incluso si es posiblemente más código y otro nodo en el DOM. Pero cuando falta el espacio en blanco hará que tu código sea imperfecto, es necesario.

Aparte de eso, puedes diferenciar fácilmente entre código en línea y bloques de código sin verificar element.className , y algunos resaltadores de sintaxis JS funcionan bastante bien con <pre><code>... y tiras el <code> automáticamente.

Además, si usa una regla general para <code> con white-space:pre; , no puede usarlo para fragmentos en línea sin clases adicionales. Si fuera a crear una clase en su lugar, no ha ganado nada en comparación con <pre><code> .

Referencias

• W3C: HTML5: 4.5.12 El elemento de código (Recomendación W3C 28 de octubre de 2014)

  El elemento de code represents un fragmento de código de computadora. Este podría ser un nombre de elemento XML, un nombre de archivo, un programa de computadora o cualquier otra cadena que una computadora reconocería.

• W3C: HTML5: 4.4.3 El elemento pre (W3C Recomendación 28 de octubre de 2014)

  El pre elemento represents un bloque de texto preformateado, en el que la estructura está representada por convenciones tipográficas en lugar de por elementos.

Answer 4

<pre> muestra saltos de línea!

Esto le impide utilizar la función php como nl2br () o agregar manualmente <br /> en cada extremo de la línea.

Saludos, Fantasma