▷ Estructura de un SITIO WEB con ETIQUETAS DIV

 

📦 ¿Para qué sirve la etiqueta <div> en HTML?

La etiqueta <div> es una de las más utilizadas en HTML para organizar y estructurar contenido. Aunque no tiene un significado semántico específico, se usa como un "contenedor genérico" que nos permite agrupar elementos y aplicarles estilos con CSS. 

Si quieres saber como se estructura semánticamente un sitio web, visita el artículo de Etiquetas Estructurales.

---

🔹 ¿Qué hace exactamente un <div>?

Un <div> crea un bloque que se puede utilizar para:

• 🧱 Agrupar elementos relacionados.
• 🎨 Aplicar estilos de forma organizada.
• 📐 Controlar la distribución visual con Flexbox, Grid o Position.
• 🛠️ Estructurar el layout de una página web.

---

📄 Ejemplo simple con <div>

<div style="background-color: #f2f2f2; padding: 20px;">
  <h2>Encabezado</h2>
  <p>Este contenido está dentro de un contenedor div.</p>
</div>

✅ El contenido está agrupado, lo que facilita aplicar estilos, márgenes, bordes, etc.

---

🏗️ Estructura básica de una página usando <div>

Una forma muy común de organizar una página web es dividiendo el contenido principal en secciones como:

• Encabezado (Header)
• Menú de navegación
• Contenido principal
• Barra lateral (sidebar)
• Pie de página (footer)

📄 Ejemplo en código:

<div id="header">
  <h1>Mi sitio web</h1>
</div>

<div id="nav">
  <ul>
    <li>Inicio</li>
    <li>Acerca de</li>
    <li>Contacto</li>
  </ul>
</div>

<div id="main">
  <h2>Bienvenido</h2>
  <p>Este es el contenido principal.</p>
</div>

<div id="sidebar">
  <p>Información adicional</p>
</div>

<div id="footer">
  <p>© 2025 Mi sitio web</p>
</div>

---

🎨 ¿Cómo se vería esto con CSS?

<style>
#header {
  background: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

#nav {
  background: #eee;
  padding: 10px;
}

#main {
  float: left;
  width: 70%;
  padding: 20px;
}

#sidebar {
  float: right;
  width: 25%;
  padding: 20px;
  background: #f4f4f4;
}

#footer {
  clear: both;
  background: #333;
  color: white;
  text-align: center;
  padding: 10px;
}
</style>

---

📌 Buenas prácticas al usar <div>

• ✅ Asigna clases o ID para poder aplicar estilos fácilmente.
• ✅ No abuses de <div>; si existe una etiqueta semántica como <header>, <section> o <footer>, es mejor usarla.
• ✅ Usa divs anidados para crear estructuras más complejas y responsivas.

---

🧠 ¿Por qué sigue siendo útil usar <div>?

Aunque HTML5 trajo etiquetas semánticas como <main>, <section> o <article>, <div> sigue siendo necesario cuando:

• 🔧 Necesitas agrupar elementos visuales sin propósito semántico.
• 📐 Estás creando layouts flexibles o complejos con CSS.
• 🎯 Quieres aplicar efectos, bordes, paddings o márgenes de forma controlada.

En el siguiente video te muestro como estructurar tu sitio web con etiquetas DIV.

🗨️ ¿Qué opinas?
Me encantaría saber tu opinión sobre este tema. Déjame un comentario aquí abajo 💬 y, si te gustó el contenido, ¡no olvides seguir el blog para no perderte las próximas publicaciones! 📚✨