Saltar la navegación

3.4.1. La etiqueta DIV

La etiqueta <div> es un elemento de bloque en HTML5 que se utiliza para crear un contenedor de contenido en una página web. Esta etiqueta puede contener otros elementos de HTML como texto, imágenes, enlaces, formularios, etc.

La principal función de la etiqueta <div> es organizar y agrupar elementos dentro de una página web para darle una estructura clara y estética. Además, se pueden aplicar estilos CSS a un contenedor <div> para personalizar su aspecto y comportamiento en la página.

Es importante destacar que la etiqueta <div> no tiene un propósito semántico específico, sino que se utiliza como un elemento genérico para agrupar contenido en la página. Por lo tanto, se recomienda utilizar etiquetas específicas para contenido específico, como por ejemplo <header>, <nav>, <article>, <footer>, etc.

La sintaxis básica de la etiqueta <div> es la siguiente:


<div>
    Contenido a agrupar
</div>

Ejemplo

index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Ejemplo de Composiciones con Etiquetas DIV</title>
    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="encabezado">
    <h1>Mi Sitio Web</h1>
    <p>Este es el encabezado de la página.</p>
</div>

<div id="contenido">
    <div id="columna-izquierda">
        <h2>Columna Izquierda</h2>
        <p>Contenido de la columna izquierda.</p>
    </div>
    <div id="columna-derecha">
        <h2>Columna Derecha</h2>
        <p>Contenido de la columna derecha.</p>
    </div>
</div>

<div id="enlaces">
    <h2>Enlaces Relacionados</h2>
    <ul>
        <li><a href="#">Enlace 1</a></li>
        <li><a href="#">Enlace 2</a></li>
        <li><a href="#">Enlace 3</a></li>
    </ul>
</div>

<div id="pie-de-pagina">
    <p>Pie de página de la página web.</p>
</div>
</body>
</html>

style.css

/* body */
body {
    font-family: Arial, sans-serif;
}

/* Estilo en bloques */
#encabezado {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

#contenido {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#columna-izquierda, #columna-derecha {
    width: 48%;
    background-color: #f7f7f7;
    margin-bottom: 20px;
    padding: 10px;
    box-sizing: border-box;
}

/* Estilos para la composición en columnas */
#columna-izquierda {
    background-color: #f2f2f2;
}

#columna-derecha {
    background-color: #e2e2e2;
}

/* Estilos para la composición de elementos relacionados */
#enlaces {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
}

#enlaces ul {
    list-style: none;
    padding: 0;
}

#enlaces li {
    margin-bottom: 5px;
}

#enlaces a {
    color: #fff;
    text-decoration: none;
}
/* Estilos para el pie de página */
#pie-de-pagina {
    background-color: #777;
    color: #fff;
    text-align: center;
    padding: 10px;
}

Tipos de composiciones

Composición en bloques

En esta composición, se utilizan etiquetas <div> para dividir el contenido en secciones separadas, como encabezado, barra lateral, contenido principal y pie de página. Esto permite una organización estructurada y facilita la aplicación de estilos a cada sección.

Ejemplo:

<div id="header">...</div>
<div id="sidebar">...</div>
<div id="main-content">...</div>
<div id="footer">...</div>

Composición en columnas

Las etiquetas <div> se usan para crear diseños de múltiples columnas en una página web. Puedes dividir el contenido en columnas y aplicar estilos específicos a cada una.

Ejemplo:

<div class="column">
    <p>Columna 1</p>
</div>
<div class="column">
    <p>Columna 2</p>
</div>
<div class="column">
    <p>Columna 3</p>

Composición de elementos relacionados

Las etiquetas <div> pueden utilizarse para agrupar elementos relacionados, como un conjunto de enlaces o botones.

Ejemplo:

<div class="links">
    <a href="#">Enlace 1</a>
    <a href="#">Enlace 2</a>
    <a href="#">Enlace 3</a>
</div>

Creado con eXeLearning (Ventana nueva)