Tutorial HTML: División (div)

La etiqueta <div> en HTML es uno de los elementos más fundamentales en la construcción de sitios web. Su nombre es una abreviatura de "division", que se puede traducir como "división". Se utiliza principalmente como contenedor para agrupar bloques de código y aplicar estilos CSS a través de selectores de clase o id.

Definición y uso

El elemento <div> es un contenedor en bloque que agrupa otros elementos y contenido. No tiene un significado semántico en sí mismo, y se utiliza para agrupar, estilizar y manipular otros elementos dentro de él.

Un elemento <div> en HTML se inicia con la etiqueta de apertura <div> y se cierra con la etiqueta de cierre </div>.

A continuación, se presenta un ejemplo de cómo se vería en el código:

<div>
  <p>Este es un párrafo dentro de una div.</p>
</div>

Atributos

El elemento <div> puede llevar varios atributos como class, id, style entre otros. Estos atributos permiten manipular el comportamiento y la apariencia de la <div> en particular.

Por ejemplo:

<div id="miDiv" class="claseDiv" style="color: red;">
  <p>Este es un párrafo dentro de una div con id, clase y estilo.</p>
</div>

En este ejemplo, id="miDiv" identifica de manera única a esta <div>, lo que permite referenciarla directamente en JavaScript o CSS. class="claseDiv" asigna una clase a la <div>, que puede ser reutilizada en otros elementos y permite aplicar estilos CSS en grupo. style="color: red;" aplica un estilo CSS directamente a la <div>, en este caso, cambiar el color del texto a rojo.

Relación con CSS

El elemento <div> es comúnmente usado junto con hojas de estilo en cascada (CSS). CSS es el lenguaje de hojas de estilo utilizado para describir la presentación de un documento escrito en HTML.

Por ejemplo, si queremos que todas las divs con la clase claseDiv tengan un color de fondo azul, lo haríamos de la siguiente manera en CSS:

.claseDiv {
  background-color: blue;
}

Y en el HTML:

<div class="claseDiv">
  <p>Este párrafo está en una div con fondo azul.</p>
</div>

Consideraciones

Es importante recordar que aunque la <div> es una herramienta útil para la organización y manipulación de elementos en un sitio web, no debe ser utilizada en exceso ni reemplazar elementos semánticos cuando estos son apropiados. Elementos como <header>, <footer>, <section>, <article>, etc., tienen significado semántico y ayudan a los motores de búsqueda y a las tecnologías de asistencia a entender la estructura de la página. Utilizar demasiadas <div>s puede hacer que la página sea más difícil de entender y mantener.