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:

Ejercicio sobre creación de capas html mediante etiquetas div
- 100
Ejercicio sobre creación y estructuración de un documento web mediante capas html. Este ejercicio es preparatorio al salto a html5. Incluye solución y anotaciones de clase.
Como navegar por el árbol de una página web mediante enlaces html
- 146
Resumen con ejemplos de como acceder de forma relativa y con enlaces a los distintos archivos de un proyecto web dado un html referencia.
Formatos de imagen png, gif, jpg y svg. ¿Cuándo usarlos?
- 88
¿Que formato de imagen usar? Influye la velocidad de carga, las transparencias, animaciones y la seguridad. Resumo las ideas clave.
Espacios en blanco HTML. Practicando con caracteres especiales.
- 71
Ejercicio html de nivel básico para practicar con el espacio en blanco de HTML. Incluye solución.
Introducción al HTML
- 1039
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...
Qué es un favicon y para que sirve
- 208
¿Eres de los que se fija en todos los detalles de una página web cuando navega? Entonces el favicon es para ti. En esta entrada te explico que es y para que sirve.
Ejercicio html para practicar con etiquetas de texto más comunes
- 95
Ejercicio html nivel principiante para practicar el uso de las principales etiquetas html de texto. Incluye enunciado y solución.
Resumen de atributos html para ayudarnos a memorizar
- 369
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?
Como usar los encabezados h1 a h6 en html
- 434
Una duda frecuente cuando nos iniciamos en el mundo del html es saber cuando debemos usar un h1, un h2, un h3 o hasta un h4. En esta entrada miramos de dar un criterio lógico que pueda servir de ayuda...
Ejercicio html sobre url relativas y url absolutas
- 93
Ejercicio práctico html útil dónde se practica "../" y "nombrecarpeta/" para navegar con la etiqueta por los documentos de un proyecto web. Incluye solución
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.