¿Qué es 'Div' en HTML?

Site owner learning what a div is.jpegkeepProtocol

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, puede 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», este elemento puede dividir su página web en secciones para que pueda orientarlas con 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
en HTML?

En HTML, la etiqueta

es un contenedor genérico a nivel de bloque para otros elementos.

Veamos algunos términos clave en esta definición.

Primero, un div es un contenedor «genérico» porque no describe el contenido que contiene. Otros elementos como

describen claramente el contenido que contienen y se conocen como elementos HTML semánticos. Siempre debe usar un elemento semántico sobre un div cuando sea posible porque hace que su código sea más accesible y más fácil de mantener.

En segundo lugar, un div es un contenedor a nivel 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 nivel de bloque y un contenedor en línea. Por ejemplo, un div siempre comienza en su propia línea, mientras que un intervalo permanece en la línea (en línea – ¿Consíguelo?). Un div también ocupa todo el ancho de la página y un lapso no. Eso significa que si tiene varios divs seguidos, aparecerán apilados uno encima del otro en la parte frontal. Los tramos, por otro lado, pueden existir uno al lado del otro. La última gran diferencia es que puede definir la altura y el ancho de un div, pero no puede definir un lapso.

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 colocar dentro de un div.

¿Dónde va una etiqueta
en HTML?

Los divs van en la sección del cuerpo de un archivo HTML. Esto está claramente marcado por etiquetas en un archivo HTML. (Nota: estas etiquetas a menudo se omiten en los editores de código, como CodePen).

Para crear un elemento div, debe usar una etiqueta de apertura y cierre. Puede colocar los elementos que desea 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 div?

La etiqueta

técnicamente no hace nada. 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. Sin embargo, permite diseñar fácilmente estas secciones con CSS.

Para diseñar estas secciones con CSS, debe agregar un atributo de clase o ID al elemento div. A continuación, utilizará 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:

ver la pluma XWMWmYO de Christina Perricone (@hubspot) sobre CódigoPen.

Ahora que sabe que un elemento div no hace nada por sí solo, es posible que se pregunte por qué usaría uno. Veremos algunos casos de uso a continuación.

¿Por qué usar div en HTML?

Por lo general, usará el elemento div para agrupar secciones de código que desea orientar con CSS. Puede diseñarlos para que se vean diferentes de otras secciones de la página o para colocarlos de manera diferente. También puede 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 etiquetas

La etiqueta

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 puede agregar con el elemento div.

Ejemplo 1: Etiqueta
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 coloque los elementos dentro de un div. Luego, agregue un atributo de idioma y configúrelo en el idioma que desee. Por el bien de esta demostración, lo configuraré en francés.

Aquí está el HTML:

 
   <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 tiene que establecer el idioma de cada elemento por separado. Los elementos fuera del div permanecerían establecidos en el idioma predeterminado (inglés).

Ahora veamos un ejemplo de cuándo usaría un div para cambiar la apariencia de una sección de su página web.

Ejemplo 2: etiqueta
con atributo de clase

Para cambiar el estilo del div, comenzará de la misma manera que lo hizo anteriormente, pero en lugar de agregar un atributo de idioma, agregará un atributo de ID o clase. Luego usará el selector correspondiente para agregar el CSS que desee.

Supongamos que desea diseñar un título y un párrafo en particular en la página y dejar el resto sin estilo. Luego, envolvería el encabezado y el párrafo individuales en un elemento div y le daría un nombre de clase. Por el bien de esta demostración, usaremos «myDiv» 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 su documento HTML o en una hoja de estilo externa, puede usar el selector de clase .myDiv y definir las propiedades CSS que desee. 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:

ver la pluma div con estilo de Christina Perricone (@hubspot) sobre CódigoPen.

Ejemplo 3: Etiqueta
como Flexbox

Ahora veamos un ejemplo de cuándo usaría div para cambiar el posicionamiento o el diseño de una sección de su página web.

Digamos, quiero crear una cuadrícula de caja flexible con siete columnas. Comenzaría creando siete elementos div y luego colocándolos dentro de otro elemento div. Agregaría 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 principal de mi documento o en una hoja de estilo externa, usaría el selector de clase .flex-container para hacer que el contenedor sea flexible. Después de establecer la propiedad de visualización en flexible, especificaría la altura del contenedor y el color de fondo. Para diseñar los elementos flexibles dentro del contenedor, usaría 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:

ver la pluma Etiqueta

como Flexbox de Christina Perricone (@hubspot) sobre CódigoPen.

Eche un vistazo a cómo se comportan el contenedor flexible y los elementos a medida que se cambia el tamaño del navegador:

Div con estilo crea un contenedor de caja flexible

Puede encontrar ejemplos similares en la publicación Aquí está la diferencia entre Flexbox, CSS Grid y Bootstrap.

Dividiendo tu HTML

Los divs 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 pueda diseñarlos con CSS. Esto hace que el elemento div sea fundamental para personalizar su sitio web para que se vea exactamente como lo desea. La mejor parte es que es fácil de usar.

¿Qué es la etiqueta en HTML?

¿Qué es la etiqueta
en HTML?