Mostrar XML en HTML

Naila Saad Siddiqui 20 junio 2023
  1. Introducción al lenguaje de marcado extensible (XML)
  2. Mostrar código XML en HTML
Mostrar XML en HTML

Este artículo presenta cómo mostrar el código XML tal como está en una página HTML.

Introducción al lenguaje de marcado extensible (XML)

Es un lenguaje de marcas como HTML pero no tiene etiquetas integradas. En cambio, las etiquetas son creadas por los usuarios de acuerdo con los requisitos de los usuarios.

Es una forma eficiente de almacenar los datos de manera estructural a los que luego se puede acceder rápidamente, buscar y compartir entre diferentes puntos finales.

Lo que es más importante, debido a que la sintaxis XML está estandarizada, incluso si comienza a compartir o transmitir XML a través de plataformas o sistemas, ya sea directamente o a través de la web, el destinatario aún podrá analizar los datos.

Diferencia con HTML

Es algo similar a HTML porque ambos se usan con etiquetas, pero la diferencia es que XML no tiene etiquetas predefinidas. En cambio, todas las etiquetas se fabrican de acuerdo con las necesidades y requisitos de los usuarios.

Estas etiquetas tienen un formato adecuado de datos para transferirse de una a otra. Además, HTML se enfoca en la apariencia de la página web y la mejora, mientras que XML es solo una pieza de información o datos que se envían a alguien.

Mostrar código XML en HTML

Dado que XML también funciona con etiquetas, es un desafío mostrar el código XML tal como está en una página HTML, ya que también manipulará etiquetas XML con la manipulación de etiquetas HTML.

Por lo tanto, si necesitamos mostrar el código XML en una página HTML, podemos encerrarlo en una etiqueta <xmp> o escribirlo en un <textarea>.

En ambos casos, las etiquetas XML no se manipularán mientras se representa la página HTML, pero se mostrará el código completo.

Use la etiqueta <xmp> para mostrar el código XML en la página HTML

Código de ejemplo:

<h1> Example to display XML code in HTML </h1>
<xmp>
    <?xml version="1.0" encoding="ISO-8859-1"?>
    <article>
        <data>
            <title>Test HTML page</title>
            <author>NSS</author>
            <country>Pakistan</country>
            <year>2022</year>
        </data>
    </article>
</xmp>

El código HTML anterior usa una etiqueta <xmp> y encierra nuestros datos XML en esta etiqueta. Los datos XML contienen algunos datos. Cada etiqueta de XML es el nombre de los datos retenidos en ella.

Ahora, el efecto de <xmp> será que este código XML se mostrará tal cual sin interpretación. Tenga en cuenta que también hemos usado etiquetas HTML en el código para marcar la diferencia entre los dos.

Pero el problema es que la etiqueta <xmp> ahora está obsoleta después de HTML 3.2. Por lo tanto, no es aconsejable usar esto directamente en las versiones actuales de HTML.

Use la etiqueta <textarea> para mostrar el código XML en la página HTML

Otra forma de mostrar el código XML es encerrándolo en un <área de texto>. El <textarea> también funciona así. Mostrará cualquier texto tal como está sin manipularlo.

Podemos especificar el número de filas y columnas para establecer el tamaño del <área de texto>. Mire el ejemplo a continuación donde usamos un <área de texto> para mostrar XML en la pantalla en un estilo preformateado.

Código de ejemplo:

<h1> Example to display XML code in HTML </h1>
<textarea cols="35" rows="20" style="border:none;">
    <?xml version="1.0" encoding="ISO-8859-1"?>
<article>
    <data>
        <title>Test HTML page</title>
        <author>NSS</author>
        <country>Pakistan</country>
        <year>2022</year>
    </data>
</article>
</textarea>

Hemos aplicado border: none para que oculte el cuadro textarea y no lo muestre. Veamos la salida de la misma.

Por lo tanto, podemos decir que podemos usar cualquiera de estos dos métodos si necesitamos mostrar cualquier código XML tal como está sin representar sus etiquetas en una página HTML.