HTML5: elements article and section

If you don't know which element to use, keep in mind their value and semantics.

Element article

This element is used with a particular content. But what does "particular" exactly mean? - The content that exists independently from the rest of the information. For example forum and blog messages, comments, news articles.

<article>
  <h2>What is CSS</h2>
  <p>CSS (Cascading Style Sheets) a language which describes the outer appearance of a document, created with the help of markup language.</p>
</article>
<article>
  <h2>CSS and HTML</h2>
  <p>Your document must have a valid HTML-code to achieve better results when using CSS</p>
</article>

Element section

This element is one of the main elements among the new ones, often contains header and footer, and is similar to div. But that's not all. If you want to use the element section correctly, add a header to it by using tags h1-h6.

<section>
  <h1>Basic knowledge</h1>
  <article>
    <h2>What is CSS</h2>
    <p> CSS (Cascading Style Sheets) - a language which describes the outer appearance of a document, created with the help of markup language.</p>
  </article>
  <article>
    <h2>CSS and HTML</h2>
    <p>Your document must have valid HTML-code to achieve better results when using CSS</p>
  </article>
</section>

When you don't need to use section:

• If you need only to set the styles - use div instead of section;
• do not use section, if it is better for the content to use header, footer, or aside;
• If the text doesn't have a header, element section is not used.