The article element represents a block of information on a page that can be viewed separately and used independently from other blocks. For example, it can be a post on a forum or an article in a blog, an online magazine, a user comment.
One article element can contain multiple article elements. For example, we can wrap an entire blog article in an article element, and that element will contain other article elements that represent comments on that blog article. That is, a blog article can be considered by us as a separate semantic unit, and at the same time, comments can also be considered separately, regardless of other content.
Using article on the example of a blog post with comments:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic markup in HTML5</title>
</head>
<body>
<article>
<h2>Lorem ipsum</h2>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat ...
</div>
<div>
<h3>Comments</h3>
<article>
<h4>Not bad</h4>
<p>Norm article</p>
</article>
<article>
<h4>Delirium</h4>
<p>I didn't like it...</p>
</article>
<article>
<h4>Unclear</h4>
<p>What is it all about?</p>
</article>
</div>
</article>
</body>
</html>
Here, the entire article can be placed in an article element, and at the same time, each individual comment also represents a separate article element.
When using article, be aware that each article element must be identified by including an h1-h6 heading in it.