Etiquetas xmp, pre y code en HTML

Etiquetas xmp, pre y code en HTML

3
(1)

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 html preformatear textos
Código HTML de etiquetas para preformatear tetos
Resultado de preformatear un documento web
El después. Así es como se ve en un navegador Chrome

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.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

5 Comments
  • jose sanchez
    Posted at 09:05h, 23 febrero Responder

    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 >

  • jose sanchez
    Posted at 09:09h, 23 febrero Responder

    ;))

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

    • Francesc Ricart
      Posted at 09:36h, 23 febrero Responder

      ¡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

  • jose sanchez
    Posted at 09:11h, 23 febrero Responder

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

    • Francesc Ricart
      Posted at 09:39h, 23 febrero Responder

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

Post A Comment