Estructuración de Documentos con TEI, XML, XSLT y HTML5

Escrito el 27 de Junio de 2026 en español con un tamaño de 18,22 KB

Ejemplos de Marcado TEI (Text Encoding Initiative)

TEI: Diccionario

A continuación se presenta un ejemplo de codificación TEI para una entrada de diccionario:

<entry xml:id="quillotrar">
  <form type="lemma">
    <orth>quillotrar</orth>
  </form>
  <gramGrp>
    <gram type="pos">tr.</gram>
    <gram type="subc">prnl.</gram>
  </gramGrp>
  <sense n="1">
    <usg type="reg">coloq.</usg>
    <def>Enamorar o atraer el cariño de alguien.</def>
  </sense>
  <sense n="2">
    <usg type="reg">coloq.</usg>
    <def>Armar camorra, reñir.</def>
  </sense>
  <sense n="3">
    <usg type="reg">desus.</usg>
    <def>Hacer una cosa con otra de modo que cuadre o convenga.</def>
  </sense>
</entry>

TEI: Transcripción del Habla

Ejemplo de marcado TEI aplicado a la transcripción de diálogos y lenguaje hablado:

<TEI xmlns="http://www.tei-c.org/ns/1.0">
  <teiHeader>
    <fileDesc>
      <titleStmt>
        <title>Transcripción de prueba</title>
      </titleStmt>
      <publicationStmt>
        <p>Uso académico</p>
      </publicationStmt>
      <sourceDesc>
        <recordingStmt>
          <recording type="audio" dur="P15M" xml:id="rec-01">
            <date>14 Feb 2001</date>
          </recording>
        </recordingStmt>
      </sourceDesc>
    </fileDesc>
    <profileDesc>
      <particDesc>
        <listPerson>
          <person xml:id="p1">
            <name>Lana Winters</name>
          </person>
          <person xml:id="p2">
            <name>Tate Langdon</name>
          </person>
        </listPerson>
      </particDesc>
    </profileDesc>
  </teiHeader>
  <text>
    <body>
      <u xml:id="u01" who="#p1">Have you heard the</u>
      <u xml:id="u02" who="#p2">the election results? yes</u>
      <u who="#p1">
        <seg>Okay <pause/> U-m <pause/> the scene opens up</seg>
        <seg>with a tree okay?</seg>
      </u>
      <u who="#p1">
        <seg>Viene Lola y me dice</seg>
        <seg><shift feature="pitch" new="high"/>¿ya conoces a mi nuevo novio?</seg>
        <shift feature="pitch" new="normal"/>
        <seg>Sigue tan intensa como siempre.</seg>
      </u>
    </body>
  </text>
</TEI>

TEI: Análisis Sintáctico

Representación de la estructura sintáctica de una oración mediante etiquetas TEI:

<s>
  <phr type="SN" function="SUJ">
    <w lemma="el" pos="ART">El</w>
    <w lemma="caballero" pos="NOUN">caballero</w>
    <phr type="SP" function="CN">
      <w lemma="de" pos="PREP">de</w>
      <phr type="SN">
        <w lemma="el" pos="ART">la</w>
        <w lemma="montaña" pos="NOUN">montaña</w>
      </phr>
    </phr>
  </phr>
  <phr type="SV" function="PRED">
    <w lemma="asaltar" pos="VERB">asaltó</w>
    <phr type="SN" function="CD">
      <w lemma="el" pos="ART">el</w>
      <w type="noun">
        <m type="root">camp</m>
        <m type="suffix">amento</m>
      </w>
    </phr>
  </phr>
  <pc pos="PUN">.</pc>
</s>

TEI: Estructura de un Libro

Codificación completa de la estructura de un libro, incluyendo metadatos y capítulos:

