HTML <article> Tag
We will talk about Tag Articles in this post. Wishing that it would support the demands of learning.
The HTML <article> tag is used to define a self-contained and independent piece of content that can be distributed or reused in different contexts. It represents a section of content that can be shared or syndicated across different platforms, such as news articles, blog posts, product descriptions, and reviews.
The following three articles are independent and self-contained content:
<!DOCTYPE html>
<html>
<body><article>
<h2>ServiceNow</h2>
<p>ServiceNow, Inc. engages in the provision of enterprise cloud computing solutions. The company was founded by Frederic B. Luddy in June 2004 and is headquartered in Santa Clara, CA.</p>
</article>
<article>
<h2>Tesla</h2>
<p>Tesla, Inc. engages in the design, development, manufacture, and sale of fully electric vehicles, energy generation and storage systems. Jeffrey B. Straubel founded the company Elon Reeve Musk, Martin Eberhard, and Marc Tarpenning on July 1, 2003, </p>
</article>
<article>
<h2>Netflix</h2>
<p>Netflix, Inc. is a streaming entertainment service company that provides subscription services for streaming movies and television episodes over the Internet and sending DVDs by mail. The company was founded by Marc Randolph and Wilmot Reed Hastings Jr. on August 29, 1997, </p>
</article>
</body></html>
CSS can be applied to style the <article> element in Tag Article:
<!DOCTYPE html>
<html>
<head>
<style>
.all-firm {
margin: 0;padding: 3px;
background-color: lightblue;
}
.all-firm > h1, .firms{
margin: 20px;
padding: 10px;
}.firms{
background: white;
}.firms> h2,
p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-firm">
<h1>Most Popular Compaines</h1>
<article class="firms">
<h2>ServiceNow</h2>
<p>ServiceNow, Inc. engages in the provision of enterprise cloud computing solutions. The company was founded by Frederic B. Luddy in June 2004 and is headquartered in Santa Clara, CA.</p>
</article>
<article class="firms">
<h2>Tesla</h2>
<p>Tesla, Inc. engages in the design, development, manufacture, and sale of fully electric vehicles, energy generation and storage systems. Jeffrey B. Straubel founded the company, Elon Reeve Musk, Martin Eberhard, and Marc Tarpenning on July 1, 2003, </p>
</article>
<article class="firms"> <h2>Netflix</h2>
<p>Netflix, Inc. is a streaming entertainment service company that provides subscription services for streaming movies and television episodes over the Internet and sending DVDs by mail. The company was founded by Marc Randolph and Wilmot Reed Hastings Jr. on August 29, 1997.</p>
</article>
</article></body>
</html>
Here is an another example of the article tag:
<!DOCTYPE html>
<html>
<body>
<article>
<h2>My Experience with the new iPhone</h2>
<p>I've been using the new iPhone for a few weeks now and overall, I am very impressed with it. The camera is amazing and the new features make my life easier.</p>
<h3>Pros</h3>
<ul>
<li>Great camera</li>
<li>Fast performance</li>
<li>Good battery life</li>
</ul>
<h3>Cons</h3>
<ul>
<li>Expensive</li>
<li>Limited storage capacity</li>
</ul>
<p>In conclusion, I highly recommend the new iPhone to anyone looking for a high-quality smartphone with great features. It's a bit expensive but it worth it.</p>
</article>
</body>
</html>
Uses and Definition
The Tag Article <article> indicates that the article is unique and self-sufficient.
An article should be understandable and able to be published separately from the rest of the site.
Here are some likely sources for the <article> element:
- Forum post
- Blog post
- News story
IMPORTANT: A browser does not display any particular attributes for the article element. If you wish to style the article element, you can use CSS (as shown in the example below).
Global Attributes
In HTML, the <article> tag accepts Global Attributes as well.
Event Attributes
In HTML, the <article> tag accepts Event Attributes as well.
Browser Compatibility
In the following table, the numbers indicate the version of the browser that is compatible with the element in the Tag Article.
| Element |  | |  | | |
|---|
| <article> | 6.0 | 9.0 | 4.0 | 5.0 | 11.1 |
CSS settings by default
The majority of browsers display the <article> element using the following default values for Tag Article:
article {
display: block;
}
Uses of HTML Article Tag
Some of the main uses of the <article> tag include:
- Each blog post can be wrapped in an <article> tag to indicate that it is a standalone piece of content that can be shared or distributed independently.
- The <article> tag is commonly used for news articles to define the content as a self-contained unit that can be easily shared and syndicated.
- E-commerce websites often use the <article> tag to define the product descriptions as standalone pieces of content that can be shared on different platforms.
- User reviews can be wrapped in an <article> tag to indicate that they are standalone pieces of content that can be shared or syndicated.
Do subscribe to our Newsletter below, if you want to get connected with the latest technical information on this site.
