HTML Articolo Element

Esempio

L'elemento <article> contiene contenuti autonomi come articoli, post di blog, commenti degli utenti o un widget interattivo che potrebbe essere distribuito al di fuori del contesto della pagina, ad esempio tramite RSS.

  • Quando gli elementi dell'articolo sono nidificati, il contenuto del nodo dell'articolo interno deve essere correlato all'elemento dell'articolo esterno.

Un blog ( section ) con post multipli ( article ) e commenti ( article ) potrebbe assomigliare a questo.

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

Evitare l'uso non necessario

Quando il contenuto principale della pagina (escluse intestazioni, piè di pagina, barre di navigazione, ecc.) È semplicemente un gruppo di elementi. Puoi omettere <article> a favore dell'elemento <main> .

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

Invece, sostituisci l'articolo con un elemento <main> per indicare che questo è il contenuto main per questa pagina.

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

Se si utilizza un altro elemento, assicurarsi di specificare il ruolo <main> ARIA per interpretazione e rendering corretti su più dispositivi e browser non HTML5.

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

Gli appunti:

Fare clic qui per leggere la specifica HTML5 ufficiale per l'elemento <article>