HTML Div Etiqueta | explicado

El DIV se refiere a la división o sección en un documento HTML. Es un contenedor vacío que puede contener varios elementos HTML. El propósito del DIV es agregar estilos CSS específicos a los elementos utilizados en la etiqueta DIV respectiva. La etiqueta DIV pertenece a la categoría de elementos del bloque HTML y, por lo tanto, comienza una nueva línea cada vez que se inicia.

Un DIV puede contener varias otras divisiones y cada DIV contiene varias propiedades de estilo. El propósito principal de un DIV es hacer un grupo de tipos similares de elementos para que puedan diseñarse fácilmente. Debido a su funcionalidad extendida, se conoce como la etiqueta clave al desarrollar una página web utilizando HTML. En este artículo, hemos demostrado el funcionamiento de la etiqueta Div, y se ilustran algunos ejemplos para mostrar el uso de la etiqueta Div.

Cómo funciona la etiqueta HTML Div

La etiqueta Div comprende etiquetas de inicio y cierre y la siguiente sintaxis se usa para crear un DIV en HTML.

Cualquier cosa escrita entre estas etiquetas adoptará los valores establecidos para este div. Para una comprensión básica, se crea un DIV utilizando el siguiente código.

Se crea un div en la página web

esto es div

El código se describe de la siguiente manera:

- El título de la página será "Div Tag"

- El fondo del cuerpo está configurado como "verde marino de mar"

- Se crea un div y su color de fondo está establecido en "amarillo"

- Se crea un párrafo en la etiqueta Div

La imagen del código se proporciona a continuación:

La salida de la página web se muestra a continuación:

Las siguientes observaciones se pueden hacer a partir de la salida anterior:

- La etiqueta Div crea una nueva línea

- Ocupa todo el ancho (si el límite no está configurado) de la página

Cómo usar la etiqueta Div HTML

El funcionamiento básico de la etiqueta Div se explica en la sección anterior. Sin embargo, esta sección explica el uso de la etiqueta HTML div en varios escenarios. Como se indicó anteriormente, los elementos múltiples están contenidos en un DIV para diseñar todos estos elementos de manera similar. Como el estilo es posible con CSS, se recomienda usar una clase CSS en línea o externa.

Ejemplo 1: Uso de una etiqueta HTML DIV con múltiples clases de CSS

Se puede usar una etiqueta Div con múltiples clases de CSS. Para practicar esta funcionalidad, se utiliza el siguiente código HTML:

El div uso de dos clases de CSS

Bienvenido a Linuxhint

Un valle de tecnología

El código se describe a continuación:

- Se crean dos clases de CSS llamadas "Color" y "Misc".

- La clase de color define "color de fondo" y "color de fuente", mientras que la clase miscelánea contiene el "ancho", el "relleno" y el "estilo de fuente"

- Se crea un DIV con un atributo de clase y usa el nombre de ambas clases en él

- Tres elementos HTML

,

y se usan en el div

Nota: Al usar múltiples nombres de clases en un atributo de clase de la etiqueta DIV, debe agregar un espacio entre los nombres de clases para diferenciar ambas clases.

La imagen del código se proporciona a continuación:

A continuación se muestra la salida del código HTML en una página web:

Ejemplo 2: Uso de múltiples etiquetas DIV

Usar múltiples div es la parte confusa de la etiqueta HTML Div. El siguiente código HTML se refiere a usar múltiples divs con varios

Primer Div

Bienvenido a Linuxhint

Segundo Div

proveedor de contenido líder

El código se describe como:

- Creó dos clases de CSS llamadas "Primero" y "Segundo"

- La "primera clase" define "color de fondo", "color de la fuente", ancho, "flotación"

- La "segunda" clase tiene propiedades como "color de fondo", "ancho", "flotación"

- Un DIV se inicializa con un atributo de clase y "primero" como el valor del atributo

- Otro div se crea con "segundo" como un valor del atributo de clase

La imagen del código se muestra a continuación:

La salida de la página web se muestra a continuación:

Conclusión

La etiqueta Div en HTML se refiere a crear un contenedor que le permite hacer un grupo de elementos HTML que se puedan diseñar de la misma manera. Este artículo demostró el mecanismo de trabajo de la etiqueta Div. Además, se dicen varios ejemplos que muestran cómo se puede usar una etiqueta HTML DIV en varios escenarios.