My portfolio website is mostly just one page with multiple, well, sections - so, about me, portfolio, contact, etc.

 

So I'm tempted to wrap these in <section>, but after reading a bit about it I'm very confused as to whether this is an appropriate use. It seems the alternative would be 'article', but that doesn't sound right... what do others think?

The article element should be used for a portion of content that could stand alone and not depend on other elements outside the article tag. Sections can be used much like divs but according to the specs all sections should contain a unique heading (h1-h6) so you should not use sections but divs as generic wrappers. Read more here:

http://www.w3.org/TR/html5/

The one which is most confusing is aside - something that is indirectly tied to the wrapping articles context. It's a bit of a grey area, and very open to misinterpretation.

The article element should be used for a portion of content that could stand alone and not depend on other elements outside the article tag. Sections can be used much like divs but according to the specs all sections should contain a unique heading (h1-h6) so you should not use sections but divs as generic wrappers. Read more here:

http://www.w3.org/TR/html5/

 

Hm... the thing is, they do have unique headings. Maybe it is just best to go with div, though. Thanks.

 

Hm... the thing is, they do have unique headings. Maybe it is just best to go with div, though. Thanks.

 

Just remember that if you are using multiple h1s in a single page then they should be marked up correctly: i.e. a new section, article, aside, nav all create a new heading context and as such each can have a h1. For example

<article>
  <h1>Foo</h1>
  ...
</article>

<section>
  <h1>Bar</h1>
  ...
  <article>
    <h1>Baz</h1>
    ...
  </article>
</section>

is valid. Whereas

<article>
  <h1>Foo</h1>
  ...
</article>

<section>
  <h1>Bar</h1>
  ...
  <article>
    <h1>Baz</h1>
    ...
  </article>

  <h1>Bam</h1>
  ...
</section>

is not because of the two h1's within the same context (Inside the <section>).

Edited July 20, 201511 yr by rbrtsmith