Los lenguajes de marcado o de marcas son utilizados para estructurar y organizar la información en la web y otros entornos digitales. Los lenguajes de marcado suelen confundirse con lenguajes de programación. Sin embargo, no son lo mismo, ya que el lenguaje de marcado no tiene funciones aritméticas o variables, como tienen los lenguajes de programación. Ejemplos de lenguajes de marcado son HTML (HyperText Markup Language), XML (eXtensible Markup Language) y Markdown.
Es importante distinguir entre los lenguajes de programación, como Python, Java y C#, y los lenguajes de marcado como HTML, XML y Markdown. Mientras que los lenguajes de programación se utilizan para desarrollar aplicaciones y software, permitiendo la creación de algoritmos, manejo de datos y control de la lógica de un programa, los lenguajes de marcado se centran en la estructuración y presentación de información. Los lenguajes de marcado utilizan etiquetas y marcadores para definir cómo debe organizarse y formatearse un documento.
A continuación estudiaremos detalladamente qué es un lenguaje de marcas con algunos ejemplos.
1. ¿Qué es un Lenguaje de marcado o de marcas?
Un lenguaje de marcado es un sistema de codificación que utiliza etiquetas y marcadores para definir la estructura y el formato de un documento. En lugar de utilizar un lenguaje natural como el inglés o el español, los lenguajes de marcas utilizan instrucciones específicas para que las computadoras puedan entender y representar la información de manera coherente.
Un sistema de codificación se refiere a un conjunto de reglas y convenciones que se utilizan para representar datos, caracteres, números y otros elementos en una forma que pueda ser interpretada y procesada por una computadora. Un sistema de codificación define cómo se asigna cada símbolo o carácter a una secuencia de bits (ceros y unos).
1.1. Mapa de los lenguajes de marcas
A continuación se muestra una relación de algunos de los principales lenguajes de marcas ordenados por su campo de aplicación:
Documentos en general:
- HTML (HyperText Markup Language): Utilizado para crear páginas web y estructurar su contenido.
- Markdown: Empleado para escribir documentos de texto plano con formato ligero, como READMEs en GitHub.
- LaTeX: Utilizado en la producción de documentos científicos y técnicos de alta calidad tipográfica.
Tecnologías de Internet:
- XML (eXtensible Markup Language): Usado para el intercambio de datos estructurados entre diferentes sistemas.
- RSS (Rich Site Summary o Really Simple Syndication): Utilizado para la distribución de contenido web actualizado de manera uniforme.
- XAML (eXtensible Application Markup Language): Es un lenguaje de marcado utilizado principalmente en el desarrollo de aplicaciones de software, especialmente aplicaciones de Windows y aplicaciones web basadas en Silverlight.
Lenguajes especializados:
- SVG (Scalable Vector Graphics): Empleado para la representación de gráficos vectoriales escalables en la web.
- MathML (Mathematical Markup Language): Utilizado para representar expresiones matemáticas de manera estructurada en documentos web.
- CALS (Continuous Acquisition and Life-cycle Support): Utilizado en la industria para la estandarización de formatos de documentos técnicos y manuales.
Para información más detallada de los lenguajes de marcado consulta este mapa de lenguajes de marcado de Wikipedia.
1.2. Características de los lenguajes de marcas
Los lenguajes de marcado utilizan archivos de texto plano, lo que permite que sean editados fácilmente con cualquier editor de texto y sean independientes de la plataforma o sistema operativo. Esto evita las restricciones de los archivos binarios, que requieren programas específicos para su edición.
Las instrucciones de marcado se mezclan con el contenido en un único archivo. Veamos algunos ejemplos de HTML, XML y Markdown:
- HTML:
<h1>Título de la página</h1> <p>Este es un párrafo de ejemplo.</p>
- Markdown:
# Título de la página Este es un párrafo de ejemplo.
- XML:
<documento>
<titulo>Título de la página</titulo>
<contenido>Este es un párrafo de ejemplo.</contenido>
</documento>
Los ejemplos anteriores muestran cómo diferentes lenguajes de marcado se utilizan para estructurar y formatear información de manera distintiva. En HTML, la etiqueta <h1> se emplea para definir el título principal de una página web, mientras que en Markdown, el símbolo # seguido de texto cumple la misma función de manera más simplificada y accesible en texto plano.
Por otro lado, XML ofrece una flexibilidad mayor al permitir la definición de etiquetas personalizadas como <titulo> y <contenido>, las cuales pueden adaptarse específicamente a las necesidades de organización de datos en un documento. Esta diferencia refleja cómo cada lenguaje de marcado está diseñado para facilitar la representación y estructuración de información. Veamos más detalles y ejemplos para cada lenguaje de marcado.
2. Ejercicios propuestos
2.1. Mi primera página web HTML mediante un editor de texto simple
Para empezar, vamos a crear nuestra primera página web mediante un editor de texto simple:
- Crea un archivo de texto: Abre cualquier editor de texto simple como Bloc de notas en Windows o TextEdit en macOS.
- Escribe el código HTML: Copia y pega el siguiente código en tu editor de texto:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo HTML</title>
</head>
<body>
<h1>Título del artículo</h1>
<p>Este es un párrafo de ejemplo que describe la sintaxis básica de Markdown.</p>
<h2>Listado de elementos Markdown:</h2>
<ul>
<li>Encabezados</li>
<li>Párrafos</li>
<li>Listas</li>
</ul>
</body>
</html>
- Guarda el archivo: Guarda este código con la extensión
.html. Por ejemplo, puedes nombrarlo comoejemplo.html. Ojo, el tipo de documento no puede ser txt, en el caso de Windows selecciona como tipo de documento «todos los archivos» y no te olvides de incluir la extensión .html junto al nombre del archivo. - Abre el archivo en el navegador: Luego de guardar el archivo HTML, simplemente busca el archivo en tu explorador de archivos y haz doble clic en él. El navegador web predeterminado abrirá automáticamente el archivo HTML, mostrando la página web que has creado.
Lo que se muestra en el navegador:
Al abrir el archivo ejemplo.html en tu navegador, verás una página web que contiene un título principal (<h1>), un párrafo de texto (<p>), un subtítulo (<h2>) y una lista (<ul>).
A lo largo del curso trabajaremos con diferentes etiquetas y elementos HTML modificando este código según nuestras necesidades mediante un editor de texto como Visual Studio Code.