¿Qué es "Div" en HTML? - Recurso Wordpress

Puedes pensar en un sitio web en tres partes principales. Tiene un encabezado y pie de página con el contenido principal en el medio. Pero al mirar cualquier sitio web, puede ver que el contenido también se compone de secciones. Es probable que haya una sección sobre 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 de estilo es posible gracias al separador de contenido HTML. Mejor conocido como «div», este elemento puede dividir su sitio 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é desea usarlo en su propio sitio.

que es 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, div es un contenedor «general» 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 elemento div cuando sea posible, ya que esto hace que su código sea más accesible y más fácil de mantener.

En segundo lugar, div es un contenedor a nivel de bloque. Para comprender lo que esto significa, comparemos el elemento div con el elemento span, que es un contenedor integrado.

Existen varias diferencias clave entre un contenedor a nivel de bloque y un contenedor en línea. Por ejemplo, div siempre comienza en su propia línea mientras que span permanece en la línea (incorporado – ¿ganar?). El elemento div también es el ancho completo de la página, y el intervalo no lo es. Esto significa que si tiene varios divs seguidos, se apilarán uno encima del otro frente a usted. Por otro lado, los tramos pueden existir uno al lado del otro. La última diferencia significativa es que puede definir la altura y el ancho del elemento div, pero no puede definir el intervalo.

En tercer lugar, los elementos que se pueden incluir en un div se denominan más específicamente «contenido tangible» o «contenido de flujo». El contenido tangible 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 contenido de los documentos HTML. Por lo tanto, Anchor, Block Quote, Audio, Image, Paragraph y Header se consideran tangibles o fluidos y se pueden colocar dentro de un elemento div.

¿Dónde está la etiqueta en HTML?
?

Los elementos div van a la sección de contenido del archivo HTML. Esto está claramente etiquetado en el 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. Dentro de estas etiquetas, puede colocar los elementos que desea agrupar. A menudo aparecen 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 de un div en HTML, echemos un vistazo más de cerca a lo que hace.

¿Qué hace un div?

Marcador

técnicamente no hace nada. Puede ayudar a organizar su archivo HTML en secciones en el backend, pero no afectará cómo se muestran esas secciones en la interfaz. Sin embargo, le 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 un div.

Antes de profundizar en el ejemplo de CSS, primero echemos un vistazo a un ejemplo de un div sin estilo.

Aquí está el código HTML y el resultado:

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

Ahora que sabe que el elemento div por sí solo no hace nada, es posible que se pregunte por qué lo está usando. Veremos algunos casos de uso a continuación.

¿Por qué usar un div en HTML?

La mayoría de las veces, usará un div para agrupar las secciones de código que desea orientar con CSS. Puede diseñarlos para que se vean diferentes a otras secciones de la página o colocarlos de manera diferente. También puede usar el atributo div y language para cambiar el idioma de una sección específica de la página.

A continuación, echemos un vistazo más de cerca a estos casos de uso.

Ejemplos de etiquetas

Marcador

más adecuado para agregar estilo o 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 un elemento div.

Ejemplo 1: marcador
con el atributo Lang

Comencemos con el ejemplo más simple. Digamos que el idioma predeterminado del texto en un sitio web es el inglés, pero una sección está en un idioma diferente. Para etiquetar esta sección en particular en una página web, simplemente coloque los elementos dentro de un div. Luego agregue el atributo de idioma y configúrelo en el idioma deseado. Lo configuraré en francés para esta demostración.

Aquí está el código 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 del párrafo en el div al mismo tiempo, por lo que no necesita establecer el idioma de cada elemento por separado. Los elementos fuera del div permanecerán configurados en el idioma predeterminado (inglés).

Ahora veamos un ejemplo del uso de un div para cambiar la apariencia de una sección de una página web.

Ejemplo 2: marcador
con el atributo de clase

Para cambiar el estilo del div, comenzará de la misma manera que arriba, pero en lugar de agregar un atributo de idioma, agregará un atributo de identificación o clase. Luego usará el selector apropiado para agregar el CSS deseado.

Suponga que desea diseñar un título y un párrafo específicos en la página y dejar el resto sin escribir. Luego, envolvería un solo encabezado y párrafo en un elemento div y lo nombraría una clase. Para esta demostración, usaremos «myDiv» como nombre de clase.

Aquí está el código 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 de encabezado de su documento HTML o en una hoja de estilo externa, puede usar el selector de clase .myDiv y definir cualquier propiedad CSS. En esta demostración, usaremos el borde, el color de fondo, la alineación del texto y las propiedades de 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 división estilizada de Christina Perricone (@hubspot) en CódigoPen.

Ejemplo 3: Etiqueta
como caja flexible

Ahora veamos un ejemplo del uso de un div para cambiar el posicionamiento o el diseño de una sección de una página web.

Digamos que quiero crear una malla Flexbox con siete columnas. Comenzaría creando siete elementos div y luego colocándolos en otro elemento div. Agregaría una clase .flex-container a este div principal.

Aquí está el código 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 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 flex, especificaría la altura del contenedor y el color de fondo. Para diseñar elementos flexibles en un contenedor, usaría el selector div .flex-container>.

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

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

Eche un vistazo a cómo se comportan el contenedor y los elementos flexibles al cambiar el tamaño del navegador:

Un div estilizado crea un contenedor flexbox

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

División de código HTML

Div es uno de los elementos más utilizados en HTML. Si bien tiene múltiples propósitos, su objetivo principal es agrupar elementos HTML para que puedan diseñarse con CSS. Esto hace que el elemento div desempeñe un papel crucial en la personalización de su sitio web para que se vea exactamente como usted desea. La mejor parte es que es fácil de usar.