<article>

The HTML <article> element defines a standalone, self-contained piece of content, like a blog post or news article, which can be independently distributed or syndicated.

`<article>` Tag

The <article> element is a semantic HTML5 tag used to represent a self-contained piece of content that can be distributed and reused independently. It is ideal for content that can stand alone, such as a blog post, news article, or user comment.

Syntax

index.html

<article>
  Article content goes here.
</article>

`<article>` Demo

Weather Forecast for Seattle

03 March 2018

Rain.

04 March 2018

Periods of rain.

05 March 2018

Heavy rain.

index.html

<article>
  <h1>Weather Forecast for Seattle</h1>
  <article>
    <h2>03 March 2018</h2>
    <p>Rain.</p>
  </article>
  <article>
    <h2>04 March 2018</h2>
    <p>Periods of rain.</p>
  </article>
  <article>
    <h2>05 March 2018</h2>
    <p>Heavy rain.</p>
  </article>
</article>

The <article> element does not have any special rendering in a browser by default. However, you can apply custom styles to it using CSS (as shown in the example below).

Purpose and Usage

The <article> tag is used to define content that is independent and self-contained.

An article should be meaningful on its own and should be shareable without depending on the rest of the webpage.

Common examples of <article> usage include:

Forum discussions
Blog entries
News articles

The <article> tag does not have any default styling in web browsers, but CSS can be used to customize its appearance.

Default CSS Settings

By default, most web browsers apply the following styles to the <article> element:

style.css

article {
  display: block;
}

Conclusion

The <article> tag is essential for structuring self-contained, reusable content that can stand alone, such as blog posts or news articles. It enhances content accessibility and shareability, making it ideal for independent pieces of information. While it has no default styling, it is a flexible element that can be customized with CSS.

<span>

The HTML <span> element serves as a generic inline container for grouping and styling portions of text or other inline elements, without imparting any semantic significance or altering the document structure.