HTML HTML Basics Structuring Your Content Sectioning Content with <article>, <nav> and <aside>

Guadalupe Favela
seal-mask
.a{fill-rule:evenodd;}techdegree
Guadalupe Favela
Front End Web Development Techdegree Student 12,588 Points

Whats the difference between section and article?

Im having trouble understanding the difference between "<section>" and <article>" when they do essentially the same?

Dave StSomeWhere
Dave StSomeWhere
19,809 Points

Hi Guadalupe, the confusion might be a language thing.

To me, I see <section> as major areas of the page - like the main content section or left navbar section or header section or footer section.

While I see <article> as an individual blog post, and we can have many articles/posts in the main section (or other sections).

So, if we look at this community, I see the list of questions as the questions section and each individual question (or post) as an article.

So, the goal is just to provide additional naming capabilities to make your layout clearer to interested parties.

1 Answer

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

Hi,

The section element groups together related sections of content, for example, a group of blog entries. It can be used for semantic meaning and markup on your pages instead of the generic div element.

<section>
  Your content grouped together inside the section.
</section>

The article element element describes self-contained pieces of content. You can also nest the article inside of a section tag, or use it on it's own.

<section>
  <article>
    A piece of content...
  </article>
  <article>
    Another piece of content...
  </article>
</section>
<article>
  Stand alone content...
</article>