Aprender a estructurar el HTML de un proyecto tipo Airbnb clone es el primer paso para construir una interfaz responsive que funcione en escritorio y móvil. Aquí defines el esqueleto semántico que sostendrá el resto del desarrollo: navbar, home, recomendaciones, estancias destacadas, FAQ, footer y tab bar.

Qué secciones componen el layout de un clon de Airbnb

Antes de escribir una sola línea de código, conviene leer el maquetador y reconocer cada bloque visual. Esa lectura te ahorra rehacer estructura más tarde.

El proyecto se divide en bloques claros, algunos visibles en ambas versiones y otros exclusivos de una pantalla:

• Navbar superior, presente en desktop pero oculta en la versión móvil.
• Sección home con imágenes, search bar y el botón explore more.
• Sección de recomendaciones con tarjetas que se desplazan en scroll horizontal.
• Sección de estancias destacadas, también basada en tarjetas.
• Bloque de frequently asked questions, visible en ambas pantallas.
• Footer general del sitio.
• Tab bar inferior, exclusivo de la versión móvil.

¿Qué es un tab bar en diseño web? Es una barra de navegación fija en la parte inferior de la pantalla, típica de interfaces móviles, que permite saltar entre secciones principales con un toque.

Detectar estas piezas en el mockup te da el mapa exacto de los contenedores que vas a crear en HTML.

Cómo escribir el esqueleto HTML con nav, section y div

Con el inventario claro, toca traducir cada bloque a una etiqueta. La regla es simple: usa elementos semánticos para los bloques estructurales y div con id para las subsecciones que vas a estilizar o referenciar después.

Por qué usar IDs en cada sección del proyecto

Los id cumplen dos funciones dentro de este flujo de trabajo. Primero, te permiten apuntar estilos específicos desde CSS sin colisionar con otros bloques. Segundo, habilitan la navegación interna mediante anclas, algo clave cuando la navbar enlaza a home, recomendaciones o destacadas dentro de la misma página.

En este proyecto se asignan tres id dentro de la section principal:

1. home para el bloque superior con buscador e imágenes.
2. recomendadas para la sección de rentas recomendadas.
3. destacadas para la sección de rentas destacadas.

Y un id adicional, tab-bar, en el contenedor de navegación móvil.

Cuál es el orden correcto de los bloques en el HTML

El orden en el documento importa porque define cómo se renderiza la página de arriba hacia abajo. La estructura queda así:

• tab bar como primer div con su id, ubicado arriba del nav en el código.
• nav con la navbar de escritorio.
• section que envuelve los tres div de contenido: home, recomendadas y destacadas.
• footer al cierre del documento.

¿Por qué se separa el contenido en varios div con id? Para tener puntos de anclaje únicos que faciliten aplicar estilos, animaciones o enlaces internos sin afectar al resto del layout.

Un truco práctico cuando dos bloques comparten estructura, como recomendadas y destacadas, es copiar el primer div y solo cambiar el id. Ahorras tiempo y mantienes consistencia en el marcado.

Cómo preparar el HTML para la versión móvil y desktop

Algunos elementos del mockup aparecen solo en una versión. La navbar desaparece en móvil y el tab bar solo existe ahí. Aun así, ambos se escriben en el mismo HTML.

La lógica es declarar todos los contenedores en el marcado y después controlar su visibilidad con CSS responsive. Por eso el tab bar se incluye desde ya, aunque visualmente no se vea en escritorio.

¿Se debe duplicar el HTML para móvil y desktop? No. Escribes una sola estructura y usas media queries en CSS para mostrar u ocultar bloques según el ancho de pantalla.

Con este esqueleto listo, ya tienes el terreno preparado para empezar a darle forma a la sección home, que es donde aterriza la primera impresión del usuario. ¿Cómo organizas tú los id cuando arrancas un proyecto desde cero? Cuéntame en los comentarios.