Etiquetas xmp, pre y code en HTML

3
(1)

Publicado

El primer día de curso de cualquier formación siempre comparto con mis alumnos que estoy abierto a cualquier consulta y que muchas veces yo también aprendo. Hoy a sido uno de esos días en los que he aprendido una etiqueta nueva de HTML que desconocía por completo. Gracias J.S, ¡va por ti!

Esta entrada trata sobre las etiquetas que sirven para preformatear un texto en lenguaje de marcas.

Etiquetas para preformatear textos

Preformatear un texto significa indicar a los navegadores que deben leer literalmente un fragmento de código respetando los saltos de línea y los espacios.

Las etiquetas a considerar son <xmp>, <pre> y <code>

Etiqueta <xmp>

La etiqueta <xmp> indica a los navegadores que deben respetar los saltos de línea y los espacios en blanco de un documento html y entiende el uso de los carácteres especiales sin que sea necesario escaparlos.

Escapar un carácter significa escribirlo en codificación ASCII.

Sería una etiqueta fantástica de no ser porqué en 1997 se declaró deprecated con la llegada de HTML3.2! Según la información oficial de Mozilla debemos evitar su uso y algunos navegadores empiezan a no soportarla.

Etiqueta <pre>

La etiqueta <xmp><pre> indica a los navegadores que deben respetar los saltos de línea y los espacios en blanco de un documento pero no respeta los caracteres especiales.

También formatea el texto en una tipografía tipo monoespace.

En contra de lo que tenía entendido hasta la fecha de redacción de este escrito sigue siendo válida en HTML5. ¡Esto es lo que pasa cuando alguna vez consultas fuentes no oficiales!

Etiqueta <code>

La etiqueta <code> hace lo mismo que la etiqueta <pre> pero añade un matiz semántico. Indica a los navegadores que el fragmento de código preformateado indica precisamente un código.

Si está en el stándard HTML5 es porqué seguramente tiene algun uso importante pero a mi se me escapa. ¡Si alguien tiene más información y lo comparte en los comentarios le estaré muy agradecido!

Ejemplo visual

Veamos las etiquetas en acción
Etiquetas xmp, pre y code en HTML 1

Etiquetas xmp, pre y code en HTML 2
Según se puede observar las 3 etiquetas ofrecen resultados similares….

¡Cuando y como utilizarlas depende de vosotros!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 3 / 5. Votos: 1

Todavía no hay votos. Sé el primero en valorar la entrada.

  1. Avatar de jose sanchez

    Gracias por la referencia.

    Como bien dices va muy bien para dar formato a texto ya que respeta tabulaciones y saltos de línea sin indicarlo por código, por ejemplo copy/paste de varios párrafos de un editor de texto…con corrector ;). Sobre <code> , es lo que indicas
    <xmp>Pero , para mi es genial para copiar varias líneas de texto de código y pegarlas tal cual, de forma que el navegador la interpreta como texto plano (respetando también tabulaciones y saltos de línea). Además, se le pueden aplicar estilos css. Como indicas, es seguro que esta obsoleta, pero, en chrome, por el momento funciona muy bien.</xmp>

    nota: comentario editado según lo que me indicas en el comentario posterior. He usado la etiqueta <code> y he tenido que escapar los símbolos < y >

  2. Avatar de jose sanchez

    ;))

    en el comentario anterior, se han interpretado las etiquetas, formateando el texto, y además no aparecen….. respectivamente ‘pre’, ‘code’ y ‘xmp’

    1. Avatar de Francesc Ricart

      ¡ostras! la verdad es que estas tres 3 etiquetas y wordpress no se llevan muy bien. como ejemplo he tenido que escribir tres veces la entrada porqué cada vez que le daba al botón de publicar me borraba el código a partir de la etiqueta xmp

  3. Avatar de jose sanchez

    Y como este texto no se publica hasta que lo moderes…. cuando hablas de ‘pre’ la cambias por ‘xmp’

    1. Avatar de Francesc Ricart

      ¡Muy buena! ¡No me había dado cuenta! 🙂 lo he indicado en el html con las etiquetas <del><ins>

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *