En HTML, la etiqueta es la etiqueta más importante y se utiliza en la mayoría de los documentos. La etiqueta se considera como el contenedor para otras etiquetas HTML. Por lo tanto, se puede usar para aplicar múltiples etiquetas HTML en una parte deseada del documento.

La etiqueta también se puede usar para dividir una página HTML en varias secciones. Esta redacción tiene como objetivo guiarlo cómo se pueden usar etiquetas Div para dividir la página. Se esperan los siguientes resultados:

• ¿Cómo usamos las etiquetas div para dividir las páginas HTML en secciones horizontales??
• ¿Cómo usamos las etiquetas Div para dividir las páginas HTML en secciones verticales??

¿Cómo usamos la etiqueta div para dividir la página HTML en secciones horizontales??

En HTML, una etiqueta actúa como una sección para los datos en la página HTML. Para dividir una página en las secciones, debe escribir las etiquetas HTML requeridas dentro de la etiqueta. Veamos el ejemplo práctico a continuación para comprender la división de las páginas HTML por etiqueta.

Html

Dividir la página HTML usando la etiqueta

Sección 1
Sección 2
Seccion 3

En este código, hemos usado tres etiquetas. Estas etiquetas están asociadas con las tres clases de CSS. El código CSS utilizado en el código HTML anterior se proporciona a continuación:

CSS

div

Text-Align: Center;
tamaño de fuente: 30px;
color blanco;
relleno: 10px;
Pantalla: Flex;
Alineación de ítems: Centro;
Justify-Content: Center;
Altura: 150px;
Ancho: 98%;

.uno

Color de fondo: Limegreen;

.dos

Color de fondo: naranja;

.tres

Color de fondo: hotpink;

En la parte CSS, hemos dirigido las tres etiquetas para formatear el contenido de todos los Divs. Para dar diferentes colores a cada div, tres clases "uno","dos", y "tres" son creados.

Producción

La salida muestra que una página web se divide en tres secciones utilizando la etiqueta HTML.

¿Cómo usamos la etiqueta div para dividir la página HTML en secciones verticales??

En HTML, podemos usar la etiqueta para dividir una página web en secciones verticales. Veamos el ejemplo práctico a continuación para comprender la división vertical de una página HTML usando la etiqueta.

Html

Dividir la página HTML usando la etiqueta

Sección 1
Sección 2
Seccion 3

En este código, hemos creado tres secciones usando la etiqueta. Para una mejor presentación, hemos aplicado los siguientes CSS en las etiquetas DIV:

CSS

div

Text-Align: Center;
tamaño de fuente: 30px;
color blanco;
relleno: 10px;
Pantalla: Flex;
Alineación de ítems: Centro;
Justify-Content: Center;
Altura: 500px;
Ancho: 30%;

.uno

Color de fondo: Limegreen;
flotador izquierdo;

.dos

Color de fondo: naranja;
flotador izquierdo;

.tres

Color de fondo: hotpink;
flotador izquierdo;

En la parte CSS nos dirigimos a todos los divs y usamos diferentes propiedades para dar la altura, el ancho, el acolchado y el tamaño de la fuente de fondo al contenido de DIV. Se observa que las secciones verticales se crean con la ayuda de flotar propiedad de CSS y su valor se establece en izquierda.

Producción

La salida muestra que una página web se divide en tres secciones utilizando la etiqueta HTML.

Conclusión

En HTML, podemos dividir una página web completa en las secciones usando la etiqueta junto con el CSS. Por defecto, una etiqueta divide una página web en secciones horizontales. Sin embargo, puede usar la propiedad flotante de CSS para hacer las secciones verticales de la página web. Siguiendo esta guía, puede aplicar la etiqueta para dividir la página HTML.