Creación de Seccione div y section
Seguimos con nuestro curso de HTML5, y hoy vamos a charlar sobre cómo organizar tu página web en secciones usando las etiquetas <div> y <section>. Estas son como las cajas o habitaciones de tu casa digital: te ayudan a dividir el contenido para que todo tenga su lugar y sea más fácil de entender.
¿Qué son div y section?
Ambas etiquetas son elementos estructurales (de bloque), lo que significa que ocupan todo el ancho disponible y empiezan en una nueva línea. Sirven para agrupar contenido, pero tienen propósitos un poco diferentes:
<div>: Es una caja genérica, como un contenedor multiuso. No tiene un significado especial, solo organiza cosas.<section>: Es más específica, como una sección temática con un propósito claro (un capítulo de tu página). Tiene un significado semántico, lo que ayuda a navegadores y buscadores a entender tu estructura.
Piensa en <div> como una caja de cartón sin etiquetas y en <section> como una carpeta con un título que dice qué hay dentro.
El Contenedor div
La etiqueta <div> (de «division») es la más versátil de HTML. La usas para agrupar cualquier cosa: texto, imágenes, listas, lo que sea. No «dice» nada por sí misma, pero es perfecta para organizar o aplicar estilos con CSS más adelante.
¿Cómo se usa?
- Apertura:
<div> - Contenido: Lo que quieras agrupar.
- Cierre:
</div>
Ejemplo básico:
<div>
<h2>Mis Hobbies</h2>
<p>Me gusta programar y leer.</p>
</div>
Atributos comunes
id: Le das un nombre único para identificar este<div>.class: Un nombre reusable para agrupar varios<div>con el mismo estilo.
<div id="contenedor-principal" class="seccion-destacada">
<p>Este es un bloque especial.</p>
</div>
¿Cuándo usarlo?
- Para agrupar cosas sin un significado específico.
- Como base para diseño (con CSS).
- Cuando no estás seguro de qué otra etiqueta usar.
Secciones con section
La etiqueta <section> es más intencional. Representa una parte temática de tu página, como una sección de «Acerca de mí» o «Productos». Es parte de las etiquetas semánticas de HTML5, lo que significa que le da un contexto claro al contenido (ideal para accesibilidad y SEO).
¿Cómo se usa?
- Apertura:
<section> - Contenido: Normalmente incluye un título (
<h1>–<h6>) y contenido relacionado. - Cierre:
</section>
Ejemplo básico:
<section>
<h2>Sobre Mí</h2>
<p>Soy Juan, y me encanta aprender HTML.</p>
</section>
Resultado: Una sección clara con un título y texto relacionado.
Atributos comunes
- Igual que
<div>:idyclassson los más usados.
<section id="acerca-de" class="info-personal">
<h2>Acerca de</h2>
<p>Esto es sobre mí.</p>
</section>
¿Cuándo usarlo?
- Cuando el contenido tiene un tema definido.
- Para separar bloques importantes de tu página (como capítulos).
- Suele ir con un encabezado (
<h2>, por ejemplo) para darle sentido.
## Diferencias Clave | Etiqueta | Propósito | Semántica | Ejemplo de uso | |------------|-------------------------------|-------------------|----------------------------| | `<div>` | Agrupar sin significado | No tiene | Contenedor genérico | | `<section>`| Sección temática con sentido | Sí tiene | Parte específica de la web |
Ejemplo práctico de diferencia:
<!-- Usando div como contenedor genérico -->
<div>
<p>Texto random aquí.</p>
<img src="perrito.jpg" alt="perrito">
</div>
<!-- Usando section para algo con propósito -->
<section>
<h2>Contacto</h2>
<p>Escríbeme a juan@email.com.</p>
</section>
Combinándolas: Ejemplo Completo
Vamos a armar una página que mezcle <div> y <section> para que veas cómo trabajan juntas. Imagina que es una web personal:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Sitio Personal</title>
</head>
<body>
<!-- Contenedor principal con div -->
<div id="contenedor">
<h1>Bienvenidos a mi mundo</h1>
<!-- Sección de bienvenida -->
<section id="inicio">
<h2>Hola, soy Juan</h2>
<p>Me gusta programar y compartir lo que aprendo.</p>
</section>
<!-- Se彼此
Sección de hobbies dentro de un div -->
<div class="hobbies">
<section>
<h2>Mis Hobbies</h2>
<ul>
<li><a href="#programar">Programar</a></li>
<li>Lectura</li>
<li>Viajes</li>
</ul>
</section>
</div>
<!-- Sección de contacto -->
<section id="contacto">
<h2>Contacto</h2>
<p>Envíame un correo a: <a href="mailto:juan@email.com">juan@email.com</a></p>
</section>
</div>
</body>
</html>
¿Qué ves?
- Un
<div id="contenedor">que envuelve toda la página como caja principal. - Una
<section id="inicio">con una bienvenida. - Otra
<section>dentro de un<div class="hobbies">para los hobbies. - Una
<section id="contacto">para info de contacto.
Anidamiento y Organización
Puedes meter <div> y <section> dentro de otros para crear estructuras más complejas:
<div class="pagina">
<section id="header">
<h1>Mi Blog</h1>
</section>
<div class="contenido">
<section id="articulo1">
<h2>Primer Artículo</h2>
<p>Un texto interesante.</p>
</section>
<section id="articulo2">
<h2>Segundo Artículo</h2>
<p>Otro texto genial.</p>
</section>
</div>
</div>
- Un
<div class="pagina">contiene todo. - Una
<section id="header">para la cabecera. - Un
<div class="contenido">agrupa dos<section>con artículos.
Consejos
- Usa
<section>con títulos: Siempre incluye un<h1>–<h6>dentro para que tenga sentido semántico. <div>para diseño: Si solo estás agrupando cosas para CSS o JS,<div>es tu amigo.- No abuses: No llenes tu página de
<div>sin razón; usa<section>cuando el contenido lo justifique. - Prueba anidamiento: Crea una página con varias secciones y contenedores para practicar.
En Resumen
<div>: Un contenedor multiuso para agrupar cualquier cosa, sin significado especial.<section>: Una sección temática con propósito claro, ideal para estructurar contenido importante.
Con <div> y <section>, puedes dividir tu página en pedazos manejables, como si fueran cajones de un escritorio. ¿Te animas a hacer una web con varias secciones? .