Introducción
Table of Contents
En este apartado vamos a introducir los lenguajes de marcas y veremos, al final del mismo, un ejemplo de uso y cómo funcionan. Será una primera aproximación que iremos completando y desarrollando a lo largo del tema.
Definición
Un lenguaje de marcas es una forma de codificar un documento en el que, a parte del texto o contenido en sí, se indican por medio de etiquetas o marcas información adicional a ese texto acerca de su estructura o presentación.
Para que lo entiendas, estos lenguajes de marcas, funcionan de manera similar a un dictado de texto donde una persona dicta lo que tiene que escribir a otro indicándole información adicional de dónde poner signos de puntuación, en qué momento empezar un nuevo párrafo, etc. Ejemplo de dictado:
Empezamos la carga, ponga la primera letra en mayúsculas, Estimados Alice y Bob, ponga dos puntos y empiece nuevo párrafo, Hoy empezamos a estudiar los, ponga las primeras letras de estas dos palabras en mayúsculas, Lenguajes de Marcas, ponga una coma, que es un módulo de, ponga el siguiente acrónimo en mayúsculas, DAM, escriba punto y final.
En el texto anterior verás cómo se mezclan las instrucciones con el contenido real. Para diferenciarlo con claridad, voy a aislar las instrucciones entre corchetes, dejando el texto final en negrita:
[Empezamos la carga], [ponga la primera letra en mayúsculas], Estimados Alice y Bob, [ponga dos puntos y empiece nuevo párrafo], Hoy empezamos a estudiar los, [ponga las primeras letras de estas dos palabras en mayúsculas], Lenguajes de Marcas, [ponga una coma], que es un módulo de, [ponga el siguiente acrónimo en mayúsculas], DAM, [escriba punto y final].
Si procesamos el documento y retiramos las marcas o instrucciones, el resultado final que vería el usuario sería este:
Estimados Alice y Bob:
Hoy empezamos a estudiar los Lenguajes de Marcas, que es un módulo de DAM.
Origen e historia
El nombre de "lenguajes de marcas" tiene como origen la práctica tradicional de marcar los manuscritos con instrucciones de impresión en los márgenes, indicando el tipo de letra, el estilo y el tamaño, así como la corrección de errores, para que otras personas compusieran la tipografía. Y, como ha pasado, en muchos otros casos, con la llegada de la informática se trasladó el concepto a esta disciplina para algo similar.
Sin entrar en detalles, cosa que haré más adelante, aquí te señalo los lenguajes de marcas más populares por orden cronológico, simplemente para que te vayan resultando familiares. Hay que decir que, aunque comienzo, cronológicamente, con TeX, hubo anteriormente a todos estos otros lenguajes de marcas como GML, del que deriva, el aquí recogido, SGML:
| Lenguaje de Marca | Año | Extensión | MIME | Descripción |
|---|---|---|---|---|
| TeX | 1978 | .tex |
application/x-tex |
Motor de alta precisión tipográfica muy usado en documentos técnicos informáticos. |
| SGML (Standard Generalized Markup Language) | 1986 | .sgml |
text/sgml |
Estándar internacional que sentó las bases metodológicas de los lenguajes de marcas modernos. |
| HTML (HyperText Markup Language) | 1993 | .html |
text/html |
Es una extensión de SGML estandarizado que se utiliza para escribir páginas web. |
| XML (eXtensible Markup Language) | 1998 | .xml |
text/xml |
Proviene de SGML y se trata de un metalenguaje que permite definir lenguajes de marcas utilizado para almacenar datos en forma legible. |
| SVG (Scalable Vector Graphics) | 2001 | .svg |
image/svg+xml |
Es un formato de gráficos vectoriales en formato XML. |
| JSON (JavaScript Object Notation) | 2001 | .json |
application/json |
Formato ligero de intercambio de datos. Aunque no usa etiquetas, es el estándar de facto actual por su sencillez y rapidez. |
| YAML (YAML Ain't Markup Language) | 2001 | .yml |
application/yaml |
Formato usado en proyectos de software para describir configuraciones. |
| Markdown | 2004 | .md |
text/markdown |
Lenguaje de marcas ligero pensado para redactar texto estructurado y convertirlo fácilmente a HTML. |
| EPUB (Electronic PUBlication) | 2007 | .epub |
application/epub+zip |
Estándar para la publicación de libros electrónicos basado en XML (consta de varios archivos empaquetas en un fichero ZIP). |
¿Es JSON un lenguaje de marcas?
Estrictamente hablando, JSON no utiliza etiquetas o marcas (como <tag>), sino pares clave-valor ("clave": "valor"). Sin embargo, lo estudiamos en este módulo porque cumple exactamente la misma función principal que XML: representar e intercambiar información estructurada de forma legible tanto para personas como para ordenadores. Hoy en día es el estándar de facto y ha desplazado a XML de la función para la que se usaba en muchos servicios y programas informáticos.
Primer acercamiento a los lenguajes de marcas
Vamos a usar el que, posiblemente, sea el lenguaje de marcas más conocido. Es tan conocido que, seguramente, gente profana en este área y que no se haya acercado jamás al mismo lo reconocerá: HTML.
Aquí puedes ver el texto plano de un documento HTML:
<!doctype html> <html> <head> <title>Lenguajes de Marcas</title> <meta charset="utf-8"> </head> <body> <h1>Lenguajes de marcas</h1> <h2>Introducción</h2> <p> Un <strong>lenguaje de marcas</strong> es una forma de <strong>codificar un documento</strong> en el que, a parte del texto o contenido en sí, se indican por medio de <strong>etiquetas o marcas información adicional</strong> a ese texto acerca de su estructura o presentación. </p> <small>Sitio web hecho por Román Martínez</small> </body> </html>
Es un simple texto plano solo que se han resaltado palabras especiales o palabras clave del lenguaje. Aunque ya lo estudiaremos, para poder seguir el ejemplo, en HTML las marcas vienen determinadas por palabras claves entre paréntesis angulares (esto es el carácter < y el carácter >). Estos ficheros son interpretados por los navegadores web que reconocen las marcas para dar estilo y forma al texto. Así se vería en un navegadore web:
Figure 1: Captura de pantalla con la visualización de la página web
En la siguiente imagen se acompaña la explicación de por qué cada parte del documento se visualiza como se visualiza:
Figure 2: Visualización de la página web con explicación
Ejemplos básicos de diferentes lenguajes de marcas
Para finalizar con esta introducción, te presento un ejemplo básico escrito con diferentes lenguajes de marcas, a modo de comparación:
| Ejemplo | HTML | LaTeX | Markdown |
|---|---|---|---|
| Título |
<h1>Título</h1> |
\section{Título} |
# Título |
| Lista |
<ul> <li>Punto 1</li> <li>Punto 2</li> <li>Punto 3</li> </ul> |
\begin{itemize} \item Punto 1 \item Punto 2 \item Punto 3 \end{itemize} |
- Punto 1 - Punto 2 - Punto 3 |
| Negrita |
<strong>Texto en negrita</strong> |
\bf{Texto en negrita} |
**Texto en negrita** |
| Negrita |
<strong>Texto en cursiva</strong> |
\it{Texto en cursiva} |
*Texto en cursiva* |