2. HTML y XML#
En esta parte del curso se introducen HTML y CSS como las tecnologías base para la construcción de interfaces web. Antes de hablar de estilos, animaciones o frameworks, es fundamental comprender que la Web se apoya en documentos estructurados, cuya organización permite que tanto las personas como los programas puedan interpretar su contenido.
2.1. Introducción#
La estructura de un documento no es un detalle visual, sino un mecanismo para dar significado a la información. Al igual que en un periódico o un libro, encabezados, secciones y párrafos permiten entender qué información es más importante, cómo se relaciona y en qué orden debe leerse. En la Web, esta estructura se expresa mediante lenguajes de marcas, siendo HTML el estándar principal.
Desde el punto de vista de los datos, las aplicaciones web trabajan con distintos niveles de estructuración. Los datos estructurados, típicos de bases de datos relacionales, siguen esquemas rígidos y son fáciles de procesar con lenguajes como SQL. Los datos semi estructurados, como JSON o XML, ofrecen mayor flexibilidad y son ampliamente utilizados en la comunicación entre aplicaciones web. Por otro lado, los datos no estructurados (como texto libre, imágenes o video) requieren tratamiento adicional para ser procesados por programas. HTML se ubica en un punto intermedio: es semi estructurado, lo que permite que sea legible tanto para humanos como para máquinas.
HTML permite describir la estructura lógica de un documento web mediante elementos y etiquetas. Estos elementos indican el propósito del contenido, no su apariencia visual. Encabezados, párrafos, listas, enlaces, imágenes y formularios permiten organizar la información de manera semántica, facilitando la accesibilidad, el posicionamiento en buscadores y la reutilización del contenido en distintos contextos.
2.2. Estructura global de un documento Web#
El siguiente ejemplo muestra una estructura típica de un documento HTML5, incluyendo encabezado, navegación, contenido principal, secciones y pie de página. También incluye un formulario sencillo para ilustrar la interacción con el usuario.
1<!doctype html>
2<html lang="es">
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1" />
6 <title>Mi primera página</title>
7
8 <!-- Hoja de estilos externa -->
9 <link rel="stylesheet" href="styles.css" />
10 </head>
11
12 <body>
13 <header>
14 <h1>Programación Web</h1>
15 <p>Ejemplo básico de estructura HTML5.</p>
16 </header>
17
18 <nav aria-label="Navegación principal">
19 <ul>
20 <li><a href="#introduccion">Introducción</a></li>
21 <li><a href="#contenidos">Contenidos</a></li>
22 <li><a href="#contacto">Contacto</a></li>
23 </ul>
24 </nav>
25
26 <main>
27 <section id="introduccion">
28 <h2>Introducción</h2>
29 <p>
30 HTML describe la <strong>estructura</strong> del documento. CSS se
31 utiliza para la <em>presentación</em>.
32 </p>
33
34 <figure>
35 <img src="img/web.png" alt="Icono representando la Web" width="280" />
36 <figcaption>Ejemplo de imagen con texto descriptivo.</figcaption>
37 </figure>
38 </section>
39
40 <section id="contenidos">
41 <h2>Contenidos</h2>
42 <article>
43 <h3>Elementos comunes</h3>
44 <ol>
45 <li>Encabezados (h1..h6)</li>
46 <li>Párrafos (p)</li>
47 <li>Enlaces (a)</li>
48 <li>Listas (ul/ol)</li>
49 </ol>
50
51 <p>
52 Un enlace a un sitio externo:
53 <a href="https://developer.mozilla.org/" target="_blank" rel="noopener">
54 MDN Web Docs
55 </a>
56 </p>
57 </article>
58 </section>
59
60 <section id="contacto">
61 <h2>Formulario de contacto</h2>
62
63 <form action="/contacto" method="post">
64 <label for="nombre">Nombre</label>
65 <input id="nombre" name="nombre" type="text" required />
66
67 <label for="correo">Correo</label>
68 <input id="correo" name="correo" type="email" required />
69
70 <label for="mensaje">Mensaje</label>
71 <textarea id="mensaje" name="mensaje" rows="4"></textarea>
72
73 <button type="submit">Enviar</button>
74 </form>
75 </section>
76 </main>
77
78 <footer>
79 <small>© 2026 Programación Web</small>
80 </footer>
81 </body>
82</html>
Los formularios representan uno de los mecanismos más importantes de
interacción en la Web. A través de ellos, el navegador puede recolectar
información del usuario y enviarla al servidor utilizando métodos HTTP como
GET o POST. Comprender la estructura y los atributos de los formularios
permite entender cómo fluye la información entre el cliente y el servidor, y
por qué HTML y HTTP están estrechamente relacionados.
2.3. Lenguajes de presentación en documentos Web (CSS, Tailwind CSS)#
Una vez definida la estructura del documento, CSS se encarga de su
presentación. CSS permite controlar la apariencia visual y la distribución de los
elementos sin modificar la estructura HTML. Conceptos como el flujo normal del
documento, la propiedad display y los distintos modelos de layout permiten
entender cómo el navegador decide colocar los elementos en pantalla.
Herramientas modernas de CSS, como Flexbox, facilitan la construcción de interfaces flexibles y adaptables, permitiendo alinear, distribuir y reorganizar elementos de forma dinámica según el tamaño de la pantalla. A esto se suman las media queries, que hacen posible el diseño responsivo y la adaptación del contenido a distintos dispositivos y contextos de visualización.
El objetivo de esta unidad no es memorizar etiquetas o propiedades, sino comprender la separación de responsabilidades entre estructura (HTML) y presentación (CSS). Esta distinción es clave para construir interfaces mantenibles, accesibles y preparadas para integrarse posteriormente con lógica del lado del cliente y del servidor.