how to use section and article element in html at codelent

section and article
<section>…</section>
<article>…</article>

Long documents are easier to use when they are divided into smaller parts. For example, books are divided into chapters, and newspapers have sections for local news, sports, comics, and so on. To divide long web documents into thematic sections, use the aptly named section element. Sections typically have a heading (inside the section element) and any other content that has a meaningful reason to be grouped together. The section element has a broad range of uses, from dividing a whole page into major sections or identifying thematic sections within a single article. In the following example, a document with information about typography resources has been divided into two sections based on resource type.
example:
<section>
<h2>Typography Books</h2>
<ul>
<li>…</li>
</ul>
</section>
<section>
<h2>Online Tutorials</h2>
<p>These are the best tutorials on the web.</p>
<ul>
<li>…</li>
</ul>
</section>

Use the article element for self-contained works that could stand alone or be reused in a different context (such as syndication). It is useful for magazine or newspaper articles, blog posts, comments, or other items that could be extracted for external use. You can think of it as a specialized section
element that answers the question “Could this appear on another site and make sense?” with “yes.”
To make things interesting, a long article could be broken into a number of sections, as shown here:

<article>
<h1>Get to Know Helvetica</h1>
<section>
<h2>History of Helvetica</h2>
<p>…</p>
</section>
<section>
<h2>Helvetica Today</h2>
<p>…</p>
</section>
</article>
Conversely, a section in a web document might be comprised of a number
of articles.
<section id="essays">
<article>
<h1>A Fresh Look at Futura</h1>
<p>…</p>
</article>
<article>
<h1>Getting Personal with Humanist</h1>
<p>…</p>
</article>
</section>

The section and article elements are easily confused, particularly because it is possible to nest one in the other and vice versa. Keep in mind that if the content is self-contained and could appear outside the current context, it is best marked up as an article.