<Article> Contents element HTML CSS Tag Learning

The <article> HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

Definition and Usage:

The <article> tag specifies independent, self-contained content.

An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

Potential sources for the <article> element:

Blog post
Forum post
News story

Example:

Html <article>:

<article class="Weather">
<h1>Weather predict for London</h1>
<article class="day-weather">
<h2>09 April 2022</h2>
<p>Start Rain</p>
</article>
<article class="day-weather">
<h2>10 April 2022</h2>
<p>Light Rain</p>
</article>
<article class="day-weather">
<h2>11 April 2022</h2>
<p>More Rain </p>
</article>
</article>

CSS <article> Example:

<style>
.Weather {
margin: 0;
padding: .3rem;
background-color: #eee;
font: 1rem 'Fira Sans', sans-serif;
}

.Weather > h1,
.day-Weather {
margin: .5rem;
padding: .3rem;
font-size: 1.2rem;
}

.day-weather {
background: right/contain content-box border-box no-repeat
url('/media/examples/rain.svg') white;
}

.day-weather > h2,
.day-weather > p {
margin: .2rem;
font-size: 25px;
}
</style>

Output:

Weather predict for London

09 April 2022

Start Rain

10 April 2022

Light Rain

11 April 2022

More Rain

Default CSS Settings

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

article {
  display: block;
}

Try it

AR3school

Article Contents element HTML CSS Tag Learning