<TEI>
  <teiHeader>
    <fileDesc>
      <titleStmt>
        <title>El título del documento de marcado</title>
        <author>Poe, Edgar Allan (1809-1849)</author>
        <funder>Wellcome Institute</funder>
        <principal>Dominik Wujastyk</principal>
        <respStmt>
          <resp>compiled by</resp>
          <name>James D. Benson</name>
        </respStmt>
      </titleStmt>
      <editionStmt>
        <edition n="P2">Second draft, substantially extended, revised, and corrected.</edition>
      </editionStmt>
      <extent>4.2 MiB</extent>
      <publicationStmt>
        <publisher>Anaya</publisher>
        <date>1994</date>
      </publicationStmt>
      <sourceDesc>
        <p>Born digital.</p>
      </sourceDesc>
    </fileDesc>
  </teiHeader>
  <text>
    <front>
    </front>
    <body>
      <div type="part" n="1">
        <div type="chapte" n="1">
          <head>Título del Capítulo 1</head>
          <dateline>SARAJEVO, April 19</dateline>
          <p>Párrafos de texto aquí...</p>
          <list rend="inline numbered">
            <item n="1">Primer elemento de la lista.</item>
            <item n="2">Segundo elemento de la lista.</item>
          </list>
        </div>
      </div>
    </body>
    <back>
    </back>
  </text>
</TEI>

Conceptos Fundamentales de XML

XML (Extensible Markup Language) es un lenguaje de marcado extensible que se utiliza para organizar, estructurar y almacenar información.

A diferencia de otros lenguajes, XML no tiene etiquetas fijas; tú mismo las creas según tus necesidades. Esto permite que los datos estén tan claros que puedan ser leídos y entendidos fácilmente tanto por personas como por ordenadores.

Diferencias y Conceptos Clave

1.- Diferencias entre un texto plano y un texto con formato o enriquecido: En los textos con formato, como es el caso de HTML, se puede modificar la fuente de las letras, añadir imágenes, colores y poner enlaces; es decir, se pueden personalizar. Sin embargo, los textos planos suelen ser más directos y no admiten ningún tipo de modificación, siendo archivos formados únicamente por texto sin ningún formato.
2.- Diferencias entre HTML y XML: El lenguaje HTML está diseñado para crear páginas web que puedan ser visualizadas en los navegadores. Por el contrario, el XML sirve para almacenar y estructurar datos, siendo mucho más específico y estricto, sin permitir ningún error en el código.
3.- ¿Qué son los metadatos?: Los metadatos son datos que proporcionan información adicional sobre el texto. Las etiquetas de un texto son metadatos. Un lenguaje de marcado define un dato y añade información sobre él mediante una etiqueta de apertura y otra de cierre.
5.- ¿Qué es una entidad HTML?: Las etiquetas de metadatos y las entidades son variables que representan conjuntos de caracteres y pueden tener atributos significativos para dicho sistema.

Atributo: Información extra que se introduce dentro de la propia etiqueta para asignarle una propiedad.

#PCDATA (Parsed Character Data): Se utiliza exclusivamente para definir el contenido de los elementos en la DTD (Document Type Definition). Significa "datos de caracteres analizados", lo que indica que el texto dentro de la etiqueta será leído y procesado por el procesador XML.

#CDATA (Character Data): Significa que el valor del atributo es una cadena de texto plano y que el procesador no necesita analizarlo en profundidad en busca de etiquetas de marcado.

Sintaxis y Atributos en DTD

Sin símbolo: Aparece exactamente 1 vez (obligatorio).
Signo más (+): Aparece 1 o más veces (mínimo una vez, pero pueden ser muchas).
Signo de interrogación (?): Aparece 0 o 1 vez (es opcional, máximo una).
Asterisco (*): Aparece 0 o más veces (es opcional y se puede repetir todas las veces que quieras).
La barra (|): Significa "o uno u otro" (una elección).

Ejemplo de declaración de atributos (ATTLIST):

<!ATTLIST nota
          id CDATA #REQUIRED
          color CDATA #IMPLIED>

