How to organize HTML5 structure for better practices and better code readability?
<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>