Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Lu Favela
seal-mask
.a{fill-rule:evenodd;}techdegree
Lu Favela
Front End Web Development Techdegree Student 13,944 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,822 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>