03. ¿Qué es HTML?

Curso HTML5 desde cero — Freimel Jerez

✅ Definición (lo que viste en el video)

HTML significa HyperText Markup Language: Lenguaje de Marcas de Hipertexto. Es el lenguaje principal para crear la estructura de una página web.

🔤 ¿Qué significa HyperText Markup Language?

En tus fotos aparece así (HTM + L):

HyperText = Hipertexto (enlaces que conectan páginas)
Markup = Marcado (etiquetas que describen el contenido)
Language = Lenguaje (reglas para escribir documentos)

🏷️ ¿Qué es “Lenguaje de Marcas”?

“Marcas” significa etiquetas. Las etiquetas le dicen al navegador qué es cada cosa: si es un título, un párrafo, una imagen, un enlace, etc.

<h1>Este es un título</h1>
<p>Hola, esto es un párrafo</p>

🔗 ¿Qué es “Hipertexto”?

Es texto con enlaces que te llevan a otra página o sección. Ejemplo (lo más típico de internet):

<a href="https://freimeljerezwebapps.com">Ir a mi web</a>

🧱 Ejemplo súper básico (igual al de tus fotos)

En tu imagen se veía un ejemplo así:

<html>
  <p>Hola, esto es un Párrafo</p>
</html>

Nota: En la vida real siempre usamos la estructura completa con <!DOCTYPE html>, <head> y <body>. Ya la verás abajo.

🖼️ HTML también puede mostrar multimedia (igual a tus fotos)

HTML no solo es texto, también soporta etiquetas como: <img>, <audio>, <video>.

<img src="foto.jpg" alt="Descripción de la imagen">

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<video controls width="420">
  <source src="video.mp4" type="video/mp4">
</video>

🧱 Estructura real básica de un documento HTML

Esto es lo mínimo recomendado para una página web:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mi primera web</title>
  </head>
  <body>
    <h1>Hola Mundo</h1>
    <p>Esta es mi primera página web</p>
  </body>
</html>

🏗️ Semántica HTML5 (la parte grande de tus fotos)

En tus capturas salían los bloques: <header>, <nav>, <section>, <article>, <aside>, <footer>. Eso se llama HTML semántico.

<header>: cabecera (logo, título, intro)
<nav>: menú de navegación
<main>: contenido principal
<section>: sección de contenido (bloque temático)
<article>: contenido independiente (post, noticia, tarjeta)
<aside>: contenido secundario (barra lateral, formulario, ads)
<footer>: pie de página (copyright, links, contacto)

🆚 Antes: todo con DIV (no semántico)

Así se hacía mucho antes (funciona, pero no describe qué es cada bloque):

<div class="header">...</div>
<div class="nav">...</div>
<div class="content">
  <div class="post">...</div>
</div>
<div class="sidebar">...</div>
<div class="footer">...</div>

✅ Ahora: HTML5 semántico (como en tus imágenes)

Esto es más claro para el navegador, Google (SEO) y accesibilidad:

<header>
  <h1>Título de la página</h1>
</header>

<nav>
  <a href="#inicio">Inicio</a>
  <a href="#blog">Blog</a>
  <a href="#contacto">Contacto</a>
</nav>

<main>
  <section>
    <h2>Sección principal</h2>

    <article>
      <h3>Título del artículo</h3>
      <p>Descripción del artículo...</p>
    </article>

    <article>
      <h3>Otro artículo</h3>
      <p>Descripción...</p>
    </article>
  </section>

  <aside>
    <h3>Barra lateral</h3>
    <p>Formulario / anuncios / info extra</p>
  </aside>
</main>

<footer>
  <p>© 2026 Freimel Jerez WebApp</p>
</footer>

🎯 ¿Por qué usar semántica?

SEO: Google entiende mejor tu contenido.
Accesibilidad: lectores de pantalla navegan más fácil.
Orden: tu código se vuelve más claro y profesional.

🎥 Video de la lección

Mira el video completo para desbloquear la siguiente lección.

✅ Resumen (tal cual tu curso)

HTML define la estructura de una web
Usa etiquetas para organizar el contenido
Soporta multimedia: img, audio, video
HTML5 incluye etiquetas semánticas: header, nav, section, article, aside, footer

🧪 Mini práctica (para tus estudiantes)

Crea un HTML con <header> + <nav> + <main> + <footer>.
Dentro del <main> crea una <section> y 2 <article>.
Agrega un <aside> con un texto corto o un mini formulario.

En la siguiente lección aprenderás las etiquetas HTML más importantes.