title: HTML5 best practices; section/header/aside/article elements
body: <p>There is enough information about HTML5 on the web (and also on stackoverflow), but now I'm curious about the "best practices". Tags like section/headers/article are new, and everyone has different opinions about when/where you should use these tags. So what do you guys think of the following layout and code?</p>
  
  <p><img src="https://i.stack.imgur.com/rl6Eq.jpg" alt="Website layout"></p>
  
  <pre class="lang-html prettyprint-override"><code>  1  &lt;!doctype html&gt;
    2      &lt;head&gt;
    3          &lt;title&gt;Website&lt;/title&gt;
    4      &lt;/head&gt;
    5  
    6      &lt;body&gt;
    7          &lt;section&gt;
    8              &lt;header&gt;
    9                  &lt;div id="logo"&gt;&lt;/div&gt;
   10                  &lt;div id="language"&gt;&lt;/div&gt;
   11              &lt;/header&gt;
   12  
   13              &lt;nav&gt;
   14                  &lt;ul&gt;
   15                      &lt;li&gt;menu 1&lt;/li&gt;
   16                      &lt;li&gt;menu 2&lt;/li&gt;
   17                      &lt;li&gt;menu 3&lt;/li&gt;
   18                      &lt;li&gt;menu 4&lt;/li&gt;
   19                      &lt;li&gt;menu 5&lt;/li&gt;
   20                  &lt;/ul&gt;
   21              &lt;/nav&gt;
   22  
   23              &lt;div id="main"&gt;
   24                  &lt;div id="main-left"&gt;
   25                      &lt;article&gt;
   26                          &lt;header&gt;&lt;h1&gt;This is a title&lt;/h1&gt;&lt;/header&gt;
   27  
   28                          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur
   29                          adipiscing elit. Quisque semper, leo eget&lt;/p&gt;
   30  
   31                          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur
   32                          adipiscing elit. Quisque semper, leo eget&lt;/p&gt;
   33  
   34                          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur
   35                          adipiscing elit. Quisque semper, leo eget&lt;/p&gt;
   36  
   37                          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur
   38                          adipiscing elit. Quisque semper, leo eget&lt;/p&gt;
   39                      &lt;/article&gt;
   40                  &lt;/div&gt;
   41  
   42                  &lt;div id="main-right"&gt;
   43                      &lt;section id="main-right-hot"&gt;
   44                          &lt;h2&gt;Hot items&lt;/h2&gt;
   45                          &lt;ul&gt;
   46                              &lt;li&gt;Lorem ipsum&lt;/li&gt;
   47                              &lt;li&gt;dolor sit&lt;/li&gt;
   48                              &lt;li&gt;...&lt;/li&gt;
   49                          &lt;/ul&gt;
   50                      &lt;/section&gt;
   51  
   52                      &lt;section id="main-right-new"&gt;
   53                          &lt;h2&gt;New items&lt;/h2&gt;
   54                          &lt;ul&gt;
   55                              &lt;li&gt;Lorem ipsum&lt;/li&gt;
   56                              &lt;li&gt;dolor sit&lt;/li&gt;
   57                              &lt;li&gt;...&lt;/li&gt;
   58                          &lt;/ul&gt;
   59                      &lt;/section&gt;
   60                  &lt;/div&gt;
   61              &lt;/div&gt;
   62  
   63              &lt;div id="news-items"&gt;
   64                  &lt;header&gt;&lt;h2&gt;The latest news&lt;/h2&gt;&lt;/header&gt;
   65  
   66                  &lt;div id="item_1"&gt;
   67                      &lt;article&gt;
   68                          &lt;header&gt;
   69                              &lt;img src="#" title="titel artikel" /&gt;
   70                              &lt;h3&gt;Lorem ipsum .....&lt;/h3&gt;
   71                          &lt;/header&gt;
   72                          &lt;p&gt;Lorem ipsum dolor sit amet,
   73                          adipiscing elit. Quisque semper, &lt;/p&gt;
   74                          &lt;a href="#"&gt;Read more&lt;/a&gt;
   75                      &lt;/article&gt;
   76                  &lt;/div&gt;
   77  
   78  
   79                  &lt;div id="item_2"&gt;
   80                      &lt;article&gt;
   81                          &lt;header&gt;
   82                              &lt;img src="#" title="titel artikel" /&gt;
   83                              &lt;h3&gt;Lorem ipsum .....&lt;/h3&gt;
   84                          &lt;/header&gt;
   85                          &lt;p&gt;Lorem ipsum dolor sit amet,
   86                          adipiscing elit. Quisque semper, &lt;/p&gt;
   87                          &lt;a href="#"&gt;Read more&lt;/a&gt;
   88                      &lt;/article&gt;
   89                  &lt;/div&gt;
   90  
   91  
   92                  &lt;div id="item_3"&gt;
   93                      &lt;article&gt;
   94                          &lt;header&gt;
   95                              &lt;img src="#" title="titel artikel" /&gt;
   96                              &lt;h3&gt;Lorem ipsum .....&lt;/h3&gt;
   97                          &lt;/header&gt;
   98                          &lt;p&gt;Lorem ipsum dolor sit amet,
   99                          adipiscing elit. Quisque semper, &lt;/p&gt;
  100                          &lt;a href="#"&gt;Read more&lt;/a&gt;
  101                      &lt;/article&gt;
  102                  &lt;/div&gt;
  103              &lt;/div&gt;
  104  
  105              &lt;footer&gt;
  106                  &lt;ul&gt;
  107                      &lt;li&gt;menu 1&lt;/li&gt;
  108                      &lt;li&gt;menu 2&lt;/li&gt;
  109                      &lt;li&gt;menu 3&lt;/li&gt;
  110                      &lt;li&gt;menu 4&lt;/li&gt;
  111                      &lt;li&gt;menu 5&lt;/li&gt;
  112                  &lt;/ul&gt;
  113              &lt;/footer&gt;
  114          &lt;/section&gt;
  115      &lt;/body&gt;
  116  &lt;/html&gt;
  </code></pre>
  
  <p>line 7. <code>section</code> around the whole website? Or only a <code>div</code>?</p>
  
  <p>line 8. Each <code>section</code> start with a <code>header</code>?</p>
  
  <p>line 23. Is this <code>div</code> right? or must this be a <code>section</code>?</p>
  
  <p>line 24. Split left/right column with a <code>div</code>.</p>
  
  <p>line 25. Right place for the <code>article</code> tag?</p>
  
  <p>line 26. Is it required to put your <code>h1</code>-tag in the <code>header</code>-tag?</p>
  
  <p>line 43. The content is not related to the main article, so I decided this is a <code>section</code> and not a <code>aside</code>.</p>
  
  <p>line 44. H2 without <code>header</code></p>
  
  <p>line 53. <code>section</code> without <code>header</code></p>
  
  <p>line 63. Div with all (non-related) news items</p>
  
  <p>line 64. <code>header</code> with h2</p>
  
  <p>line 65. Hmm, <code>div</code> or <code>section</code>? Or remove this <code>div</code> and only use the <code>article</code>-tag</p>
  
  <p>line 105. Footer :-)</p>