Curso 1 Unidad 1

2.1. ¿Qué es y para qué sirve HTML?

HTML (HyperText Markup Language) es el lenguaje de marcado estándar utilizado para definir la estructura y el contenido de una página web. No se trata de un lenguaje de programación con lógica de control (como bucles o funciones complejas), sino de un lenguaje descriptivo que utiliza etiquetas (tags) para organizar la información.

El navegador recibe estos archivos y, a través de estas etiquetas, determina cómo organizar el contenido: párrafos, imágenes, enlaces, tablas, formularios y otros elementos multimedia.

Anatomía de una etiqueta

La mayoría de los elementos en HTML siguen una estructura de apertura y cierre. El contenido se coloca entre ambas.

Ejemplo:

HTML

<p>Esto es un párrafo. Bienvenidos a esta página web.</p>

En este caso, la etiqueta <p> abre el elemento de párrafo y </p> lo cierra.

Regla de oro: Por cada etiqueta de apertura, debe existir una etiqueta de cierre correspondiente. Un código bien formado (donde todas las etiquetas están correctamente anidadas y cerradas) garantiza que el sitio web se visualice de manera consistente en todos los navegadores. Si un código está mal construido, el navegador puede intentar «adivinar» la intención del programador, lo que suele derivar en errores visuales o fallos de carga. Nuestro objetivo es siempre escribir código limpio y sin ambigüedades.

2.2. Breve Historia y Evolución

HTML fue presentado por Tim Berners-Lee en 1991, describiendo inicialmente 22 etiquetas. A lo largo de las décadas, el lenguaje ha evolucionado significativamente para adaptarse a las necesidades de una web cada vez más compleja y dinámica.

¿Por qué nos enfocamos en los fundamentos?

Aunque han existido numerosas versiones de HTML (HTML 4, XHTML, HTML5), en este curso no nos detendremos en tecnicismos de versiones específicas. Nuestra prioridad es el aprendizaje de los fundamentos.

• Adaptabilidad: Un desarrollador que domina la lógica de marcado y la estructura básica puede adaptarse a cualquier versión o nueva etiqueta sin esfuerzo.
• Comprensión vs. Memorización: Aprender de memoria etiquetas de una versión concreta es ineficiente debido a la rapidez con la que cambia la tecnología. Por el contrario, entender por qué y cómo estructuramos el contenido nos proporciona la base necesaria para evolucionar profesionalmente y resolver problemas complejos en el desarrollo web.

2.3. ¿Es HTML un Lenguaje de Programación?

Es fundamental aclarar este punto desde el inicio: HTML no es un lenguaje de programación.

A menudo, de forma coloquial, se agrupa todo bajo el término «programación», pero existe una diferencia técnica crucial. HTML es un lenguaje de marcado (Markup Language). Su única función es definir y estructurar la información; no posee la capacidad de ejecutar lógica ni realizar cálculos.

Diferencia Conceptual: Marcado vs. Lógica

Para que un lenguaje sea considerado de «programación», debe tener capacidad para tomar decisiones y gestionar flujos de control. HTML carece de estas facultades:

• HTML (Estructura): Sirve para decir «esto es un título», «esto es un párrafo», o «esto es una tabla». Es estático.
• Lenguajes de Programación (Lógica): Lenguajes como JavaScript, Python o Java permiten crear algoritmos. Estos sí pueden evaluar condiciones, realizar cálculos matemáticos, interactuar con bases de datos o repetir procesos.

Ejemplo Práctico: El límite del marcado

Imagina que necesitas escribir los números del 1 al 10 en la pantalla.

• En HTML: Tendrías que escribir manualmente cada número dentro de etiquetas:

HTML

<p>1</p>

<p>2</p>

• En un Lenguaje de Programación: Utilizarías un bucle (un proceso repetitivo) que automatiza la tarea con apenas un par de líneas de código:

Java

// Ejemplo lógico en Java

for (int i = 1; i <= 10; i++) {

    System.out.println(i);

}

Como puedes observar, HTML no dispone de sentencias de control como los bucles (for, while) o las estructuras de decisión (if, else). Por lo tanto, HTML se limita a la presentación, mientras que la lógica la reservamos para otros lenguajes complementarios que aprenderás más adelante.

2.4. Comparativa: Ejecución Lógica vs. Estructura Estática

Para consolidar la diferencia, comparemos cómo ambos lenguajes manejan una tarea sencilla: listar números del 1 al 10.

Ejemplo de ejecución

