🚀 Your All-in-One Toolbox — 90+ Free Online Tools
Logo

HTML article Tag

Learn about the HTML <article> tag and how it's used to define self-contained, independent pieces of content within a webpage.

This content should make sense on its own and be suitable for distribution independently (e.g., in an RSS feed). Examples of content that could be wrapped in an <article> tag include: - A blog post - A forum post - A news story - A user-submitted comment - An interactive widget or gadget

Basic Syntax

html
<article>
  <h2>Article Title</h2>
  <p>This is the content of the article. It can include paragraphs, images, lists, etc.</p>
  <footer>
    <p>Posted on <time datetime="2023-10-27">October 27, 2023</time></p>
  </footer>
</article>

Key Characteristics

- Self-Contained: The content within an <article> should be distributable on its own.

- Independent: It should be understandable in isolation from the rest of the page.

- Often Has a Heading: Typically, an <article> will include a heading (e.g., <h1>-<h6>) as a child element.

Nesting Articles

It's possible to nest <article> elements. In such cases, the inner <article> elements represent content that is related to the outer <article>'s content. For example, user comments on a blog post could each be an <article> nested within the main blog post <article>.
html
<article>
  <h1>Main Blog Post Title</h1>
  <p>Main blog post content...</p>

  <section class="comments">
    <h2>Comments</h2>
    <article class="comment">
      <h3>Comment by User A</h3>
      <p>This is a great post!</p>
    </article>
    <article class="comment">
      <h3>Comment by User B</h3>
      <p>I have a question about...</p>
    </article>
  </section>
</article>

<article> vs. <section> vs. <div>

- <article>: For complete, self-contained compositions that are independently distributable.

- <section>: For thematically grouping content, typically with a heading. A section is a part of a larger whole.

- <div>: A generic container with no semantic meaning, used for styling or grouping when no other semantic element is appropriate. Choose <article> when the content is a standalone piece. If it's a thematic grouping within a larger piece of content, <section> might be more appropriate.

Benefits

- Improved Semantics: Clearly defines the structure of your content for browsers, search engines, and assistive technologies.

- Accessibility: Helps screen readers and other assistive tools understand the layout and flow of content, allowing users to navigate more easily.

- SEO: Semantic markup can help search engines better understand and index your content, potentially improving visibility.

- Maintainability: Using semantic tags makes your HTML easier to read and understand for other developer
Back