HTML Tutorial: Complete HTML Tutorial
About Lesson

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:

Browser Version
Chrome 6.0
Internet Explorer 9.0
Firefox 4.0
Safari 5.0
Opera 11.1

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:

Loading

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:

Attribute Description
class Specifies one or more class names for the element.
id Defines a unique id for the element.
style Inline CSS styling for the element.
title Additional information about the element, displayed as a tooltip.
lang Defines the language of the element’s content.
data-* Used to store custom data private to the page or application.

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:

Attribute Description
onclick Script to be run when the element is clicked.
onmouseover Script to be run when the mouse pointer moves over the element.
onmouseout Script to be run when the mouse pointer moves out of the element.
onkeydown Script to be run when a key is pressed down over the element.
onload Script to be run when the element has finished loading.These tables provide a clear and concise overview of the Global and Event Attributes that can be applied to the <article> tag, allowing for enhanced customization and interactivity.

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.