Uso del elemento <div>

El <div> es un elemento HTML genérico que actúa como un contenedor de tipo bloque. Ayuda a estructurar el contenido, crear diseños y agrupar elementos.

¿Qué es un <div>?

El elemento <div> no tiene un significado semántico por sí mismo, pero se usa a menudo para agrupar uno o más elementos, como bloques de texto o imágenes. Es especialmente útil al aplicar estilos CSS o funcionalidades de JavaScript.

<div>
  <h2>Welcome</h2>
  <p>This is a short paragraph.</p>
</div>

Crear diseños web

Muchos sitios web modernos están compuestos completamente por elementos <div>. Un ejemplo común es usar contenedores <div> separados para el encabezado, contenido principal y pie de página.

<div class="header">Header content</div>
<div class="main">Main content</div>
<div class="footer">Footer content</div>

Uso de class e id

Los elementos <div> a menudo incluyen atributos class o id, esenciales para aplicar CSS o JavaScript. La class puede reutilizarse, mientras que el id debe ser único en la página.

<div id="sidebar">Sidebar</div>
<div class="card">Card content</div>

Estilizar un div

Los elementos <div> se estilizan frecuentemente con CSS. Esto se puede hacer mediante un archivo CSS externo, estilos inline o aplicando una clase. Por ejemplo, puedes darle un fondo azul claro y padding.

<div style="background-color: lightblue; padding: 10px;">
  Styled box
</div>

Elementos <div> anidados

Anidar elementos <div> unos dentro de otros permite crear diseños complejos. Esto es especialmente útil en sistemas de grid o estructuras de contenido de varios niveles.

<div class="container">
  <div class="row">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
  </div>
</div>

Evita el uso excesivo

Los principiantes a menudo abusan del uso de elementos <div>. Trata de evitar estructuras tipo 'div div div'. Apunta a un código limpio y legible.

Cuándo usar elementos semánticos en su lugar

Aunque <div> es muy útil, no siempre es la mejor opción. Por ejemplo, usa <article>, <nav> o <footer> para marcar artículos, menús de navegación o pies de página, respectivamente.