HTML <article> Tag

The <article> tag in HTML is used to define a self-contained composition in a document, page, application, or site. It represents an independent piece of content that makes sense on its own and could potentially be syndicated or reused elsewhere. Think of it as a blog post, a news article, a forum post, or any other distinct, stand-alone chunk of content. It adds semantic meaning to your HTML, making it more accessible and SEO-friendly.

Syntax

<article>
  <!-- Content of the article -->
</article>

Attributes

Example

<article>
  <h2>My First Blog Post</h2>
  <p>This is the first paragraph of my blog post. It contains some interesting information.</p>
  <p>This is the second paragraph. I hope you enjoy reading it!</p>
</article>

More Examples

Example 1: Nested Articles

You can nest <article> elements within each other if the context makes sense. For example, an article discussing a broader topic could contain sections that are themselves articles.

<article>
  <h2>The History of the Internet</h2>
  <p>The Internet has a rich history. Here are some key milestones:</p>

  <article>
    <h3>The Creation of ARPANET</h3>
    <p>ARPANET was one of the earliest packet switching networks and a precursor to the internet. </p>
  </article>

  <article>
    <h3>The Birth of the World Wide Web</h3>
    <p>The World Wide Web revolutionized the internet with the introduction of hyperlinks and web browsers. </p>
  </article>

</article>

Example 2: Articles with Header and Footer

It's common to include a header (e.g., using header tag ) and footer (e.g., using footer tag) within an <article> to provide additional metadata, like the article's title, author, and date, and possible related links.

<article>
  <header>
    <h2>Traveling Tips for Beginners</h2>
    <p>Published by John Doe on October 26, 2023</p>
  </header>

  <p>Paragraph about travel tips.</p>

  <footer>
    <p>Category: Travel</p>
    <a href="#">Read More by John Doe</a>
  </footer>
</article>

Example 3: Article in a List

Articles can be part of lists. For example, blog post teasers on the homepage can be grouped as a list of article elements.

<ul>
  <li>
    <article>
      <h3>HTML Article Tag</h3>
       <p>Introduction to semantic HTML articles...</p>
      <a href="/html-article-tag">Read More</a>
     </article>
  </li>
  <li>
   <article>
    <h3>CSS Selectors</h3>
       <p>Explaining the power of CSS selectors...</p>
     <a href="/css-selectors">Read More</a>
    </article>
  </li>
</ul>

Browser Support

The <article> tag is supported by all modern browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Notes and Tips

• The <article> element is a semantic container and should be used for stand-alone content that can be distributed or reused separately.
• Avoid using the <article> tag just for styling purposes. Its main purpose is to provide semantic meaning to your HTML content.
• You can use multiple <article> tags within a page.
• Inside the <article> you can have heading elements (h1 to h6), and other related content elements.
• The <article> element is often used with other semantic elements like <header>, <footer>, and <aside> for better content structuring.
• Consider using the <section> element for grouping content which are not a self-contained composition.
• Always structure your content logically within <article> for improved accessibility and SEO.