The **`<article>`** element in HTML represents self-contained content that is distributable independently from the rest of the site. Examples of content that you can include within the `<article>` element include forum posts, blog entries, user-submitted comments, or any other independent item of content.

There is no limit to the number of `<article>` elements a single document can contain. Similar to most HTML elements, the `<article>` element can be styled using CSS.

<h2>Attributes and events</h2>

The `<article>` element includes  only [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) and supports all the usual [events](https://developer.mozilla.org/en-US/docs/Web/API/Event)  supported by HTML elements.

<h2>Usage</h2>

Generally, an `<article>` element should be identified by a heading. You can do this by including one of the heading tags (`<h1>`-`<h6>`) as a child of the `<article>` element, as shown below:

```HTML
<article>
    <h1>This is the first article. 
</article>

<article>
    <h2>This is the second article. 
</article>
```

<h2>Example</h2>

The code below shows how the `<article>` element works in HTML:

<html>
  
  <head>
    <title>Article Element Demo</title>
  </head>

  <body>
    
    <section>
      <h1>Articles about Ceramics</h1>
      
      <article>
        <h3>Earthenware</h3>
        <p>Earthenware is clay fired at relatively low temperatures resulting in brittle, porous material.</p>
      </article>

      <article>
        <h3>Stoneware</h3>
        <p>Stoneware is made from a particular clay which is fired at a higher temperature resulting in a hard, stone-like material.</p>
      </article>

      <article>
        <h3>Porcelain</h3>
        <p>Porcelain comes from a refined clay which is fired at very high temperatures resulting in a hard, shiny material.</p>
      </article>
      
    </section>
  
  </body>
</html>


document.addEventListener("DOMContentLoaded", function () {
  pTag = document.querySelector("div");
  newVal = document.createElement("p");
  newVal.innerHTML = 'Hello, Hello';
  pTag.appendChild(newVal);
});

// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

var TestResult = function() {
  this.succeeded = false;
  this.reason = "";
  this.input = "";
  this.expected_output = "";
  this.actual_output = "";
};

var executeTests = function(
  userJsCode,
  userCssCode,
  userHtmlCode,
  userHtmlPage
) {
  var results = [];

  const jsdom = require("jsdom");
  const { JSDOM } = jsdom;
  const dom2 = new JSDOM(userHtmlPage, { runScripts: "dangerously" });

  const pTag = dom2.window.document.querySelector("p");

  const result = new TestResult();
  result.expected_output = "Hello World";
  result.input = "Html page";

  if (!pTag) {
    result.actual_output = "null";
    result.succeeded = false;
    result.reason = "No p tag found";
  } else {
    const pTagText = pTag ? pTag.textContent : "";
    result.actual_output = pTagText;
    if (pTagText.trim() != "Hello World") {
      result.reason = "Expected output (Hello World in a p tag) did not match";
      result.succeeded = false;
    } else {
      result.succeeded = true;
      result.reason = "Found p tag with Hello World";
    }
  }

  results.push(result);

  return results;
};

// Async Tests Example
/*
var executeTestsAsync = function(
  userJsCode,
  userCssCode,
  userHtmlCode,
  userHtmlPage
) {
  var results = [];
  return new Promise(resolve => {

    const jsdom = require("jsdom");
    const { JSDOM } = jsdom;
    const dom2 = new JSDOM(userHtmlPage, { runScripts: "dangerously" });

    if (!dom2.window.onModulesLoaded) {
      console.log("window.onModulesLoaded not found!");
    	resolve(results);
    }
    dom2.window.onModulesLoaded.then(()=>{
      const pTag = dom2.window.document.querySelector("p");

      const result = new TestResult();
      result.expected_output = "Hello World";
      result.input = "Html page";

      if (!pTag) {
        result.actual_output = "null";
        result.succeeded = false;
        result.reason = "No p tag found";
      } else {
        const pTagText = pTag ? pTag.textContent : "";
        result.actual_output = pTagText;
        if (pTagText.trim() != "Hello World") {
          result.reason = "Expected output (Hello World in a p tag) did not match";
          result.succeeded = false;
        } else {
          result.succeeded = true;
          result.reason = "Found p tag with Hello World";
        }
      }

      results.push(result);
      resolve(results);
    });
  });
};
*/

codemirror

<h2>Explanation</h2>

The code above utilizes $3$ `<article>` elements, where each element represents a particular ceramic. As shown in the example above, each `<article>` element contains content that is exclusive to itself and does not depend on any other part of the document.

Since the content contained within each `<article>` element is independent of the rest of the document, each `<article>` element can be freely distributed. This distribution may involve the content of the `<article>` elements cited on a different site or appearing in search engine queries.

>Note: For further details regarding the `<article>` element, you can check the [documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article).

What is the <article> element in HTML?

Attributes and events

Usage

Example

Explanation