En Java (Lógica):

Java

public class MuestraDelUnoAlDiez {

    public static void main (String[] args) {

        // El bucle «for» procesa y genera la salida automáticamente

        for(int i=1; i <= 10; i++) {

            System.out.println(i);

        }

    }

}

Salida: El programa genera dinámicamente los números del 1 al 10.

En HTML (Estructura):

HTML

<p>1</p>

<p>2</p>

<p>3</p>

<p>4</p>

<p>5</p>

<p>6</p>

<p>7</p>

<p>8</p>

<p>9</p>

<p>10</p>

Salida: El navegador muestra el contenido estático escrito previamente en el código.

Conclusión didáctica:

Como puedes observar, en el ejemplo de HTML no hay «instrucciones» que realicen el conteo; simplemente estamos colocando el resultado final en el archivo. Si quisiéramos cambiar el rango de números (por ejemplo, del 1 al 100), en Java bastaría cambiar un número en el código, mientras que en HTML tendríamos que escribir manualmente cada uno de los 100 párrafos. Esta es la diferencia fundamental que todo estudiante debe comprender antes de avanzar a lenguajes como JavaScript.

2.5. Resumen: Marcado vs. Programación

Para cerrar este concepto, debemos entender que la ausencia de capacidades lógicas en HTML no es una carencia, sino una especialización. HTML está diseñado exclusivamente para la estructura, no para la ejecución de procesos.

Los tres pilares de la programación

