Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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 15,549 Points
Posted by Lu Favela
.a{fill-rule:evenodd;}techdegree
Lu Favela
Front End Web Development Techdegree Student 15,549 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,870 Points
Dave StSomeWhere
Dave StSomeWhere
19,870 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
Jamie Reardon
.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>