HTML5 desde cero · Fase 1 · Experiencia visual guiada

Paso 1 de 8 · Concepto fundamental

¿Qué es HTML y para qué sirve?

Antes de aprender etiquetas, necesitas saber exactamente qué problema resuelve HTML.

Al terminar este paso debes poder explicar: “HTML sirve para dar estructura y significado al contenido de una página web”.

Antes de empezar · diagnóstico personal (no califica)

¿Qué tan seguro te sientes ahora para explicar qué es HTML y construir una página sencilla?

HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto). Es un lenguaje de marcado que indica al navegador cómo estructurar el contenido de una página web.

Referencia del concepto: MDN explica que HTML es un lenguaje de marcado que indica a los navegadores cómo estructurar las páginas web (Mozilla Developer Network, 2026).

HyperText

“Hipertexto”: contenido que puede conectarse con otros recursos mediante enlaces.

Markup

“Marcado”: etiquetas que identifican qué representa cada parte del contenido.

Language

“Lenguaje”: una sintaxis y reglas que el navegador sabe interpretar.

Importante:HTML no se estudia aquí como un lenguaje de programación. Su función inicial es marcar y organizar contenido: qué es un título, un párrafo, una lista, un enlace, una imagen, etc.

Una forma sencilla de pensarlo

Imagina que tienes información escrita, pero nadie sabe qué parte es el título, qué parte es una lista o qué parte es un enlace. HTML etiqueta cada pieza para que el navegador sepa qué representa.

Contenido“Ana López”, “Habilidades”, “HTML”

→

HTML lo marca<h1> · <p> · <ul>

→

NavegadorInterpreta y organiza la página

Mira la diferencia: información suelta vs. contenido estructurado

→

Qué debes observar: la información es la misma. HTML no inventó el contenido; le dio una estructura comprensible.

Nota: el navegador aplica estilos básicos por defecto a títulos, listas y párrafos. Más adelante CSS controlará su apariencia.

Antes de continuar

¿Cuál frase explica mejor qué hace HTML?

Paso 2 de 8 · La unidad básica

Una etiqueta le dice al navegador qué es cada contenido

Aprender HTML empieza por entender un elemento completo, no por memorizar decenas de nombres.

Al terminar: distinguirás etiqueta de apertura, contenido, etiqueta de cierre y atributo.

Explora este elemento

Haz clic en cada parte. Después prueba el ejemplo con un enlace, que incluye un atributo.

Referencia técnica: MDN define un elemento como la etiqueta de apertura, su contenido y la etiqueta de cierre; los atributos agregan información adicional al elemento (MDN, 2026).

<p> · etiqueta de apertura

Marca dónde comienza el elemento

La letra p significa “paragraph” (párrafo). El navegador entiende que el texto que sigue forma un párrafo.

Comprueba la idea

En <a href="pagina.html">Ir</a>, ¿qué es href?

Paso 3 de 8 · La estructura mínima

Ahora arma el “contenedor” de una página completa

Los elementos no viven aislados. Un documento HTML tiene una estructura base que el navegador interpreta.

Al terminar: sabrás para qué sirven <html>, <head>, <title> y <body>.

Haz clic en una línea

<h1>Hola, web</h1> <p>Mi primera página HTML.</p>

DOCTYPE · indica el tipo de documento

HEAD · información para el navegadorConfiguración, título de pestaña, metadatos. Normalmente no aparece como contenido de la página.

BODY · contenido que ve la personaTítulos, párrafos, listas, enlaces, imágenes, formularios, etc.

El <!DOCTYPE html> va al inicio y activa el modo estándar de HTML moderno.

Antes de avanzar

¿Dónde colocas el contenido visible de la página?

Paso 4 de 8 · Vocabulario esencial

Aprende solo las etiquetas que necesitas para tu primera página

Cada etiqueta responde a una intención: “quiero un título”, “quiero un párrafo”, “quiero varios elementos relacionados”, etc.

Al terminar: elegirás entre título, párrafo, lista, enlace e imagen según lo que quieras comunicar.

Código → resultado visible

Práctica breve

Quieres mostrar “HTML, CSS y Git” como tres habilidades relacionadas. ¿Qué opción comunica mejor la relación?

Paso 5 de 8 · Organizar la página

Una página también se divide en regiones con significado

Cuando el contenido crece, necesitas organizarlo en zonas. Para una primera página, empieza por pocas regiones claras.

Al terminar: reconocerás <header>, <main>, <section> y <footer>; usarás <nav> cuando haya navegación.

navPerfil · Habilidades · Contacto

mainContenido principal

sectionHabilidades

sectionEducación

<header> introduce la página o una sección. En un CV puede contener tu nombre y perfil.

Regla para no complicarte

No uses una etiqueta porque “se ve bonita”. Úsala por lo que significa. W3C recomienda marcar la estructura con elementos semánticos apropiados, de modo que las relaciones sean comprensibles para navegadores y tecnologías de asistencia.

¿Y `<article>` / `<aside>`?

Existen y son importantes, pero no necesitas dominarlos para tu primera página. Primero consolida la estructura básica. Después podrás aprender que <article> representa contenido autocontenido y <aside> contenido complementario.

Comprueba la estructura

En un CV, “Habilidades” y “Educación” son bloques temáticos dentro del contenido principal. ¿Qué elemento encaja bien para cada bloque?

Paso 6 de 8 · Aprender haciendo

Construye un currículum web en 5 misiones

No empiezas desde una hoja en blanco. Primero estudias una solución guiada y después personalizas cada parte. La ayuda disminuye conforme avanzas.

Producto: un archivo HTML con encabezado, perfil, habilidades, educación/proyecto y contacto.

