How to build pages with minimal HTML

Every developer succumbs to the temptation of using the div tag (or other div like tags) over and over to solve issues. If items don't align properly or sections are not properly displaying, stop and think. Why nesting divs will solve the issue? Would CSS fix it?

The over use of divs will not solve your issues and can be a pain to maintain, specially with CSS. The over usage of div is called: divitis, a practice of authoring web-page code with many div elements in place of meaningful semantic HTML elements. In other words, nesting divs to add classes or ids or to use them just to wrap different sections of the page.

This is the same principle as nesting tables, remember? I am sure you did this at some point. It was insane and very messy to maintain. You do not want to do this with your divs. By using nested divs it makes your code more complicated to read, more difficult to maintain with CSS, makes the HTML file bigger for no reason, increase the risk of making mistakes while debugging or fixing code and finally, can be difficult to create your mobile layout.

Tips

Here's a quick example on how to properly code your HTML to make your life easier.

<div id="wrapper">
  <div id="menu">
    <ul>
      <li>Menu 1</li>
      <li>Menu 2</li>
      <li>Menu 3</li>
    </ul>
  </div>
  <div id="text">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </p>
  </div>
</div>

to:

<section id="wrapper">
  <ul id="menu">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
  </ul>
  <article>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  </article>
</section>

In this case, you don't have to create multiple classes to build your layout. It also simplifies your CSS code.

<div class="figure">
  <div>
    <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  </div>
  <div class="figcaption">
    Fig1. - A view of the pulpit rock in Norway.
  </div>
</div>

to:

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

This way, building pages for desktop, tablets or mobile devices is very easy. Take advantages of the HTML5 tags, that simply the readability of the code and has a great CSS advantages. You don't need to put a class or an id on every divs just to distinguish then.

Use the section to create a generic section, the nav to build a navigation block or menu. The article to create a content section etc...

Quick tip before you build your site, always think about the different layout and devices your user will have. Start with the simplest (mobile) and finish with the desktop version. This way, it will be very easy to code properly and efficiently your page.