Transformación de Documentos con XSLT

1. El Proceso de Transformación

El funcionamiento básico depende de la interacción de cuatro elementos principales:

XML Fuente: El archivo con los datos estructurados que quieres transformar.
Plantillas y Reglas (XSLT): El conjunto de instrucciones de transformación.
XPath: El lenguaje que permite la selección y navegación precisa por los nodos del XML.
Procesador XSLT: El motor que ejecuta el cambio para generar una salida (que puede ser HTML, otro XML, texto plano o PDF).

2. Estructura Básica (La Raíz)

Todo archivo XSLT debe comenzar con un prólogo XML y el elemento raíz que define el espacio de nombres:

Declaración: <?xml version="1.0" encoding="UTF-8"?>.
Elemento Raíz: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">.

3. "Chuleta" de Instrucciones Esenciales

Aquí tienes las definiciones de las etiquetas que más utilizarás:

Elemento	Función	Sintaxis / Ejemplo
`<xsl:template>`	Define una "plantilla" o regla que se dispara cuando coincide con un nodo específico.	`<xsl:template match="/nodo_raiz">`
`<xsl:value-of>`	Recupera y muestra el contenido de un nodo. Utiliza el atributo `select`.	`<xsl:value-of select="hijo"/>`
`<xsl:for-each>`	Crea un bucle para iterar sobre una lista de nodos repetitivos.	`<xsl:for-each select="item">`

Ruta Relativa

Es vital recordar que dentro de un template, la selección de datos debe hacerse de forma relativa al nodo en el que te encuentras.

Si el match es /partidas, el select debe ser partida/fecha.

4. Conexiones y Estilos Externos

Para que la transformación funcione en un navegador o aplicación, debes saber cómo conectar los archivos:

Conectar XML con XSL: En el archivo XML fuente, debes añadir esta línea en el prólogo: <?xml-stylesheet type="text/xsl" href="tu_archivo.xsl"?>.
Integrar CSS: Dentro de tu hoja XSLT, puedes incluir código HTML estándar. Por ejemplo, en el <head> del HTML generado, puedes enlazar un CSS externo para dar diseño: <link rel="stylesheet" href="estilo.css">.

5. Flujo Típico de un Archivo XSLT

Inicio: Declaración de stylesheet.
Plantilla Principal: Se suele hacer un match="/" para definir la estructura global del documento de salida (como las etiquetas <html> y <body>).
Procesamiento de Datos: Dentro del cuerpo, se usan xsl:for-each para recorrer listas o xsl:value-of para pintar datos específicos en tablas o párrafos.
Cierre: Se cierran las plantillas y la hoja de estilos.

El papel de XPath

Naturaleza: Es un lenguaje de expresiones que permite moverse por la estructura de árbol del XML para encontrar información específica.

El papel de XQuery

XQuery es un lenguaje mucho más robusto y complejo diseñado para realizar consultas avanzadas en bases de datos XML, de forma similar a como SQL funciona para bases de datos relacionales. En una transformación simple de XML a HTML, XPath suele ser suficiente y es el estándar utilizado dentro de las hojas de estilo XSLT.

Estética y Presentación (CSS)

Las fuentes destacan que la transformación XSLT se encarga de la estructura del documento de salida, pero no del diseño visual complejo. Para que tu HTML se vea bien, debes realizar una conexión CSS incluyendo una etiqueta <link rel="stylesheet" href="archivo.css"> dentro de la plantilla que genera la cabecera (<head>) del HTML.

Con esto tienes cubiertos todos los conceptos fundamentales que aparecen en las fuentes para realizar transformaciones de XML a HTML de manera profesional.

Fundamentos de HTML y CSS

El Lenguaje de Marcado de Hipertexto HTML (Hypertext Markup Language) es el lenguaje base para casi todo el contenido web. La mayor parte de los contenidos de internet que se ven en la pantalla del navegador están descritos, fundamentalmente, usando HTML. Más exactamente, podemos decir que HTML es el lenguaje que describe la estructura y el contenido semántico de un documento o página web.

