A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.mozilla.org/es/docs/Web/HTML/Reference/Elements/section below:

<section>: El elemento de sección genérica - HTML: Lenguaje de etiquetas de hipertexto

<section>: El elemento de sección genérica

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.

Pruébalo
<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 uso

Como 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:

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.

Ejemplos Ejemplo de uso sencillo Antes
<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

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