Baseline Widely available
El elemento de HTML <section>
representa una sección genérica independiente de un documento, que no tiene un elemento semántico más especÃfico para representarla. Las secciones siempre deben tener un tÃtulo, con muy pocas excepciones.
<h1>Choosing an Apple</h1>
<section>
<h2>Introduction</h2>
<p>
This document provides a guide to help with the important task of choosing
the correct Apple.
</p>
</section>
<section>
<h2>Criteria</h2>
<p>
There are many different criteria to be considered when choosing an Apple â
size, color, firmness, sweetness, tartness...
</p>
</section>
Atributos
Este elemento solo incluye los atributos globales.
Notas de usoComo se mencionó anteriormente, <section>
es un elemento de sección genérico, y solo se debe usar si no hay un elemento más especÃfico para representarlo. Como ejemplo, un menú de navegación deberÃa estar incluido en un elemento <nav>
, pero una lista de resultados de una búsqueda o una visualización de mapa y sus controles no tienen elementos especÃficos y podrÃan colocarse dentro de un <section>
.
También podrÃas considerar estos casos:
<article>
serÃa una mejor opción.<aside>
.<main>
.<div>
en su lugar.Para reiterar, cada <section>
debe identificarse, normalmente incluyendo un encabezado (un elemento h1 - h6) como hijo del elemento <section>
, siempre que sea posible. Vea a continuación ejemplos de dónde puede ver un <section>
sin encabezado.
<div>
<h2>Encabezado</h2>
<p>Un montón de contenido increÃble</p>
</div>
Resultado Después
<section>
<h2>Encabezado</h2>
<p>Un montón de contenido increÃble</p>
</section>
Resultado Usar una sección sin encabezado
Las circunstancias en las que es posible que veas <section>
sin un encabezado generalmente se encuentran en secciones de aplicaciones web/IU en lugar de en estructuras de documentos tradicionales. En un documento, realmente no tiene ningún sentido tener una sección separada de contenido sin un encabezado para describir su contenido. Estos tÃtulos son útiles para todos los lectores, pero particularmente útiles para los usuarios de tecnologÃas de asistencia como lectores de pantalla, también son buenos para el SEO.
Considera, sin embargo, un mecanismo de navegación secundario. Si la navegación global ya está envuelta en un elemento <nav>
, es posible que puedas envolver un menú anterior/siguiente en una <section>
:
<section>
<a href="#">ArtÃculo anterior</a>
<a href="#">Siguiente artÃculo</a>
</section>
¿O qué tal algún tipo de barra de botones para controlar tu aplicación? Puede que no necesariamente necesite un tÃtulo, pero sigue siendo una sección distinta del documento:
<section>
<button class="reply">Responder</button>
<button class="reply-all">Responder a todos</button>
<button class="fwd">Reenviar</button>
<button class="del">Eliminar</button>
</section>
Resultado
Dependiendo del contenido, incluir un encabezado también podrÃa ser bueno para el SEO, por lo que es una opción a considerar.
Resumen técnico CategorÃas de contenido Flujo de contenido, contenido de sección, contenido palpable. Contenido permitido Flujo de contenido. Omisión de etiqueta Ninguna, tanto la etiqueta inicial como la final son obligatorias. Padres permitidos Cualquier elemento que acepte flujo de contenido. Ten en cuenta que un elemento<section>
no debe ser un descendiente de un elemento <address>
. Rol ARIA implÃcito region
si el elemento tiene un nombre accesible, de lo contrario generic
Roles ARIA permitidos alert
, alertdialog
, application
, banner
, complementary
, contentinfo
, dialog
, document
, feed
, log
, main
, marquee
, navigation
, none
, note
, presentation
, search
, status
, tabpanel
Interfaz en el DOM HTMLElement
Especificaciones Compatibilidad con navegadores Véase también
<body>
, <nav>
, <article>
, <aside>
, h1, h2, h3, h4, h5, h6, <hgroup>
, <header>
, <footer>
, <address>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4