Todo lenguaje de programación clásico (como Java, C++, Python o C#) debe ser capaz de gestionar los siguientes flujos de ejecución, capacidades de las que HTML carece:

1. Secuencia: La ejecución lineal de instrucciones una tras otra.
2. Condicional: La capacidad de tomar decisiones (si ocurre A, haz esto; si ocurre B, haz aquello).
3. Repetición (Bucles): La capacidad de automatizar procesos repetitivos bajo condiciones específicas.

Conclusión Didáctica

HTML no es «peor» que un lenguaje de programación; simplemente tiene una naturaleza distinta.

• HTML: Es el «esqueleto» del edificio. Define dónde van las puertas, las ventanas y las paredes.
• Lenguajes de Programación: Son la «instalación eléctrica y domótica» del edificio. Hacen que las puertas se abran solas, que las luces se enciendan al detectar movimiento o que la temperatura se regule automáticamente.

En resumen: HTML es un lenguaje de maquetación y marcado destinado a la arquitectura de documentos web. La inteligencia y la interactividad avanzada las delegamos a lenguajes de programación, los cuales aprenderemos a integrar con nuestro HTML más adelante.

2.6. Evolución y Versiones de HTML

El desarrollo de HTML ha sido una historia de estandarización. Para que la web fuera universal, fue necesario que organizaciones como el W3C (World Wide Web Consortium) y, más recientemente, el WHATWG, definieran reglas claras que todos los navegadores debían seguir.

La línea de tiempo del estándar

• HTML 2.0 (1995): El primer estándar oficial. Tenía una estructura muy simplificada y, curiosamente, no soportaba tablas.
• HTML 3.2 (1997): La primera recomendación del W3C. Introdujo elementos visuales avanzados para la época, como applets de Java y el flujo de texto alrededor de imágenes.
• HTML 4.01 (1999): Durante años, el estándar de oro. Introdujo variantes (Strict, Transitional, Frameset) que servían para controlar qué etiquetas estaban permitidas, facilitando la transición entre diseños antiguos y nuevos.
• HTML5 (La era actual): Lanzado oficialmente por el W3C en 2014, marcó un antes y un después.

¿Por qué HTML5 cambió las reglas del juego?

Antes de HTML5, los desarrolladores debían lidiar con los Doctypes (las etiquetas que definían si el código era Strict o Transitional). HTML5 eliminó toda esa complejidad al introducir una única variante universal.

Novedades clave de HTML5:

1. Multimedia Nativa: Introducción de las etiquetas <audio> y <video>, eliminando la dependencia de plugins externos (como Flash, que ya ha desaparecido).
2. Semántica: Se añadieron etiquetas que describen el significado del contenido (como <header>, <footer>, <article>, <nav>), permitiendo que los buscadores entiendan mejor la estructura de nuestro sitio.
3. Compatibilidad: Aunque existen versiones como HTML 5.1 o 5.2, hoy hablamos simplemente de HTML5 como un estándar «vivo», que se actualiza continuamente sin necesidad de saltos de versión drásticos como ocurría en el siglo pasado.

Nota sobre las variantes antiguas (4.01)

Es posible que en proyectos antiguos encuentres archivos que comienzan con una línea de código larga y compleja llamada DOCTYPE. Estas variantes (Strict, Transitional, Frameset) indicaban al navegador qué tan «estricto» debía ser al interpretar el código.

Enfoque actual: En tus proyectos, utilizaremos siempre la declaración simplificada de HTML5, la cual es compatible con todos los navegadores modernos y facilita una estructura limpia y eficiente.

2.7. ¿Qué versión de HTML elegir?

Como regla de oro para el desarrollo web actual: siempre utilizaremos HTML5.

Antiguamente, la elección de una versión era un dilema importante debido a las diferencias entre navegadores y a la existencia de variantes (Strict, Transitional, Frameset). Hoy en día, esas variantes han quedado obsoletas. HTML5 es el estándar universal, robusto y compatible con todos los navegadores modernos (Chrome, Firefox, Edge, Safari).

El «Doctype» o Declaración de Tipo de Documento

Para que un navegador entienda que estamos utilizando HTML5, debemos incluir una declaración al principio de nuestro archivo. Esta no es una etiqueta convencional (no se cierra), sino una instrucción para el navegador.

La declaración que usarás siempre en tus proyectos:

HTML

<!DOCTYPE html>

¿Por qué HTML5 y no versiones anteriores?

• Simplicidad: Se acabó la necesidad de elegir entre variantes complejas. Un solo DOCTYPE es suficiente.
• Compatibilidad: HTML5 fue diseñado para ser compatible con versiones anteriores (backward compatibility). Esto significa que el código bien escrito en versiones previas funcionará sin problemas en HTML5.
• Semántica: HTML5 introdujo etiquetas que dan significado al contenido (como <header>, <main>, <article>, <section>, <footer>), lo cual es vital para el posicionamiento en buscadores (SEO) y la accesibilidad.

Nuestra estrategia de aprendizaje

En este módulo, nos enfocaremos exclusivamente en HTML5. Aprenderemos a escribir código limpio y estructurado. Si en el futuro te encuentras con archivos antiguos (que usan HTML 4.01 o XHTML), no te preocupes: al dominar la lógica y los fundamentos de HTML5, serás perfectamente capaz de leer, mantener y actualizar cualquier código antiguo sin necesidad de haber estudiado sus normas específicas de forma aislada.

Consejo: No malgastes tiempo aprendiendo la sintaxis de HTML 4.01 Transitional o Strict de memoria. Conocer que existen y por qué se usaban es suficiente para tu carrera profesional. Centra tu energía en dominar la estructura semántica de HTML5.

EJEMPLO QUE USA HTML 5

Esto es una prueba de web creada con HTML 5

Vista en el navegador Mozilla Firefox que obtendríamos para el documento HTML anterior. EJEMPLO QUE USA HTML 4.01

Esto es una prueba de página HTML 4.01 Transitional

Vista en el navegador Google Chrome que obtendríamos para el documento HTML anterior.

CREACIÓN Y VISUALIZACIÓN DE DOCUMENTOS HTML

Con este sencillo ejemplo creamos una página HTML. Para visualizar esta simple página web procedemos de la siguiente manera: creamos un archivo con el editor de texto que tengamos a nuestra disposición, en nuestro caso utilizaremos el bloc de notas de Windows pero puede ser cualquier editor de texto.

Para abrirlo nos vamos a Inicio -> Todos los programas -> Accesorios -> Bloc de notas:

Escribimos en el bloc de notas el código del ejemplo anterior como un simple texto.

A continuación, en el menú Archivo elegimos la opción Guardar como… e indicamos que queremos guardar el archivo en el directorio raíz de la unidad C con el nombre ejemplo.html

Una vez realizado todos estos pasos, abrimos el archivo creado haciendo doble click sobre él desde el explorador de archivos de Windows. Si tenemos un navegador web instalado se nos abrirá automáticamente la página web que hemos creado en el ejemplo.

Repetimos una cosa importante. No te preocupes por las versiones ahora, todo lo que aprendas sobre HTML, te servirá para cualquier versión porque nos vamos a centrar en conocer y comprender los conceptos más que los detalles de las versiones.

También es normal que no comprendas bien el significado de todos los términos en el archivo HTML que hemos puesto como ejemplo, pues los iremos explicando poco a poco. De momento, nuestro objetivo es irnos familiarizando con los distintos aspectos que iremos estudiando.