Etiquetas de sección HTML5 anidadas

¿Es esta una forma correcta de usar el <section> ¿etiqueta?

<section id="container">
   <section id="outer">
      <section id="inner">
      </section>
   </section>
</section>

Estoy tratando de averiguar si debo o no usar solo una identificación de sección y dejar las otras dos secciones como solo divs.

Si solo está usando estos elementos para colocar cosas en alguna posición/diseñar cosas, entonces probablemente debería usar divs.

La sección es realmente para agrupar contenido que debe estar unido; en realidad, no debería tener una sección sin un elemento de título (H1 o similar) que describa lo que contiene la sección… creo que algunas personas han cometido errores similares en el pasado:

http://html5doctor.com/the-section-element/

De la especificación:

NOTA: El elemento de sección no es un elemento contenedor genérico. Cuando se necesita un elemento con fines de estilo o como conveniencia para la creación de scripts, se recomienda a los autores que utilicen el elemento div en su lugar. Una regla general es que el elemento de sección es apropiado solo si el contenido del elemento se enumeraría explícitamente en el esquema del documento.

Habiendo dicho eso, es perfectamente aceptable anidar elementos de sección. Tal vez algo como:

<section>
    <h1>Portishead</h1>
    <p>Portishead are a cool band from Bristol</p>
    <section>
        <h1>Dummy (album)</h1>
        <p>some info....</p>
        <img src="https://stackoverflow.com/questions/7041283/..." />
    </section>
    <section>
        <h1>Portishead (album)</h1>
        <p>some other info info....</p>
        <img src="https://stackoverflow.com/questions/7041283/..." />
    </section>
</section>

Nota:

Mi respuesta está muy desactualizada y ya no contiene buenos consejos debido a los cambios en HTML que se han producido en la última década. Dejaré esta respuesta tal como está para el contexto histórico, pero tenga en cuenta que la estructura sugerida no es la mejor práctica, particularmente en torno al uso de la obsoleta esquema del documento.

Respuesta corta: el código que ha proporcionado no es semánticamente válido.

Respuesta larga:

section los elementos están destinados a marcar secciones de contenido Cada sección de contenido (es decir, Introducción, Resumen, contenido, conclusión) podría tener subsecciones.

Si está utilizando esos elementos con fines estructurales, debería utilizar div elementos en su lugar. Son semánticamente insignificantes.

Esto sería más semántico:

<section id="introduction">
  <div id="outer">
    <div id="inner">
      Some content
    </div>
  </div>
</section>

Esta sería una forma semántica de marcar secciones anidadas:

<section id="content">
  <h1>Fizz Buzz</h1>
  <section id="chapter-1">
    <h1>Foo bar baz</h1>
    ...
  </section>
  <section id="chapter-2">
    <h1>Lorem ipsum dolor</h1>
    ...
  </section>
  ....
</section>

Mi recomendación personal sería utilizar la estructura semántica tanto como sea posible cuando cree diseños HTML5. Como han indicado otros carteles, los elementos de la sección de anidamiento son totalmente aceptablessin embargo, solo debe asegurarse de que tenga sentido hacerlo.

Yo personalmente uso algunos patrones que he reunido en base a algunas investigaciones que he realizado en el transcurso del último año más o menos. La situación más común para usar elementos de sección anidados es proporcionar roles ARIA para el contenido principal del documento (consulte el ejemplo de “diseño del sitio” a continuación)

Nota: se supone que los elementos body/html están presentes, etc.

Plano del sitio

<header class="header" role="banner">
  ....
</header>

<!-- used once per page, implies role="main" -->   
<main> 
  <!-- declares page content to be a document and not a web app -->
  <section id="wrapper" role="document"> 

   <section class="hero">
      ....
   </section>
      ....
   <section class="content">

   </section>

  </section>
</main>

<footer class="footer" role="footer">

      ....

</footer>

Diseño de contenido de una sola página

