DEV Community

Amir Anvari
Amir Anvari

Posted on

HTML <article> Tag

Three articles with independent, self-contained content:

`

Google Chrome

Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!

Mozilla Firefox

Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.

Microsoft Edge

Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.

`

More "Try it Yourself" examples below.

*Definition and Usage
*

The 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 element:

Forum post
Blog post
News story
Note: The element does not render as anything special in a browser. However, you can use CSS to style the element (see example below).

Global Attributes

The tag also supports the Global Attributes in HTML.

Event Attributes
The tag also supports the Event Attributes in HTML.

*More Examples
*

`

.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}

.all-browsers > h1, .browser {
margin: 10px;
padding: 5px;
}

.browser {
background: white;
}

.browser > h2, p {
margin: 4px;
font-size: 90%;
}

Most Popular Browsers

<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>


<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>


<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
Enter fullscreen mode Exit fullscreen mode


`

*Default CSS Settings
*

Most browsers will display the element with the following default values:

article {
display: block;
}

Top comments (0)