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

<h1>Bees and Blossoms</h1>
 
<p>Finding the Right Combination</p>
 
<h2>Bees</h2>
 
<p>Not all bees are created equal. Of the 22,000 known species of bees, only 7 species are recognized as <em>true</em> honey bees.  According to Wikipedia, Honey bees are a subset of bees in the genus Apis, primarily distinguished by the production and storage of honey and the construction of perennial, colonial nests out of wax. Of these seven species, A. mellifera and A. cerana indica are the most commonly kept bees for pollination and honey production.</p>
 
<p>Maintaining a healthy apiary (or bee yard) requires several considerations. Weather, available foraging land, the size of the bees, and the number of hives can all affect the quality of the bees' work, whether in pollination or in honey production. Beekeepers must also be alert to vandalism, competition, and CCD. For more information on modern beekeeping, visit <a href="https://en.wikipedia.org/wiki/Beekeeping#Modern_beekeeping">this article</a> on Wikipedia.org.</p>
 
<h2>Blossoms</h2>
 
<p>If you're trying to attract bees to your garden or looking to harvest the best honey, the types of flowers available to your bees matter. Different kinds of flowers actually affect the quality and flavor of the honey, and not all flowers attract bees.</p>
 
<h3>Bring All the Bees to the Yard</h3>
 
<p>News flash: Bees can't see the color red! When selecting plants to attract bees, steer toward blooms of white, yellow, blue and purple. Here's a list of top favorite flora for bees.</p>
 
<ol>
    <li>Dandelion</li>
    <li>Fennel</li>
    <li>Lavender</li>
</ol>
 
<h3>Flower Flavor</h3>
 
<p>While the aforementioned blooms may make your bees' mouths water, they don't necessarily produce the best honey, nor are they the most practical options for bee pasturage. The following plants have withstood the test (and taste) of time as the best honey sources. For more information, visit <a href="https://www.countryfarm-lifestyles.com/honey-plants.html" target="_blank">Countryfarm-lifestyles.com/honey-plants.html</a>

CSS

1

JavaScript

</script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script>
 
 