HTML5 provee básicamente tres características: estructura, estilo y funcionalidad. Aunque nunca se haya declarado oficialmente, se considera de facto HTML5 como el producto de la combinación de HTML, CSS3 (Cascading Style Sheets) y JS (JavaScript). Estas tecnologías son altamente dependientes y actúan como una sola unidad organizada bajo la especificación de HTML5.

El atributo charset se utiliza para especificar la codificación usada en nuestra página. Únicamente puede existir una etiqueta <meta> con el atributo charset en la página. En él indicaremos si nuestra página está codificada en UTF-8, ISO o cualquier otro tipo de codificación. Este elemento debe estar dentro de los primeros 512 bytes de la página:

<meta charset="utf-8">

Otro de los atributos de la etiqueta <meta> es content, utilizado para asignar valores a los metadatos de la página.

Un cuarto atributo es name, que asigna un metadato a la página. Un metadato está expresado como un par nombre-valor; el atributo name es el encargado de especificar qué metadato queremos crear, y el atributo content proporciona su valor.

Las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6> están pensadas para marcar los títulos y subtítulos de los apartados de un documento. La hoja de estilo por omisión de los navegadores suele mostrar los títulos en tamaño cada vez más pequeño (incluso más pequeño que el tamaño de los párrafos <p>), en negrita y con márgenes mayores que los párrafos <p>.

La etiqueta <div> se emplea para definir bloques sin ningún tipo de significado, normalmente bloques que usaremos para maquetar correctamente la página o para agrupar elementos en principio sin querer dar un significado específico.

Conceptos Avanzados de HTML y CSS

La etiqueta <a> define un hipervínculo que se utiliza para saltar de una página a otra, o de una sección del documento a otra sección del mismo. El elemento puede aparecer rodeado por párrafos, listas, tablas, etc., incluso secciones enteras. El atributo más importante del elemento <a> es href, que indica el destino del hipervínculo. Por defecto, los hipervínculos se muestran así en los navegadores.

La etiqueta <br> representa una ruptura de línea y debe usarse únicamente cuando esa ruptura forma parte del contenido del texto (poemas, direcciones, etc., como en el ejemplo ilustrativo) y no para separar grupos temáticos en un párrafo.

La etiqueta <ul> define una lista no ordenada. Una lista no ordenada es un conjunto de elementos relacionados entre sí pero para los que no se indica un orden o secuencia determinados. La etiqueta <ul> encierra todos los elementos de la lista y la etiqueta <li> cada uno de sus elementos.

Curso	Horas	Horario
CSS	20	16:00 - 20:00
HTML	20	16:00 - 20:00
Dreamweaver	60	16:00 - 20:00

El atributo src especifica la dirección en la que el navegador debe buscar el archivo multimedia para su reproducción.

Hojas de estilo internas: Denominadas a veces hojas de estilo incrustadas, sirven para definir estilos solo para la página web actual y también para reemplazar los estilos que se definen en una CSS externa adjunta a la página web actual. Suelen incluirse entre las etiquetas <head></head> de las páginas web.

Hojas de estilo externas: Sirven para aplicar los mismos estilos de forma coherente en algunas o en todas las páginas de un sitio web. Al definir estilos en una o varias hojas de estilos externas y adjuntarlos a las páginas web, podemos garantizar que todo el sitio tendrá una apariencia coherente. Si se necesita cambiar un estilo, solo hay que hacer un cambio en la hoja de estilos externa y este se reflejará automáticamente en todas las páginas web que hagan referencia a dicho estilo.

Estilos en línea: Los estilos en línea sirven para aplicar las propiedades de las hojas de estilo a elementos individuales de una página sin tener que reutilizar el estilo.

Entradas relacionadas:

Etiquetas: