Breaking up your HTML page into containers

[zannain]

I would recommend breaking your code up into sections. Traditionally this was done with div tags but with HTML more descriptive elements were introduced such as header, footer and section. This will make your code more readable and allows you to take advantage of code folding capability that is built into most text editors. When working on larger applications this allows you to fold blocks of markup or code and focus on just the section that may be the source of a bug in the software.

Rather than:

<h2>...</h2>
<img />
<p>
<h2>...</h2>
<img />
<p>

Separate using <section> tags

<section>
    <h2>...</h2>
    <img />
    <p>
</section>

<section>
    <h2>...</h2>
    <img />
    <p>
</section>

Here's an example of using the code folding feature: