By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

HTML Article Tag

How to use the Article element of HTML. Including useful example, and a list of allowed attributes.

Edited: 2016-01-18 05:39

The article element should be used for content which would be considered independently distributable or reusable, including the content that you don't want to be copied and included on other websites.

The Article element can be used to markup the main content on the page, such as a blog post, forum post, or news article, and so on. But only given that the content is independent from any other potential content on a page, such as the navigation, header, and footer.

Individual comments to a blog post, should be marked up using article element'(s) rather then section element'(s). Each comment should be marked up as a nested article element.

Blog comments often gets syndicated by other website. For example, i might post a comment to a blog post somewhere, and chose to include it on my own website, linking to the original blog post. In which case the article element should be used to markup individual comments on the blog, rather then section elements.

Attributes

Attribute: Value: Description:
Attributes Global Attributes Common, Event, I18n

Using Section

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>My first Website</title>
    <style type="text/css">
     article, section { /* Older browsers need this fix, to render these elements properly */
     display: block;
    }
     
     /* The below styles are only included to
        demonstrate the structure of the page visually
        for the purpose of this example
     */
     section {
     border: 1px solid #298e31;
     padding: 1em;
    }
     article {
      border: 1px solid #ffbc66;
      padding: 1em;
      margin: 1em;
     }
    </style>
  </head>

  <body>
    <article>
       <h1>Example of how to use the article element</h1>
       <p>Main blog post, article, etc..</p>
       
       <section>
        <h1>Subsection of article</h1>
        <p>A subsection of the main article.</p>

        <section>
         <h1>This is a subsection of the first subsection</h1>
         <p>This is a subsection to a subsection</p>
        </section>
       </section>

      <section>
       <article>
         <h1>Some Blog comment or forum reply</h1>
         <p>The text of the comment, or individual post in a forum thread. Note. subsections are also allowed.</p>
       </article>
       <article>
         <h1>Another Blog comment or forum reply</h1>
         <p>The text of the comment, or individual post in a forum thread. Note. subsections are also allowed.</p>
       </article>
     </article>
    </section>
  </body>

</html>