HTML => Elementos de seccionamiento

Observaciones

Los estándares HTML5 no enumeran el elemento principal como un elemento de sección.

Elemento del artículo

El elemento <article> contiene contenido autónomo como artículos, publicaciones de blog, comentarios de usuarios o un widget interactivo que podría distribuirse fuera del contexto de la página, por ejemplo, por RSS.

Cuando los elementos del artículo están anidados, el contenido del nodo del artículo interno debe relacionarse con el elemento del artículo externo.

Un blog ( section ) con varias publicaciones ( article ), y comentarios ( article ) podría tener este aspecto.

<section>
    <!-- Each individual blog post is an <article> -->
    <article>
        <header>
            <h1>Blog Post</h1>
            <time datetime="2016-03-13">13th March 2016</time>
        </header>

        <p>The article element represents a self contained article or document.</p>
        <p>The section element represents a grouping of content.</p>

        <section>
            <h2>Comments <small>relating to "Blog Post"</small></h2>

            <!-- Related comment is also a self-contained article -->
            <article id="user-comment-1">
                <p>Excellent!</p>
                <footer><p>...</p><time>...</time></footer>
            </article>
        </section>
    </article>

    <!-- ./repeat: <article> -->

</section>

<!-- Content unrelated to the blog or posts should be outside the section. -->
<footer>
    <p>This content should be unrelated to the blog.</p>
</footer>

Evitar el uso innecesario

Cuando el contenido principal de la página (excluyendo encabezados, pies de página, barras de navegación, etc.) es simplemente un grupo de elementos. Puede omitir el <article> a favor del elemento <main> .

<article>
    <p>This doesn't make sense, this article has no real `context`.</p>
</article>

En su lugar, reemplace el artículo con un elemento <main> para indicar que este es el contenido main de esta página.

<main>
    <p>I'm the main content, I don't need to belong to an article.</p>
</main>

Si usa otro elemento, asegúrese de especificar la función <main> ARIA para una interpretación y representación correctas en múltiples dispositivos y navegadores que no sean HTML5.

<section role="main">
    <p>This section is the main content of this page.</p>
</section>

Notas:
<main> descendientes del elemento <main> no se permiten dentro de un <article>

Haga clic aquí para leer la especificación oficial de HTML5 para el elemento <article>

Elemento principal

El elemento <main> contiene el contenido principal de su página web. Este contenido es exclusivo de la página individual y no debe aparecer en ninguna otra parte del sitio. El contenido repetido, como encabezados, pies de página, navegación, logotipos, etc., se coloca fuera del elemento.

El elemento <main> solo debe usarse una vez como máximo en una sola página.
El elemento <main> no debe incluirse como descendiente de un article , aside , footer , header o elemento de nav .

En el siguiente ejemplo, estamos mostrando una única publicación de blog (e información relacionada, como referencias y comentarios).

<body>
    <header>
        <nav>...</nav>
    </header>

    <main>
        <h1>Individual Blog Post</h1>
        <p>An introduction for the post.</p>

        <article>
            <h2>References</h2>
            <p>...</p>
        </article>

        <article>
            <h2>Comments</h2> ...
        </article>
    </main>

    <footer>...</footer>
</body>

La publicación del blog se encuentra dentro del elemento <main> para indicar que este es el contenido principal de esta página (y, por lo tanto, único en todo el sitio web).
Las etiquetas <header> y <footer> son hermanos del elemento <main> .

Notas:
La especificación HTML5 reconoce el elemento <main> como un elemento de agrupación y no como un elemento de sección .
Atributos del rol ARIA : main (predeterminado) , presentation
Se recomienda agregar el atributo de función ARIA role="main" a otros elementos destinados a ser utilizados como contenido principal para ayudar a los agentes de usuario que no admiten HTML5 y también para proporcionar más contexto para aquellos que lo hacen.
El elemento <main> por defecto tiene la función principal, por lo que no es necesario proporcionarlo.

Haga clic aquí para leer la especificación oficial de HTML5 para el elemento <main>

Elemento de navegación

El elemento <nav> está destinado principalmente a ser utilizado para las secciones que contienen los principales bloques de navegación para el sitio web, esto puede incluir enlaces a otras partes de la página web (por ejemplo, anclas para una tabla de contenido) u otras páginas por completo.

Artículos en línea

Lo siguiente mostrará un conjunto en línea de hipervínculos.

<nav>
    <a href="https://google.com">Google</a>
    <a href="https://www.yahoo.com">Yahoo!</a>
    <a href="https://www.bing.com">Bing</a>
</nav>

Use los elementos de la lista cuando sea necesario

