¿Cómo utilizar correctamente la etiqueta "sección" en HTML5?

Estoy tratando de crear un diseño en HTML5 y después de leer varios artículos diferentes estoy confundido. Estoy tratando de obtener información sobre cómo debería usarse.

A continuación se muestran las variaciones con las que voy y vienen:

1)

<section id="content">
      <h1>Heading</h1>
      <div id="primary">
         Some text goes here...
      </div>
   </section>

¿Puedes usar la etiqueta de sección para actuar como un contenedor?

2)

 <div id="content">
      <h1>Heading</h1>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
   </div>

¿Cuál es el método correcto para usar la <section>etiqueta?

La respuesta está en la especificación actual:

El elemento de sección representa una sección genérica de un documento o aplicación. Una sección, en este contexto, es una agrupación temática de contenido, normalmente con un encabezado.

Ejemplos de secciones serían los capítulos, las distintas páginas con pestañas en un cuadro de diálogo con pestañas o las secciones numeradas de una tesis. La página de inicio de un sitio web se puede dividir en secciones para una introducción, noticias e información de contacto.

Se anima a los autores a utilizar el elemento de artículo en lugar del elemento de sección cuando tenga sentido distribuir el contenido del elemento .

El elemento de sección no es un elemento contenedor genérico . Cuando se necesita un elemento para 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 .

Referencia:

• http://www.w3.org/TR/html5/sections.html#the-section-element
• http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

Ver también:

• http://html5doctor.com/the-section-element/
• http://www.impressivewebs.com/html5-section/

Parece que ha habido mucha confusión acerca del propósito de este elemento, pero la única cosa que está acordado es que es no un contenedor genérico, como <div>es. Debe usarse con fines semánticos, y no como un gancho CSS o JavaScript (aunque ciertamente puede tener un estilo o un "script").

Un mejor ejemplo, a mi entender, podría verse así:

<div id="content">
  <article>
     <h2>How to use the section tag</h2>
     <section id="disclaimer">
         <h3>Disclaimer</h3>
         <p>Don't take my word for it...</p>
     </section>
     <section id="examples">
       <h3>Examples</h3>
       <p>But here's how I would do it...</p>
     </section>
     <section id="closing_notes">
       <h3>Closing Notes</h3>
       <p>Well that was fun. I wonder if the spec will change next week?</p>
     </section>
  </article>
</div>

Tenga en cuenta que <div>, al ser completamente no semántico, se puede usar en cualquier parte del documento que la especificación HTML lo permita, pero no es necesario.

En la página wiki de W3 sobre la estructuración de HTML5 , dice:

<section>: Se utiliza para agrupar diferentes artículos en diferentes propósitos o temas, o para definir las diferentes secciones de un solo artículo.

Y luego muestra una imagen que limpié:

También es importante saber cómo usar la <article>etiqueta (del mismo enlace W3 anterior):

<article>está relacionado con <section>, pero es claramente diferente. Mientras que <section>es para agrupar distintas secciones de contenido o funcionalidad, <article>es para contener piezas de contenido independientes e individuales relacionadas, como publicaciones de blogs, videos, imágenes o noticias. Piénselo de esta manera: si tiene una serie de elementos de contenido, cada uno de los cuales sería adecuado para leer por sí solo, y tendría sentido distribuirlos como elementos separados en una fuente RSS, entonces <article>es adecuado para marcarlos.

En nuestro ejemplo, <section id="main">contiene entradas de blog. Cada entrada de blog sería adecuada para distribuirse como un elemento en una fuente RSS y tendría sentido cuando se leyera por sí sola, fuera de contexto, por lo que <article>es perfecta para ellos:

<section id="main">
    <article>
      <!-- first blog post -->
    </article>

    <article>
      <!-- second blog post  -->
    </article>

    <article>
      <!-- third blog post -->
    </article>
</section>

Simple ¿eh? Sin embargo, tenga en cuenta que también puede anidar secciones dentro de los artículos, cuando tenga sentido hacerlo. Por ejemplo, si cada una de estas publicaciones de blog tiene una estructura consistente de secciones distintas, entonces también puede colocar secciones dentro de sus artículos. Podría verse algo como esto:

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>

Tengo entendido que SECCIÓN contiene una sección con un encabezado que es una parte importante del "flujo" de la página (no un aparte). Las SECCIONES serían capítulos, partes numeradas de documentos, etc.

ARTÍCULO es para contenido sindicado, por ejemplo, publicaciones, noticias, etc. ARTÍCULO y SECCIÓN son completamente independientes; puede tener uno sin el otro, ya que son casos de uso muy diferentes.

Otra cosa acerca de SECCIÓN es que no debe usarla si su página solo tiene una sección. Además, cada sección debe tener un encabezado (H1-6, HGROUP, HEADING). Los encabezados tienen "alcance" dentro de la SECCIÓN, por lo que, por ejemplo, si usa un H1 en la página principal (fuera de una SECCIÓN) y luego un H1 dentro de la sección, este último será tratado como un H2.

Los ejemplos en la especificación son bastante buenos al momento de escribir.

Entonces, en su primer ejemplo, sería correcto si tuviera varias secciones de contenido que no pudieran describirse como ARTÍCULOS. (Con un punto menor de que no necesitaría el DIV #primary a menos que lo quisiera para un gancho de estilo, las etiquetas P serían mejores).

El segundo ejemplo sería correcto si eliminara todas las etiquetas de SECCIÓN; los datos de ese documento serían artículos, publicaciones o algo así.

Las SECCIONES no deben usarse como contenedores; DIV sigue siendo el uso correcto para eso, y cualquier otra caja personalizada que se le ocurra.

Definitivamente puede usar la etiqueta de sección como contenedor. Está ahí para agrupar contenido de una manera más semánticamente significativa que con un div o como dice la especificación html5:

El elemento de sección representa una sección genérica de un documento o aplicación. Una sección, en este contexto, es una agrupación temática de contenido, normalmente con un encabezado. http://www.w3.org/TR/html5/sections.html#the-section-element

El método correcto es el # 2. Usó la etiqueta de sección para definir una sección de su documento. De las especificaciones http://www.w3.org/TR/html5/sections.html :

El elemento de sección no es un elemento contenedor genérico. Cuando se necesita un elemento para 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.

eso es simplemente incorrecto: no es un envoltorio. El elemento denota una sección semántica de su contenido para ayudar a construir un esquema de documento. Debe contener un encabezado. Si está buscando un elemento de envoltura de página (para cualquier tipo de HTML o XHTML), considere aplicar estilos directamente al elemento como lo describe Kroc Camen. Si aún necesita un elemento adicional para diseñar, use un. Como explica el Dr. Mike, div no está muerto, y si no hay nada más apropiado, probablemente sea donde realmente desee aplicar su CSS.

puede comprobar esto: http://html5doctor.com/avoiding-common-html5-mistakes/