Puedes pensar en una página web en tres partes principales: tienes el encabezado y el pie de página y, en el medio, el cuerpo principal. Pero al mirar cualquier página web, puedes ver que el cuerpo también está formado por secciones. Es probable que haya una sección para productos y servicios, testimonios, miembros del equipo, información de contacto y más.
Cada una de estas secciones probablemente se ve un poco diferente. Tal vez tengan diferentes colores y fuentes. Tal vez uno tenga un fondo de paralaje y el otro tenga un fondo de video. Tal vez uno esté formado por múltiples filas y columnas, y así sucesivamente.
Esta variación en el estilo es posible debido al elemento de división de contenido en HTML. Mejor conocido como «div HTML», este elemento puede dividir tu página web en secciones para que puedas darles propiedades CSS únicas.
En esta publicación, veremos más de cerca qué es este elemento, qué hace exactamente y por qué querrías usarlo en tu propio sitio.
¿Qué es la etiqueta <div> en HTML?
En HTML, la etiqueta <div> es un contenedor genérico de bloque para otros elementos. Es «genérico» porque no describe el contenido que contiene.
Otros elementos como <nav>, <header>, <footer> y <form> describen el contenido que contienen y se conocen como elementos HTML semánticos. Siempre debes usar un elemento semántico sobre un div cuando sea posible, ya que esto hace que tu código sea más accesible y más fácil de mantener.
En segundo lugar, un div es un contenedor de bloque. Para entender lo que eso significa, comparemos un div con un elemento span, que es un contenedor en línea.
Hay varias diferencias clave entre un elemento de bloque y un contenedor en línea. Por ejemplo, un div siempre comienza en su propia línea, mientras que un span permanece en la misma línea. Un div también ocupa todo el ancho de la página y un span no. Eso significa que si tienes varios div seguidos, aparecerán apilados uno encima del otro en el front-end. Los span, por otro lado, pueden existir uno al lado del otro. La última gran diferencia es que puedes definir la altura y el ancho de un div, pero no puedes hacerlo para un span.
En tercer lugar, los elementos que pueden estar contenidos en un div se conocen más específicamente como «contenido palpable» o «contenido de flujo». El contenido palpable es básicamente cualquier elemento HTML que contiene texto o contenido incrustado, y el contenido de flujo es básicamente cualquier elemento utilizado en el cuerpo de los documentos HTML. Por lo tanto, los elementos de anclaje, cita en bloque, audio, imagen, párrafo y encabezado se consideran contenido palpable o fluido, y se pueden agregar dentro de un div.
¿Dónde aparece una etiqueta <div> en HTML?
Los div van en la sección del cuerpo de un archivo HTML. Esto está claramente marcado por etiquetas <body></body> en un archivo HTML. (Nota: estas etiquetas a menudo se omiten en los editores de código, como CodePen).
Para crear un elemento div, debes usar una etiqueta de apertura y cierre. Puedes agregar los elementos que deseas agrupar dentro de estas etiquetas. A menudo, estos aparecerán sangrados, como se muestra a continuación.
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
Ahora que entendemos la definición y la sintaxis del elemento div en HTML, echemos un vistazo más de cerca a lo que hace exactamente.
¿Qué hace la etiqueta div en HTML?
La etiqueta <div> puede ayudar a organizar un archivo HTML en secciones en el back-end, pero eso no afectará cómo se muestran esas secciones en el front-end. No obstante, permite diseñar fácilmente estas secciones con CSS.
Para diseñar estas secciones con CSS, debes agregar un atributo de clase o ID al elemento div. Luego, utilizarás un selector de CSS para aplicar propiedades de estilo únicas a los elementos contenidos en el div.
Antes de sumergirnos en un ejemplo con CSS, primero veamos un ejemplo de un elemento div sin estilo.
Aquí está el HTML y el resultado:
See the Pen XWMWmYO by Christina Perricone (@hubspot) on CodePen.
Ahora que sabes que un elemento div no hace nada por sí solo, es posible que te preguntes por qué usar uno. Veremos algunos casos de uso a continuación.
¿Para qué usar la etiqueta div en HTML?
Por lo general, se utiliza el elemento div para agrupar secciones de código que deseas orientar con CSS. Puedes diseñarlos para que se vean diferentes de otras secciones de la página o para colocarlos de manera diferente. También puedes usar un atributo div y de idioma para cambiar el idioma de una sección particular de la página.
A continuación, echemos un vistazo más de cerca a estos casos de uso.
Ejemplos de uso de las etiquetas <div>
La etiqueta <div> se usa mejor para agregar estilo o para marcar la semántica común a un grupo de elementos consecutivos. Estos son algunos ejemplos de estilos o semánticas que puedes agregar con el elemento div.
1. Etiqueta <div> con atributo lang
Comencemos con el ejemplo más fácil. Digamos que el idioma predeterminado del texto en una página web es el inglés, pero una sección está en otro idioma. Para marcar esta sección en particular en una página web, simplemente pon los elementos dentro de un div. Luego, agrega un atributo de idioma y configúralo en el idioma que desees. Mira este ejemplo en español y francés:
<article lang="en">
<p>The default language of the web page is in English. But below is a sentence in French, which is marked accordingly in the code.</p>
<div lang="fr">
<p>Dans le numéro de novembre de Marie Claire, une erreur s'est glissée dans la rubrique Mode Actualités.</p>
</div>
<p>This is some text in English outside the div element. </p>
</article>
Esto establecería el idioma del encabezado y el párrafo dentro del div a la vez, por lo que no tienes que establecer el idioma de cada elemento por separado. Los elementos fuera del div permanecerían establecidos en el idioma predeterminado (español).
Ahora veamos un ejemplo de cuándo usarías un div para cambiar la apariencia de una sección de tu página web.
2. Etiqueta <div> con atributo de clase
Para cambiar el estilo del div, comenzarás de la misma manera en que lo hiciste anteriormente, pero en lugar de agregar un atributo de idioma, agregarás un atributo de ID o clase. Luego usarás el selector correspondiente para agregar el CSS que quieras.
![<< Guía básica sobre HTML y CSS para marketers [Descargar gratis] >>](https://no-cache.hubspot.com/cta/default/53/81607f16-1f47-4f2d-9363-c6ac8242f7db.png){kind=small}
Supongamos que deseas diseñar un título y un párrafo en particular en la página y dejar el resto sin estilo. Entonces, envolverías el encabezado y el párrafo individuales en un elemento div y le darías un nombre de clase. Por el bien de esta demostración, usaremos «miDiv» como el nombre de la clase.
Aquí está el HTML:
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
<p>This is some text outside the div element.</p>
Luego, en la sección principal de tu documento HTML o en una hoja de estilo externa, puedes usar el selector de clase .miDiv y definir las propiedades CSS que desees. Para esta demostración, usaremos las propiedades de borde, color de fondo, alineación de texto y color.
Aquí está el CSS:
.myDiv {
font-family: 'Avenir Next LT Pro';
font-weight: bold;
border: 5px outset #00A4BD;
color: #2D3E50;
background-color: #EAF0F6;
text-align: center;
}
Aquí está el resultado:
See the Pen Styled div by Christina Perricone (@hubspot) on CodePen.
3. Etiqueta <div> como flexbox
Ahora veamos un ejemplo de cuándo usarías la etiqueta div para cambiar el posicionamiento o el diseño de una sección de tu página web.
Digamos que quieres crear una cuadrícula de caja flexible con siete columnas. Comenzarías creando siete elementos div y luego posicionándolos dentro de otro elemento div. Agregarías la clase .flex-container a esta división principal.
Aquí está el HTML:
<body>
<h1>Flexbox Container</h1>
<p>Notice how the flex items shrink and expand as the browser is resized, but do not fill the entire container once the viewport exands beyond a particular point.</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
Luego, en la sección de encabezado del documento o en una hoja de estilo externa, usarías el selector de clase .flex-container para hacer que el contenedor sea flexible. Después de establecer la propiedad de visualización como flexible, especificarías la altura del contenedor y el color de fondo. Para diseñar los elementos flexibles dentro del contenedor, usarías el selector .flex-container > div.
Aquí está el CSS:
.flex-container {
display: flex;
height: 200px;
background-color: #00A4BD;
}
.flex-container > div {
background-color: #EAF0F6;
width: 90px;
margin: 10px;
text-align: center;
line-height: 50px;
font-size: 60px;
flex: 1 1 200px;
}
Aquí está el resultado:
See the Pen <Div> Tag as Flexbox by Christina Perricone (@hubspot) on CodePen.
Echa un vistazo a cómo se comportan el contenedor flexible y los elementos a medida que cambia el tamaño del navegador:
Los div son uno de los elementos más utilizados en HTML. Si bien tiene múltiples propósitos, el principal es agrupar elementos HTML para que puedas diseñarlos con CSS. Esto hace que el elemento div sea fundamental para personalizar tu sitio web para que se vea exactamente como lo deseas. La mejor parte es que es fácil de usar.
