<section> en HTML5La etiqueta <section> es un elemento de bloque en HTML5 que se utiliza para delimitar secciones o áreas temáticamente relacionadas de un documento web. Es importante en la estructuración de la semántica de una página, proporcionando mayor claridad y organización tanto para los desarrolladores como para los motores de búsqueda y tecnologías asistivas.
<section>La etiqueta <section> en sí no tiene atributos específicos más allá de los atributos globales comunes a todos los elementos HTML. A continuación, se mencionan algunos de estos atributos globales más importantes:
Atributo id
<section id="introduccion"></section>Atributo class
<section class="contenido"></section>Atributo style
<section style="background-color:lightgrey;"></section>Atributo title
<section title="Sección de introducción"></section>Atributo lang
<section lang="es"></section><section> en HTML5La etiqueta <section> se utiliza para agrupar contenido temáticamente relacionado en un documento. Cada sección puede tener su propio encabezado y considerarse un área independiente del documento, aunque esté contextualizada dentro de la página más grande.
Sección del Encabezado del Artículo
<section>
<h2>Introducción a HTML5</h2>
<p>HTML5 es la última revisión del modelo de renovación de HTML...</p>
</section>Secciones Distintas en una Página de Noticias
<section id="noticias-recientes">
<h2>Noticias Recientes</h2>
<article>
<h3>Título de la Noticia 1</h3>
<p>Resumen de la noticia 1...</p>
</article>
<article>
<h3>Título de la Noticia 2</h3>
<p>Resumen de la noticia 2...</p>
</article>
</section>Una Página Web con Múltiples Secciones
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Página Web</title>
</head>
<body>
<header>
<h1>Bienvenido a Mi Página Web</h1>
</header>
<nav>
<ul>
<li><a href="#sobre-mi">Sobre Mí</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
<section id="sobre-mi">
<h2>Sobre Mí</h2>
<p>Este es un pequeño resumen sobre mí...</p>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<p>Aquí están algunos de mis proyectos recientes...</p>
</section>
<section id="contacto">
<h2>Contacto</h2>
<p>Puedes contactarme a través de...</p>
</section>
<footer>
<p>© 2023 Mi Página Web</p>
</footer>
</body>
</html>En resumen, la etiqueta <section> es muy útil para estructurar contenido relacionado temáticamente en un documento web, y sus atributos globales permiten personalizar y manejar estas secciones de manera efectiva.