title: How to organize HTML5 structure for better practices and better code readability?
body: <p>I'm new to HTML and programming in general and I want to make sure my code is organized and that I'm using the best practices while I go along.</p>
  
  <p>So, I made this example layout I would like to convert to HTML5:
  <a href="https://postimg.org/image/je10syxhz/" rel="nofollow">https://postimg.org/image/je10syxhz/</a></p>
  
  <p>And this is the HTML5 code I created:</p>
  
  <pre><code>&lt;!-- Solutions Section --&gt;
  &lt;section id="Solutions"&gt;
    &lt;header&gt;
      &lt;h1&gt;Title&lt;/h1&gt;
      &lt;h2&gt;Subhead&lt;/h2&gt;
    &lt;/header&gt;
  
    &lt;!-- Items --&gt;
    &lt;section&gt; 
      &lt;article class="Solutions_items"&gt;
        &lt;!-- Should I have a &lt;header&gt; inside each article? --&gt;
        &lt;h1&gt;Item 1&lt;/h1&gt;
        &lt;p&gt;Lorem ipsum...&lt;/p&gt;
      &lt;/article&gt;
  
      &lt;article class="Solutions_items"&gt;
        &lt;h1&gt;Item 2&lt;/h1&gt;
        &lt;p&gt;Lorem ipsum...&lt;/p&gt;
      &lt;/article&gt;
  
      &lt;article class="Solutions_items"&gt;
        &lt;h1&gt;Item 3&lt;/h1&gt;
        &lt;p&gt;Lorem ipsum...&lt;/p&gt;
      &lt;/article&gt;
    &lt;/section&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Now to the question:</p>
  
  <p>Is there a difference between using <code>div</code> instead of <code>sections</code> or <code>articles</code>? I mean, not only in the organization realm but also in optimization realm? Is there a general best practice convention nowadays about this specific topic? Because I feel that using <code>sections</code> and <code>articles</code> makes the code easier to read (and also makes the CSS file cleaner). </p>
  
  <p>Thanks! :)</p>