Lección 2: Fundamentos de HTML: Ejercicio de sintaxis

Explicación del concepto

Esta lección es un ejercicio de sintaxis enfocado. El objetivo no es construir una página completa, sino familiarizarse con la escritura de elementos HTML válidos, anidarlos correctamente e identificar pequeños errores a tiempo. Practicará etiquetas comunes, prestará atención a las etiquetas de cierre y la indentación, y confirmará que la salida coincide con la estructura que pretendía. Una sintaxis HTML sólida se vuelve mucho más fácil cuando deja de memorizar etiquetas aleatorias y comienza a notar patrones en cómo los elementos se abren, contienen contenido y se cierran.

Dónde poner el código

1. Comience con variables y entradas. Coloque el marcado en secciones semánticas con una estructura clara.
2. Agregue la lógica de procesamiento en la sección central.
3. Finalice con la salida y una validación rápida.

Referencia de comandos

• Escriba el ejemplo sin copiar y pegar, y verifique que la lista se renderice correctamente.
• Agregue un elemento de lista más y mantenga la indentación consistente.
• Verifique que los elementos de bloque estén anidados en un orden lógico dentro de la sección.
• Describa un error de sintaxis que rompería o confundiría este marcado.

Guía paso a paso

1. Escriba el ejemplo exactamente una vez para practicar el patrón de etiquetas a mano.
2. Abra la página y confirme que el encabezado, el párrafo y la lista con viñetas aparecen en el orden esperado.
3. Agregue un cambio específico, como un cuarto elemento de lista o un segundo párrafo.
4. Verifique el anidamiento cuidadosamente: los elementos de lista deben permanecer dentro de `ul`, y todo el contenido debe permanecer dentro de `section`.
5. Revise el marcado final en busca de espaciado, indentación y etiquetas de cierre faltantes.

Ejercicios prácticos

• Cree una nueva sección para una receta, lista de tareas o lista de lectura utilizando la misma estructura.
• Escriba una pequeña tarjeta con un encabezado, una descripción y una lista desordenada de características.
• Construya el mismo ejemplo nuevamente, pero cambie el tema y el texto por completo.

Retos de código

• Escriba dos secciones similares en la misma página sin mezclar el anidamiento.
• Cree dos versiones del marcado, una con formato ordenado y otra plana, luego compare la legibilidad y el mantenimiento.

Mini tareas de práctica

• Agregue un elemento de lista adicional.
• Escriba una descripción de una línea de lo que representa esta sección.
• Verifique que cada elemento esté anidado donde corresponde.