The Article Article

Today, we're going to study the article element in HTML5. The article element represents an article or composition that can be used or distributed independently.

A simple usage of the article element is as follows:

<article>
    <h1>Yankees beat the Brooklyn Dodgers</h1>
    Yankees beat the Dodgers 10-2 today at Yankee Stadium.
</article>

However, some compositions can be longer and need to be broken down. In that case, section elements can be used.

<article>
    <h1>Yankees beat the Brooklyn Dodgers</h1>
    Yankees beat the Dodgers 10-2 today at Yankee Stadium..
    <section>
       <h2>The Home Run </h2>
       Babe Ruth's home run in the ninth inning helped the Yankees win...
    </section>
    <section>
       <h2>Dodgers Blame the Weather</h2>
       The Dodgers blamed the weather on the loss and pondered moving to California.
    </section> 
</article>

Sometimes, articles can have related items that are not part of the article. In that case, nested article elements can be used. For example, comments that get added to articles are not part of the article, but are still related to the article itself.

<article>
    <h1>Yankees beat the Brooklyn Dodgers</h1>
    Yankees beat the Dodgers 10-2 today at Yankee Stadium..
    <section>
       <h2>The Home Run </h2>
       Babe Ruth's home run in the nineth inning helped Yankees win...
    </section>
    <section>
       <h2>Dodgers Blame the Weather</h2>
       The Dodgers blamed the weather on the loss and pondered moving to California.
    </section>
    <section>
       <h2>Comments</h2>
       <article>
       What?! The Brooklyn Dodgers are not around anymore!
       </article>
    </section>
</article>