Article vs Section

Stand alone, or not

<article>

Think of articles as a chunk of information that could stand on its own if needed. For instance an article or story inside a newspaper, or news website. In each of these you would find many articles.

Here is the official explanation of an article from W3.org:

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

See documentation on the article tag

The following are examples of an article:

<section>

A section is a group of related information, which usually starts with a heading (h1-h6). This could be a section containing related articles, a section of content inside an article, or a section of content unrelated to articles at all. A section is not a group of content that can stand on its own, but rather is usually a piece of a larger whole.

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.

See documentation on the article tag

The following is an example of section tags:

<article>
   <h2>Apples</h2>
   <p>Tasty, delicious fruit!</p>
   <p>Here is some more related information about apples...</p>
</article>
<article>
   <h2>Best time to plant orange trees</h2>
   <p>Time of the year matters!</p>
   <p>Here is some more related information about planting orange trees...</p>
</article>
<article>
   <h2>Money saving tips for those running a farm</h2>
   <p>You have more resources than you think!</p>
   <p>Here is some more related information about saving money as a farmer...</p>
</article>
<article>
   <h2>Apples</h2>
   <p>Tasty, delicious fruit!</p>
   <p>The apple is the pomaceous fruit of the apple tree.</p>
   <section>
      <h3>Red Delicious</h3>
      <p>These bright red apples are the most common found in many
  supermarkets.</p>
  </section>
  <section>
      <h3>Granny Smith</h3>
      <p>These juicy, green apples make a great filling for
  apple pies.</p>
  </section>
</article>

Activity

Here you can test out what you read, and achieve badges.

Activity Instructions

Try using the article and section tags. Note that these tags have no visible qualities that will display in the browser window by default.

HTML

CSS

JavaScript

Output

Next Lesson (Lindsey)

Previous Lesson (HTML Basics)