Misión 1 · Identidad

Observa cómo un <header> puede presentar tu página. Personaliza tu nombre y tu perfil.

Vista previa real del navegador

Sin CSS propio: observa solo la estructura y los estilos predeterminados del navegador.

Código que estás construyendo

Antes de terminar el proyecto

¿Qué relación quieres conservar en tu mente?

Paso 7 de 8 · Evidencia y reflexión

Comprueba, documenta y reflexiona sobre lo aprendido

Aquí conviertes tu interacción en evidencia: compruebas conceptos, valoras tu avance y explicas qué cambió en tu comprensión.

Producto de cierre: un PDF con tu matrícula, resultado de la actividad, nivel de confianza y reflexión metacognitiva.

Mini comprobación

1. HTML principalmente…

2. El contenido visible suele ir dentro de…

3. Una colección de habilidades se representa bien con…

4. Un bloque temático como “Educación” puede ser…

3 · Reflexión metacognitiva

No se evalúa la extensión, sino que puedas reconocer qué cambió en tu forma de entender y construir HTML.

Antes de la actividad, ¿cómo entendías HTML y qué entiendes ahora?

¿Qué fue lo más difícil y qué hiciste para comprenderlo o resolverlo?

¿Qué parte de tu currículum web demuestra mejor que comprendiste la estructura HTML?

4 · Genera tu evidencia en PDF

El reporte incluirá identificación, avance, resultado de la comprobación, código HTML construido, autoevaluación, reflexión metacognitiva, autoría, licencia y transparencia de IAG.

Comprobación final: 0 / 4 Actividad CV: 0 / 5 misiones registradas Reflexión: pendiente

Completa los elementos anteriores. El botón validará lo que falte.

Paso 8 de 8 · Cierre

Lo esencial que debes llevarte

Si puedes explicar estas ideas y ya generaste tu evidencia, completaste la fase 1: estructura y significado en HTML. La siguiente fase aplicará CSS sobre esta misma base.

1 · HTML estructura

Marca el significado del contenido para que el navegador pueda interpretarlo.

2 · Los elementos tienen partes

Etiqueta de apertura + contenido + cierre; algunos incluyen atributos.

3 · Existe una estructura base

html, head y body organizan el documento.

4 · Elige por significado

Título, párrafo, lista, enlace e imagen responden a intenciones diferentes.

5 · Una página tiene regiones

header, main, section y footer ayudan a organizarla.

Siguiente paso

CSS tomará esta estructura y trabajará su presentación visual.

Referencias · APA 7

Mozilla Developer Network. (2026). Primeros pasos con HTML. https://developer.mozilla.org/es/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax
Mozilla Developer Network. (2026). HTML: Lenguaje de marcado de hipertexto. https://developer.mozilla.org/es/docs/Web/HTML
Mozilla Developer Network. (2026). Structuring documents. https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents
World Wide Web Consortium, Web Accessibility Initiative. (2026). Page Structure Tutorial. https://www.w3.org/WAI/tutorials/page-structure/
World Wide Web Consortium, Web Accessibility Initiative. (2026). Content Structure. https://www.w3.org/WAI/tutorials/page-structure/content/
van Gog, T., Paas, F., & Sweller, J. (2010). Cognitive load theory: Advances in research on worked examples, animations, and cognitive load measurement. Educational Psychology Review, 22, 375–378. https://doi.org/10.1007/s10648-010-9145-4
McDermott, K. B. (2021). Practicing retrieval facilitates learning. Annual Review of Psychology, 72, 609–633. https://doi.org/10.1146/annurev-psych-010419-051019
Mayer, R. E., & Fiorella, L. (Eds.). (2021). The Cambridge handbook of multimedia learning (3rd ed.). Cambridge University Press.
World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. https://www.w3.org/TR/WCAG22/
World Wide Web Consortium, Web Accessibility Initiative. (2026). ARIA Authoring Practices Guide. https://www.w3.org/WAI/ARIA/apg/
Nielsen, J. (1994/2024). 10 usability heuristics for user interface design. Nielsen Norman Group. https://www.nngroup.com/articles/ten-usability-heuristics/
Universidad de Colima. (2024). Acuerdo No. 23 de 2024: Lineamientos para el uso de Inteligencia Artificial Generativa.

Accesibilidad y usabilidad

El recurso fue diseñado y revisado con criterios de WCAG 2.2 nivel AA: estructura semántica, navegación con teclado, foco visible, contraste, reflow, controles nativos, mensajes de estado y reducción de movimiento. También se utilizaron las heurísticas de Nielsen como guía de usabilidad.

Alcance: esta declaración describe criterios aplicados al diseño; no equivale a una certificación formal independiente.

Transparencia de IAG

Docente: Ing. Ricardo Jaramillo Velasco
Curso: Programación Web
Periodo: Agosto-Noviembre 2026

La IAG se utilizó como apoyo para elaborar materiales educativos, generar código de la herramienta interactiva, diseñar evaluación formativa y producir retroalimentación orientativa. No revisa automáticamente el trabajo del estudiante.

Autoría

Autor y responsable académico: Ing. Ricardo Jaramillo Velasco.

Facultad de Telemática · Universidad de Colima.

Recurso educativo de la asignatura Programación Web.

Licencia y marco institucional

Licencia Creative Commons Atribución-NoComercial-CompartirIgual 4.0 Internacional (CC BY-NC-SA 4.0).

Transparencia de IAG conforme a la Declaratoria del curso y al Acuerdo No. 23 de 2024 de la Universidad de Colima.

Universidad de ColimaRecurso educativo de Programación Web

Primero entiende la estructura. Después escribe el código.