Lección 1 de 12 · Lectura y práctica
¿Qué es HTML y cómo funciona?
¿Qué es HTML y cómo funciona? Esta leccion pertenece al curso HTML y CSS Moderno desde Cero y esta pensada para que avances con criterio profesional, no solo con teoria. Primero entiende el concepto, despues aplicalo en una.
Del concepto a la práctica
Taller de esta lección
HTML describe la estructura y el significado de un documento; no decide por sí solo su aspecto. Un elemento combina una etiqueta, atributos y contenido, y el navegador construye con ello un árbol que puede recorrer.
Ejemplo resuelto
Para una ficha de reunión, h1 identifica el tema y time expresa una fecha legible y una máquina puede interpretar. La relación entre ambos importa más que el color.
<h1>Reunión de lectura</h1>
<p>Comienza el <time datetime="2026-10-15T18:30">15 de octubre a las 18:30</time>.</p>Separa el título del dato temporal.
Añade
datetimecon formato determinista.Abre el archivo localmente y observa el texto sin CSS.
Comprueba que el orden sigue siendo comprensible.
Error frecuente: usar div para todo. Corrígelo eligiendo una etiqueta según la función: encabezado, párrafo, lista o enlace.
Pruébalo
Crea una ficha de una sesión con título, lugar y hora. Usa un h1, un p y un time con valor ISO.
Comprueba tu resultado
El documento debe mostrar tres datos en el orden previsto y el atributo datetime debe coincidir exactamente con la fecha y hora visibles.
Mapa de prácticaEl texto alternativo comunica el propósito de una imagen. La navegación por teclado necesita un foco visible; los campos necesitan etiquetas y la página una estructura semántica. Estas comprobaciones ayudan a detectar barreras y no sustituyen una auditoría completa.
Ver la infografía en tamaño completo ↗¿Qué es HTML y cómo funciona?
Esta leccion pertenece al curso HTML y CSS Moderno desde Cero y esta pensada para que avances con criterio profesional, no solo con teoria. Primero entiende el concepto, despues aplicalo en una situacion concreta y finalmente deja evidencia de lo que aprendiste.
Objetivo practico
Al terminar, deberias poder explicar el tema con tus palabras, reconocer cuando usarlo y construir una version simple que sirva como base para un proyecto real.
Pasos recomendados
- Lee el concepto y escribi una definicion breve.
- Identifica un caso de uso laboral donde aparezca este problema.
- Construye un ejemplo pequeno y documenta las decisiones.
- Compara tu resultado con el checklist de la leccion.
Práctica acompañada: Una interfaz web de principio a fin
Estado, formularios y una API pequeña. Usa este cuaderno como práctica complementaria de la ruta; el material original de la lección continúa siendo tu referencia.
Práctica: cuatro pruebas de comportamiento
Prueba un título normal, solo espacios, 121 caracteres y una falla de red simulada. Registra la respuesta y el estado de la interfaz. Repite usando solo teclado: debes llegar al campo, enviarlo y encontrar el error sin usar el ratón.
Después agrega una segunda tarea y cambia el orden de la lista. Comprueba que cada botón sigue actuando sobre el elemento correcto. Si trabajas con microservicios, dibuja qué servicio posee el dato y qué ocurre si la dependencia no responde. No necesitas una infraestructura distribuida para aprender a definir tiempos de espera y errores comprensibles.
Comprueba tu entrega
Entrega el código, el contrato de API y evidencia de las cuatro pruebas. Indica si los datos se guardan o desaparecen al recargar. Una demostración en memoria debe decirlo para que nadie confunda un prototipo con almacenamiento persistente.
Sigue con HTML y CSS Moderno desde Cero
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.