title: HTML5 section and article layout for web application
body: <p>I know this is a common question among web devs and designers today, "when do I use a section or article element?" I have done quite a bot of research about the semantics meanings for each, but i wanted some feedback from stack users.</p>
  
  <p>Currently I am developing an HTML5 web application, dashboard of sorts. Each channel in the dashboard contains widgets that relate to that category. Each widget is independent of each other. The app also contains a user settings area (sidebar) tangentially related to the main content. In effort to create the most semantic markup, I thought of the following structure:</p>
  
  <pre><code>&lt;body&gt;
    &lt;section class="channel"&gt;
      &lt;header&gt;
        &lt;h1&gt;Travel&lt;/h1&gt;
        &lt;nav&gt;
          &lt;button&gt;Add widget&lt;/button&gt;
          &lt;button&gt;Edit&lt;/button&gt;
          &lt;button&gt;Share&lt;/button&gt;
        &lt;/nav&gt;
      &lt;/header&gt;
      &lt;article class="widget"&gt;
        &lt;header&gt;
          &lt;h1&gt;Expedia&lt;/h1&gt;
          &lt;nav&gt;
            &lt;button&gt;Move up&lt;/button&gt;
            &lt;button&gt;Move down&lt;/button&gt;
            &lt;button&gt;Settings&lt;/button&gt;
          &lt;/nav&gt;
          &lt;!-- Widget content (lists, paragraphs, etc) --&gt;
        &lt;/header&gt;
        &lt;footer&gt;
           &lt;time&gt;(Time and date of last widget update)&lt;/time&gt;
        &lt;/footer&gt;
      &lt;/article&gt;
  
      &lt;article class="widget"&gt;
        &lt;header&gt;
          &lt;h1&gt;Kayak&lt;/h1&gt;
          &lt;nav&gt;
            &lt;button&gt;Move up&lt;/button&gt;
            &lt;button&gt;Move down&lt;/button&gt;
            &lt;button&gt;Settings&lt;/button&gt;
          &lt;/nav&gt;
          &lt;!-- Widget content (lists, paragraphs, etc) --&gt;
        &lt;/header&gt;
        &lt;footer&gt;
           &lt;time&gt;(Time and date of last widget update)&lt;/time&gt;
        &lt;/footer&gt;
      &lt;/article&gt;
    &lt;/section&gt;
  
    &lt;section class="channel"&gt;
      &lt;header&gt;
        &lt;h1&gt;Shopping&lt;/h1&gt;
        &lt;nav&gt;
          &lt;button&gt;Add widget&lt;/button&gt;
          &lt;button&gt;Edit&lt;/button&gt;
          &lt;button&gt;Share&lt;/button&gt;
        &lt;/nav&gt;
      &lt;/header&gt;
      &lt;article class="widget"&gt;
        &lt;header&gt;
          &lt;h1&gt;Craigslist&lt;/h1&gt;
          &lt;nav&gt;
            &lt;button&gt;Move up&lt;/button&gt;
            &lt;button&gt;Move down&lt;/button&gt;
            &lt;button&gt;Settings&lt;/button&gt;
          &lt;/nav&gt;
          &lt;!-- Widget content (lists, paragraphs, etc) --&gt;
        &lt;/header&gt;
        &lt;footer&gt;
           &lt;time&gt;(Time and date of last widget update)&lt;/time&gt;
        &lt;/footer&gt;
      &lt;/article&gt;
  
      &lt;article class="widget"&gt;
        &lt;header&gt;
          &lt;h1&gt;eBay&lt;/h1&gt;
          &lt;nav&gt;
            &lt;button&gt;Move up&lt;/button&gt;
            &lt;button&gt;Move down&lt;/button&gt;
            &lt;button&gt;Settings&lt;/button&gt;
          &lt;/nav&gt;
          &lt;!-- Widget content (lists, paragraphs, etc) --&gt;
        &lt;/header&gt;
        &lt;footer&gt;
           &lt;time&gt;(Time and date of last widget update)&lt;/time&gt;
        &lt;/footer&gt;
      &lt;/article&gt;
    &lt;/section&gt;
  
    &lt;aside id="sidebar"&gt;
      &lt;h1&gt;App Name&lt;/h1&gt;
      &lt;div&gt;
        &lt;!-- Clock element --&gt;
      &lt;/div&gt;
      &lt;!-- Username and profile pic --&gt;
      &lt;ul&gt;
        &lt;!-- List of settings actions/buttons --&gt;
      &lt;ul&gt;
      &lt;footer&gt;
        &lt;p&gt;Copyright...&lt;/p&gt;
      &lt;/footer&gt;
    &lt;/aside&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Thoughts? Suggestions?  </p>