1. El Esqueleto de la Web

HTML (HyperText Markup Language) no es un lenguaje de programación (no tiene lógica, ni matemáticas). Es un lenguaje de marcado.

Su trabajo es decir qué son las cosas.
Imagina que escribes un documento en Word y lo guardas como texto plano. Pierde las negritas, los títulos, todo. HTML son las etiquetas que le dicen al navegador: "Esto es un título importante", "Esto es un párrafo", "Esto es una imagen".

Sin HTML, la web sería una sopa de letras gigante.

2. Etiquetas y Atributos

El HTML se escribe con etiquetas: <etiqueta>Contenido</etiqueta>. Algunas, como <img>, se cierran solas. Los atributos (como src o class) le dan superpoderes a las etiquetas.

Evaluación 1: Sintaxis

¿Cuál es la forma correcta de cerrar una etiqueta de título h1?

<h1>
</h1>
<end h1>

3. La Estructura Base

Todo archivo HTML válido debe tener esta estructura. Es el pasaporte para que el navegador lo tome en serio: 

<!DOCTYPE html> 
<html lang="es">
  <head>
    
    <meta charset="UTF-8">
    <title>Mi Página</title>
  </head>
  <body>
    
    <h1>Hola Mundo</h1>
  </body>
</html>

4. Semántica: Significado sobre Forma

Este es el concepto más importante y el que diferencia a un novato de un pro.

Podrías construir toda tu web usando solo <div> (cajas genéricas). Visualmente se vería igual mediante CSS. Pero estaría mal.

La Semántica es usar la etiqueta correcta para cada cosa:

  • <header>: Encabezado.
  • <nav>: Navegación.
  • <article>: Contenido independiente (como un post de blog).
  • <footer>: Pie de página.
Esto ayuda a Google a entender tu sitio (SEO) y a las personas ciegas que usan lectores de pantalla (Accesibilidad).

5. Títulos y Jerarquía

Los títulos van del <h1> (El más importante) al <h6>.

Regla de Oro: Solo debe haber UN <h1> por página. Es como el título de un libro. Tener dos confunde a Google.
No uses los títulos para cambiar el tamaño de la letra (eso se hace con CSS). Úsalos para estructurar tu documento como un índice.

Evaluación 2: SEO

¿Por qué usamos etiquetas semánticas como <nav> en lugar de <div>?

Porque se ven más bonitas en el código.
Mejoran la accesibilidad y el posicionamiento en buscadores (SEO).
Hacen que la página cargue más rápido.

6. Imágenes y Rutas

Una imagen vale más que mil etiquetas. 

<img src="gato.jpg" alt="Foto de un gato lindo">
El atributo src (source) dice dónde está la imagen.
El atributo alt (alternativo) es OBLIGATORIO. Si la imagen se rompe o el usuario es ciego, este texto es lo único que tienen. Describe la imagen, no digas "imagen.jpg".

7. Enlaces: La "W" de la Web

La "Web" es una telaraña. Los enlaces (Links) son los hilos que la unen. 

<a href="https://google.com" target="_blank">Ir a Google</a>
href (HyperText Reference) es el destino.
target="_blank" abre el enlace en una pestaña nueva, útil para enlaces externos para que el usuario no abandone tu sitio.

8. Listas

Al humano le encantan las listas.

No ordenadas (balas): <ul> (Unordered List). Para listas de compras, menús. 

<ul>
  <li>Café</li>
  <li>Té</li>
</ul>
Ordenadas (números): <ol> (Ordered List). Para instrucciones, rankings. 
<ol>
  <li>Paso 1</li>
  <li>Paso 2</li>
</ol>

9. Formularios: Interactuando

Hasta ahora, la web es un monólogo (nosotros hablamos, ellos leen). Los formularios permiten el diálogo. 

<form>
  <label for="email">Tu Correo:</label>
  <input type="email" id="email" placeholder="nombre@mail.com" required>
  <button type="submit">Enviar</button>
</form>
El <input> es la pieza de lego más versátil: puede ser texto, casillas, radio buttons, fechas, colores...

Evaluación 3: Interacción

¿Qué atributo hace que un campo de formulario sea obligatorio?

important
required
mandatory

10. Inline vs Block

Entender esto es vital para CSS después.

Block (Bloque): Son egoístas. Ocupan todo el ancho posible y empiezan en línea nueva (ej: <div>, <p>, <h1>).
Inline (En línea): Son humildes. Solo ocupan lo necesario y se quedan al lado de sus vecinos (ej: <span>, <a>, <img>).

11. El Head y Los Metadatos

Lo que hay dentro de <head> es invisible para el usuario pero vital para la máquina.
Aquí vinculas tu CSS (la ropa), tus fuentes de Google, y le dices a Twitter/Facebook qué imagen mostrar cuando alguien comparte tu link (Open Graph).

¡HTML Dominado!

Has creado la estructura. Pero seamos honestos: se ve horrible. Texto negro sobre fondo blanco, Times New Roman... muy 1995.

Para darle vida, color y belleza, necesitamos el maquillaje y la ropa. Necesitamos CSS.