Aprender a maquetar un juego en HTML significa construir la estructura visible y los contenidos que verán los jugadores antes de añadir lógica con JavaScript. En esta guía retomamos el proyecto Mokepón para definir botones, secciones, títulos y elementos dinámicos que harán posible un combate entre mascotas elementales.
¿Qué significa maquetar en desarrollo web?
En programación, maquetar es crear la estructura y el contenido de una página web usando HTML. No se trata de estilos ni de comportamiento, sino del esqueleto: qué títulos hay, qué botones existen, qué párrafos aparecen y cómo se agrupan en bloques lógicos.
Para Mokepón necesitas pensar en bloques: una zona donde el jugador elige mascota, otra donde lanza ataques, otra donde lee los mensajes del combate y una final para reiniciar la partida.
¿Qué es maquetar una página web? Es definir con etiquetas HTML la estructura y los contenidos de la página: títulos, párrafos, botones y secciones. Es el paso previo a darle estilo o lógica.
¿Cómo dividir una página con la etiqueta section?
La etiqueta <section> te permite agrupar contenido relacionado dentro de un mismo bloque. En Mokepón vas a crear cuatro secciones independientes: seleccionar mascota, seleccionar ataque, mensajes y reiniciar [02:30].
Como todas las secciones se ven iguales en el código, necesitas diferenciarlas. Para eso usas el atributo id, que funciona como un nombre único para cada bloque.
¿Cómo nombrar correctamente un id en HTML?
HTML no permite espacios en los valores de id. Tampoco conviene escribir nombres demasiado largos ni redundantes.
- Separa las palabras con guiones, no con espacios.
- Evita repetir información obvia como la palabra section.
- Usa nombres cortos y descriptivos, por ejemplo
seleccionar-mascota, seleccionar-ataque, mensajes y reiniciar.
Con estos identificadores, después podrás manipular cada bloque desde JavaScript sin confundirlos.
¿Cuándo usar h1 y cuándo usar h2?
Los títulos jerárquicos también forman parte de la maquetación. La regla es sencilla: <h1> se usa una sola vez por página, porque representa el título principal. Para Mokepón, ese h1 es el nombre del juego junto a sus emojis.
Los subtítulos de cada sección se escriben con <h2>, que sí puede repetirse. En la sección de seleccionar mascota va un h2 con el texto elige tu mascota, y en la de seleccionar ataque otro h2 con elige tu ataque [08:15].
¿Puedo usar varios h1 en una página? No es recomendable. El h1 representa el título principal y debe ser único. Para subtítulos de secciones usa h2, h3 y siguientes.
¿Cómo marcar contenido dinámico con la etiqueta span?
Dentro de la sección de ataques necesitas mostrar las vidas de tu mascota y las del enemigo. Aquí aparece la diferencia entre contenido estático y contenido dinámico.
El título Mokepón nunca cambia, es estático. Pero el número de vidas sí cambia durante el combate: sube o baja según ganes o pierdas. Para que JavaScript pueda modificar solo ese número sin tocar el resto del párrafo, lo envuelves en una etiqueta <span> [05:40].
La estructura queda así:
- Un párrafo con el texto Tu mascota tiene
<span>3</span> vidas.
- Otro párrafo con La mascota del enemigo tiene
<span>3</span> vidas.
El span actúa como una caja invisible que aísla el dato dinámico. Cuando programes la lógica del juego, podrás cambiar ese 3 por cualquier valor sin reescribir el párrafo completo.
¿Qué secciones necesita un juego de combate por turnos?
Mokepón se compone de cuatro bloques claros, cada uno con un propósito específico dentro del flujo de juego.
Sección de seleccionar mascota
Esta sección lleva el id seleccionar-mascota, un h2 con la indicación elige tu mascota y un botón llamado seleccionar [09:50]. Las mascotas concretas se definirán en la siguiente etapa, junto con sus atributos elementales.
Sección de seleccionar ataque
Aquí van los párrafos de vidas con sus span dinámicos y los tres botones de ataque, uno por cada elemento del juego.
- Botón de fuego con su emoji correspondiente.
- Botón de agua con su emoji.
- Botón de tierra con su emoji de planta.
Estos botones representan la lógica clásica del juego: el agua derrota al fuego, el fuego derrota a la tierra y la tierra derrota al agua [13:20].
Sección de mensajes y sección de reiniciar
La sección con id mensajes contiene un párrafo donde JavaScript escribirá qué ataque lanzó cada mascota y el resultado del combate, por ejemplo tu mascota atacó con fuego, la mascota del enemigo atacó con tierra, ganaste.
La sección con id reiniciar contiene un único botón que permite volver a empezar la partida cuando alguna de las mascotas pierde sus tres vidas [16:10]. Sin esta sección, el jugador no tendría forma de seguir enganchado al juego después del primer combate.
El resultado final es un HTML que muestra todo al mismo tiempo, pero con JavaScript controlarás qué sección se ve en cada momento del juego. ¿Qué otros bloques añadirías tú a la maquetación de Mokepón? Cuéntalo en los comentarios.
