Etiquetas xmp, pre y code en HTML

Etiquetas xmp, pre y code en HTML

Print Friendly, PDF & Email
Etiquetas xmp, pre y code en HTML
Valora esta entrada
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!

Entradas relacionadas:

Etiquetas audio y video de html5
- 65
Resumen de clase de las etiquetas audio y video html5. Apuntes html del certifiado de profesionalidad IFCD01110
Enlaces en html: la etiqueta a
- 191
La web sería muy distinta a como la conocemos hoy de no ser por Tim Berners-Lee y la invención en 1989 de la etiqueta enlace. El hipervínculo hizo posible incorporar a documentos estructurados y marca...
Mapas de imagen en html
- 329
Los mapas de imágenes son una funcionalidad HTML para las imágenes muy curiosa que permiten definir diferentes enlaces asociados a distintas zonas de una misma imagen. A pesar de haber caído en desuso...
Códigos HTML | Carácteres especiales (escapados)
- 27
¿Por qué se escapan los caracteres en html? ¿Que utilidad tiene complicarse con símbolos estraños? ¿Como los usamos? Apuntes de alumno HTML.
Etiquetas básicas introductoras al html5
- 762
Existen 2 formas de aprender el html. Uno es ir desde las etiquetas más antiguas y obsoletas hacia las más modernas del html5 o viceversa. Yo soy partidario de aprender html5 directamente y hacer borr...
Introducción al HTML
- 683
El HTML es un lenguaje de marcado que constituye uno de los pilares de la web. Es un idioma que se caracteriza por etiquetar el contenido de una página web. El HTML nos ayuda a conferir contenido y es...
Resumen de atributos html para ayudarnos a memorizar
- 252
En esta entrada hago un ejercicio mental repasando el conjunto de atributos típicos usados en HTML. ¿Cuantos dirías que salen? ¿20, 30, 40, más?
Resumen de como comentar código en html, css y javascript
- 450
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Listas ordenadas, no ordenadas y de definiciones en HTML y listas anidadas
- 665
Una lista html es una relación de datos agrupados y que tienen una temática en común. Las listas pueden ser ordenadas, no ordenadas y de definiciones. Veamos en este escrito como es su sintaxis, que a...
Anclas html
- 513
Anteriormente hemos visto que es un enlace y como se construye mediante una etiqueta y cuales son los atributos más importantes que lo acompañan. Hoy vamos a ver una de las utilidades más prácticas d...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

5 Comentarios
  • jose sanchez
    Publicado a las 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
    Publicado a las 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
      Publicado a las 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
    Publicado a las 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
      Publicado a las 09:39h, 23 febrero Responder

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

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.