El elemento section frente a div
Sepa cuándo usar section en lugar de un div simple
El elemento section frente a div es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
El elemento section
El elemento <section> agrupa contenido relacionado en una sección temática:
<section>
<h2>Contact Information</h2>
<p>Email: hello@example.com</p>
<p>Phone: (555) 555-0100</p>
</section>section frente a div
La pregunta clave es: ¿este grupo tiene un tema o un propósito que se pueda nombrar?
<section>: sí; representa una agrupación temática y debería tener un encabezado<div>: no; solo es un contenedor para aplicar estilos o ejecutar scripts
section requiere un encabezado
Cada <section> debería tener un encabezado (<h2>-<h6>):
<!-- Good: section with heading -->
<section>
<h2>Our Team</h2>
<ul>...</ul>
</section>
<!-- Bad: section without heading -->
<section class="hero"> <!-- should be a div -->
<img src="banner.jpg" alt="">
</section>Cuándo usar section
Use <section> para:
- Capítulos de un documento
- Pestañas o pasos de un asistente
- Partes de un artículo largo (Introducción, Métodos y Resultados)
- Secciones de marketing de una página de inicio (Características, Precios y Testimonios)
Cuándo usar div
Use <div> cuando solo necesite un contenedor para CSS o JavaScript sin significado semántico:
<div class="layout"> <!-- just a CSS grid container -->
<nav>...</nav>
<main>...</main>
</div>
<div id="modal"> <!-- a JavaScript-controlled modal -->
...
</div>section en un artículo largo
Use sections para crear capítulos dentro de un article:
<article>
<h1>Complete Guide to HTML5</h1>
<section>
<h2>Introduction</h2>
<p>HTML5 is the fifth version...</p>
</section>
<section>
<h2>Semantic Elements</h2>
<p>HTML5 introduced many semantic elements...</p>
</section>
<section>
<h2>Forms</h2>
<p>HTML5 greatly improved form handling...</p>
</section>
</article>Secciones de la página de inicio
Página de inicio estructurada con sections:
<main>
<section id="hero">
<h2>Build Better Web Apps</h2>
<p>The platform for modern developers.</p>
</section>
<section id="features">
<h2>Key Features</h2>
...
</section>
<section id="pricing">
<h2>Pricing</h2>
...
</section>
</main>section crea contexto para encabezados
Las sections crean nuevos contextos para los encabezados en el algoritmo de esquema de documentos de HTML5:
<section>
<h2>Chapter 1</h2> <!-- h2 within section context -->
<section>
<h3>Section 1.1</h3>
</section>
</section>
<!-- Note: the HTML5 outline algorithm was never implemented in browsers -->
<!-- In practice, heading order still depends on h1-h6 numbers, not section nesting -->aria-labelledby para sections
Asocie una section con su encabezado para los lectores de pantalla:
<section aria-labelledby="features-heading">
<h2 id="features-heading">Features</h2>
<ul>...</ul>
</section>
<!-- Screen reader: "Features section" when entering the section -->Diagrama de decisión
¿Qué elemento contenedor debe usar?
- ¿Navegación principal? →
<nav> - ¿Contenido principal de la página? →
<main> - ¿Contenido independiente? →
<article> - ¿Agrupación temática con un encabezado? →
<section> - ¿Barra lateral o contenido relacionado? →
<aside> - ¿Solo un contenedor para aplicar estilos? →
<div>
section sin encabezado: use div
Si no puede asignar un encabezado a una section, use div:
<!-- This has no heading — it is just a CSS layout container -->
<!-- Use div, not section: -->
<div class="two-column">
<div class="column">Left content</div>
<div class="column">Right content</div>
</div>Comprobación rápida
¿Cuándo debería preferir div en lugar de section?
Resumen: section frente a div
Aspectos esenciales de section frente a div:
<section>: grupo temático que debería tener un encabezado<div>: contenedor semánticamente neutro para aplicar estilos o ejecutar scripts- section crea una región de referencia con nombre para la navegación de los lectores de pantalla
- Añada
aria-labelledbypara vincular la section con su encabezado - En caso de duda, use div; siempre podrá actualizarlo más adelante
Preguntas frecuentes
¿La lección «El elemento section frente a div» es gratis?
Sí — el texto completo de «El elemento section frente a div» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «El elemento section frente a div»?
Sepa cuándo usar section en lugar de un div simple Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «El elemento section frente a div»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- header nav main y footer
- El elemento article: contenido independiente
- El elemento section frente a div
- time address y mark