Los mas nuevo

6/recent/ticker-posts

Curso de programación GRATIS Modulo III: Desarrollo Web Parte I - HTML

Portada Módulo 3 HTML
0%
Módulo 3 · HTML
✅ Módulos anteriores
🌐 Proyecto del módulo
Sitio web profesional completo
Completa HTML + CSS + JS para desbloquearlo
Módulo 3 · Desarrollo Web · HTML · 2026

HTML:
el esqueleto de la web

Aprende a construir páginas web desde cero: estructura semántica, formularios interactivos, elementos multimedia y las bases del SEO para que tus páginas sean encontradas por Google.

4Lecciones
4Mini quizzes
1Proyecto web
∞Tu portafolio
🔖 Marcadores
Sin marcadores — usa el botón naranja en cualquier lección.
L1
Fundamentos

Estructura web: el esqueleto de toda página

HTML (HyperText Markup Language) es el lenguaje con el que se construye la estructura de toda página web. No es un lenguaje de programación — es un lenguaje de marcado: usas etiquetas (tags) para decirle al navegador qué es cada cosa. ¿Este texto es un título? ¿Este bloque es un párrafo? ¿Esto es un menú de navegación? HTML responde esas preguntas.

🏗️
Analogía: HTML es la estructura, CSS la pintura, JS la electricidad

Imagina una casa en construcción. El HTML es la estructura: paredes, habitaciones, puertas, ventanas — define qué hay y dónde. El CSS es la decoración: colores, tapices, iluminación — define cómo se ve. El JavaScript es la electricidad y la domótica: hace que las cosas funcionen e interactúen. Sin estructura (HTML), no hay nada sobre qué poner color ni qué hacer funcionar.

Anatomía de un documento HTML

Todo documento HTML válido sigue la misma estructura base. Entenderla bien desde el principio te ahorrará horas de errores extraños en el futuro:

HTML — Documento base completo
<!DOCTYPE html>                  <!-- Declara que es HTML5 -->
<html lang="es">                  <!-- Raíz del documento, idioma español -->

  <head>                           <!-- Metadatos: no visible en pantalla -->
    <meta charset="UTF-8">         <!-- Codificación de caracteres (tildes, ñ) -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Mi primera página web</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>                           <!-- Todo lo visible va aquí -->

    <header>                       <!-- Cabecera del sitio -->
      <nav>Menú de navegación</nav>
    </header>

    <main>                         <!-- Contenido principal de la página -->
      <section>
        <h1>Título principal</h1>
        <p>Un párrafo de texto.</p>
      </section>
      <article>
        <h2>Artículo o entrada</h2>
      </article>
    </main>

    <aside>Barra lateral</aside>

    <footer>                       <!-- Pie de página -->
      <p>&copy; 2026 Mi Sitio</p>
    </footer>

    <script src="app.js"></script>  <!-- JS al final del body -->
  </body>
</html>

El árbol del documento (DOM)

El navegador interpreta tu HTML y construye un árbol llamado DOM (Document Object Model). Entender esta estructura jerárquica es fundamental para CSS y JavaScript:

🌳 Árbol DOM — estructura padre → hijo
<html>raíz del documento
<head>metadatos, título, links a CSS
<meta>charset, viewport, SEO
<title>texto en la pestaña del navegador
<body>todo el contenido visible
<header>cabecera + nav
<main>contenido principal único
<section>sección temática
<article>contenido independiente
<aside>contenido secundario / sidebar
<footer>pie de página

HTML semántico: el por qué importa

HTML semántico significa usar la etiqueta correcta según el significado del contenido, no solo para que "se vea bien". Un <nav> le dice al navegador, a los lectores de pantalla y a Google que ahí hay un menú de navegación — un <div> no dice nada.

Etiqueta semánticaPara qué se usaEquivalente NO semántico
<header>Cabecera del sitio o sección<div id="header">
<nav>Menú de navegación<div id="nav">
<main>Contenido principal único por página<div id="main">
<section>Sección temática con encabezado<div class="section">
<article>Contenido independiente (entrada de blog, noticia)<div class="post">
<aside>Contenido relacionado pero secundario<div id="sidebar">
<footer>Pie de página del sitio o sección<div id="footer">
<figure> / <figcaption>Imagen con descripción<div> + <p>
<time>Fecha u hora legible por máquinas<span>

Etiquetas de texto esenciales

HTML — Etiquetas de texto y listas
<!-- Jerarquía de títulos: h1 es el más importante, h6 el menor -->
<h1>Título principal (uno por página)</h1>
<h2>Subtítulo de sección</h2>
<h3>Sub-subtítulo</h3>

<!-- Párrafo con énfasis -->
<p>Texto normal con <strong>negrita</strong> y <em>cursiva</em>.</p>

<!-- Enlace -->
<a href="https://ejemplo.com" target="_blank">Visitar sitio</a>

<!-- Lista no ordenada (bullets) -->
<ul>
  <li>Elemento uno</li>
  <li>Elemento dos</li>
</ul>

<!-- Lista ordenada (numerada) -->
<ol>
  <li>Paso uno</li>
  <li>Paso dos</li>
</ol>

<!-- Imagen con texto alternativo (obligatorio para accesibilidad) -->
<img src="foto.jpg" alt="Descripción de la imagen" width="800" height="600">

<!-- Contenedor genérico (cuando no hay etiqueta semántica adecuada) -->
<div class="tarjeta">Bloque de contenido</div>    <!-- block -->
<span class="badge">Texto inline</span>           <!-- inline -->
💡 Block vs. Inline — la diferencia clave

Los elementos block (div, p, h1…h6, section…) ocupan toda la línea y empujan el contenido siguiente hacia abajo. Los elementos inline (span, a, strong, em…) se integran dentro del texto sin romper la línea. Esta distinción es fundamental para entender después cómo CSS aplica estilos y cómo Flexbox y Grid organizan los elementos.

⚠ Errores comunes en estructura HTML

(1) Saltarse niveles de encabezados (pasar de h1 a h4 sin usar h2 y h3). (2) Usar <div> para todo en lugar de etiquetas semánticas. (3) Olvidar el atributo alt en imágenes. (4) No cerrar etiquetas (aunque algunos navegadores lo perdonan, es mala práctica). (5) Poner el <script> en el <head> sin atributo defer — bloquea la carga de la página.

🧠 Quiz: Estás construyendo el blog de tu portafolio. Tienes el logo y menú arriba, luego las entradas del blog en el centro, y abajo el copyright. ¿Cuál es la estructura semántica correcta?
🌐

¡HTML dominado!

Has completado las cuatro lecciones de HTML: estructura semántica, formularios, multimedia y SEO básico. Tienes la base sólida para construir cualquier página web profesional.

El siguiente post cubrirá CSS: Flexbox, Grid y Responsive Design para dar vida visual a tu HTML.


David DGX

Publicadas por David DGX

Publicar un comentario

0 Comentarios