Nota: este diseño se aplica a una página con un singular/tema/objeto y no es adecuado para todos los casos de uso

<article>
  <header>
    <h1>Page Headline/Title</h1>
  </header>
  <section class="page-content">
      ....
  </section>
  <!-- if this is a post or something with metadata/authorship info... -->
  <footer>
    ....
  </footer>
</article>

Utilizo la etiqueta para el nombre de la clase en los elementos de encabezado/pie de página del shell, así como en los roles de referencia para asegurarme de que siempre puedo distinguirlos de otros elementos de encabezado/pie de página dentro de la página (por ejemplo, alcance fácil de CSS).

Referencias

• rol=”documento” https://www.w3.org/TR/wai-aria/roles#document

  Una región que contiene información relacionada que se declara como contenido del documento, a diferencia de una aplicación web.

• “Porqué el <main> elemento no necesita un atributo de rol”: https://www.w3.org/TR/2012/WD-html-main-element-20121217/

  El elemento principal formaliza la práctica común de identificación de la sección de contenido principal de un documento utilizando los valores de identificación como ‘contenido’ y ‘principal’. También define un elemento HTML que incorpora la semántica y la función del hito WAI-ARIA role=main.

• “W3.org/Wiki explicación de la anidación <section> elementos”- https://www.w3.org/WAI/GL/wiki/Using_HTML5_section_element

  El elemento de sección es un contenedor para el contenido del documento que tiene un tema relacionado y representa la sección de un documento que se agrupa en torno a un concepto general. Todo dentro de un elemento de sección está relacionado. También se pueden anidar elementos de sección si es necesario. El elemento de sección es un elemento semántico genérico que se puede usar para combinar partes de un documento en unidades discretas que están relacionadas de alguna manera. Por ejemplo, el elemento de sección puede crear elementos dentro de un esquema de un documento, o dividir el contenido de la página en partes relacionadas (como una Introducción) seguidas de información general sobre el tema.

Una forma útil de pensar en esto es considerar cómo un lector de pantalla vería su sitio. Imagina (y de hecho deberías probar esto por ti mismo) el lector de pantalla anunciando la palabra ‘sección’ antes de leer el contenido dentro de tu <section> etiqueta.

Si eso no tiene sentido lógico, entonces tal vez haya pedido mal sus artículos.

Verificar papel de la región de aria.

No sé exactamente cómo los lectores de pantalla leen las secciones anidadas, pero si las secciones lógicas de su página no tienen una jerarquía, entonces su HTML tampoco debería tenerla.

p.ej. (esto está destinado a representar la estructura HTML)

BUENO

section aria-label="dogs"
   section aria-label="labradors"
   section aria-labels="terriers"

section aria-label="cats"
   section aria-label="sphynx"
   section aria-label="persian"

MALO

Sección utilizada únicamente para agrupar otras dos secciones, pero sin un significado real propio como ‘sección’.

section style="display: flex; flex-direction: row"
   section aria-label="news"
   section aria-labels="sport"

HTML5 también permite configuraciones como:

<section>

<header>Header of section</header>
<aside><ul><li></li></ul></aside><!-- previously known as sidebar -->
<footer>Footer of section</footer>

</section>

varias veces en la misma página, por lo que no tiene solo un encabezado, es mucho más profundo que esto, pero vale la pena echarle un vistazo.

Revisar la http://gsnedders.html5.org/outliner/

Un método actualizado (hasta donde yo lo entiendo) podría ser algo como esto:

<main id="content">
  <div id="inner-wrapper">
    <section>
      <h1>Section Title</h1>
      ...
    </section>
    <section>
      <h1>Section Title</h1>
      ...
    </section>
  </div>
</main>

main {
  width: 100%;
  ...
  ...
}

#inner_wrapper {
  max-width: 80%;
  margin: 0 auto;
}

Ver: http://www.w3.org/TR/html-main-element/, http://www.sitepoint.com/html5-main-element/ o http://html5doctor.com/el-elemento-principal/ para más información.