The <article> Tag in HTML

The <article> tag is a semantic HTML element used to define a self-contained composition in a document, page, application, or site. It’s intended for content that is independently distributable or reusable.

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

Example: Grouping Independent Articles with Headers and Footers

Here’s a more detailed example that includes headers, footers, and multiple sections within each article:

<article>
  <header>
    <h2>First Article</h2>
    <p>Published on January 1, 2023</p>
  </header>
  <section>
    <h3>Introduction</h3>
    <p>This is the introduction to the first article.</p>
  </section>
  <section>
    <h3>Main Content</h3>
    <p>This is the main content of the first article.</p>
  </section>
  <footer>
    <p>Author: John Doe</p>
  </footer>
</article>
<article>
  <header>
    <h2>Second Article</h2>
    <p>Published on February 2, 2023</p>
  </header>
  <section>
    <h3>Introduction</h3>
    <p>This is the introduction to the second article.</p>
  </section>
  <section>
    <h3>Main Content</h3>
    <p>This is the main content of the second article.</p>
  </section>
  <footer>
    <p>Author: Jane Doe</p>
  </footer>
</article>

Definition and Usage

The <article> tag is meant for content that forms an independent part of a document or site page. It should make sense on its own and be able to be independently distributed and reused.

Potential Uses for the <article> Tag:

• Forum posts
• Blog posts
• News stories
• User comments

Browser Support

The following table shows the browser support for the <article> tag:

Styling with CSS

You can style the <article> element using CSS. Here’s an example that adds some visual flair:

<style>
  article {
    display: block;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px;
  }
  article header, article footer {
    background-color: #f0f0f0;
    padding: 5px;
  }
  article section {
    padding: 10px;
  }
</style>

Default CSS Settings

Most browsers will display the <article> element with the following default values:

article {
  display: block;
}

Let us look at the full example.

This code snippet demonstrates how to structure two independent articles using the <article> tag, along with headers, sections, and footers. The CSS styling adds visual separation and formatting to the different parts of each article.

Now run the code below:

Global Attributes

The <article> tag supports all the Global Attributes in HTML. These attributes can be applied to all HTML elements, although they may have no effect on some elements. Here are some examples:

Event Attributes

The <article> tag also supports all the Event Attributes in HTML. These attributes can be used to define event-based functionality, such as what happens when a user clicks on the element or moves the mouse over it. Here are some examples:

These Global and Event Attributes add further flexibility and interactivity to the <article> element, allowing developers to create more dynamic and engaging web content.

Again, I apologize for the oversight, and I hope this additional information provides the comprehensive details you were looking for.

Conclusion

The <article> tag is a powerful semantic element in HTML that helps in structuring content in a meaningful way. It’s widely supported across modern browsers and offers flexibility in content organization and presentation.