22 Feb Etiquetas xmp, pre y code en HTML
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
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
Según se puede observar las 3 etiquetas ofrecen resultados similares….
¡Cuando y como utilizarlas depende de vosotros!
jose sanchez
Posted at 09:05h, 23 febreroGracias 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;))
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¡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 febreroY 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¡Muy buena! ¡No me había dado cuenta! 🙂 lo he indicado en el html con las etiquetas <del><ins>