Si el contenido representa una lista de elementos, utilice un elemento de lista para mostrar esto y mejorar la experiencia del usuario.

Tenga en cuenta el role="navigation" , más sobre esto a continuación.

<nav role="navigation">
    <ul>
        <li><a href="https://google.com">Google</a></li>
        <li><a href="https://www.yahoo.com">Yahoo!</a></li>
        <li><a href="https://www.bing.com">Bing</a></li>
    </ul>
</nav>

Evitar el uso innecesario

<footer> elementos <footer> pueden tener una lista de enlaces a otras partes del sitio (preguntas frecuentes, T&C, etc.). El elemento de pie de página solo es suficiente en este caso, no es necesario que envuelva más sus enlaces con un elemento <nav> en el <footer> .

<!-- the <nav> is not required in the <footer> -->
<footer>
    <nav>
        <a href="#">...</a>
    </nav>
</footer>

<!-- The footer alone is sufficient -->
<footer>
    <a href="#">...</a>
</footer>

Notas:
<main> descendientes del elemento <main> no están permitidos dentro de un <nav>
Se recomienda agregar el role="navigation" ARIA role="navigation" al elemento <nav> para ayudar a los agentes de usuario que no admiten HTML5 y también para proporcionar más contexto para aquellos que lo hacen.
<nav role="navigation"></nav>

Lectores de pantalla: (software que permite a los usuarios ciegos o discapacitados visuales navegar por el sitio)
Los agentes de usuario, como los lectores de pantalla, interpretarán el elemento <nav> diferente en función de sus requisitos.
Podría dar al elemento <nav> una prioridad más alta al renderizar la página
Podría retrasar la prestación del elemento.
Podría adaptar la página de una manera específica para adaptarse a las necesidades del usuario.
Ejemplo: haga que los enlaces de texto dentro de los elementos <nav> más grandes para una persona con discapacidad visual.

Haga clic aquí para leer la especificación oficial de HTML5 para el elemento <nav>

Elemento de sección

El elemento <section> representa una sección genérica para agrupar temáticamente el contenido. Normalmente, cada sección debe poder identificarse con un elemento de encabezado como elemento secundario de la section .

Puede utilizar el elemento <section> dentro de un <article> y viceversa.
Cada sección debe tener un tema (un elemento de encabezado que identifique esta región)
No utilice el elemento <section> como un 'contenedor' de estilo general.
Si necesita un contenedor para aplicar el estilo, use un <div> lugar.

En el siguiente ejemplo, mostramos una única publicación de blog con varios capítulos, cada capítulo es una sección (un conjunto de contenido agrupado temáticamente, que se puede identificar por los elementos del encabezado en cada sección) .

<article>
    <header>
        <h2>Blog Post</h2>
    </header>
    <p>An introduction for the post.</p>
    <section>
        <h3>Chapter 1</h3>
        <p>...</p>
    </section>
    <section>
        <h3>Chapter 2</h3>
        <p>...</p>
    </section>
    <section>
        <h3>Comments</h3> ...
    </section>
</article>

Notas:
Los desarrolladores deben usar el elemento de artículo cuando tenga sentido sindicar los contenidos del elemento.

Haga clic aquí para leer la especificación oficial de HTML5 para el elemento <main>

Elemento de encabezado

El elemento <header> representa el contenido introductorio para su antepasado más cercano que secciona el contenido o la sección del elemento raíz. Un <header> normalmente contiene un grupo de ayudas introductorias o de navegación.

Nota: El elemento de encabezado no es el contenido de sección; No introduce una nueva sección.

Ejemplos:

<header>
  <p>Welcome to...</p>
  <h1>Voidwars!</h1>
</header>

En este ejemplo, el <article> tiene un <header> .

<article>
  <header>
    <h1>Flexbox: The definitive guide</h1>
  </header>
  <p>The guide about Flexbox was supposed to be here, but it turned out Wes wasn’t a Flexbox expert either.</p>
</article>

Recomendación propuesta del W3C

Elemento de pie de página

El elemento <footer> contiene la parte del pie de página de la página.

Aquí hay un ejemplo para el elemento <footer> que contiene p etiqueta de párrafo.

<footer>
    <p>All rights reserved</p>
</footer>

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

HTML
Elementos de seccionamiento

Buscar..

Observaciones

Elemento del artículo

Evitar el uso innecesario

Elemento principal

Elemento de navegación

Artículos en línea

Use los elementos de la lista cuando sea necesario

Evitar el uso innecesario

Elemento de sección

Elemento de encabezado

Ejemplos:

Elemento de pie de página