Wireframes bring elegance to design mock-ups. They are the basic structure of a website, with colors and enhancements removed.

They are used to view design concepts with just the bare essentials, and they can provide a useful perspective on any project.

Most wireframes are created in software suites such as Adobe Photoshop and Fireworks, but some websites enable you to create wireframe images right in the browser.

With wireframes, you can attack a project head-on from multiple angles. You can even test for compatibility with CSS2 and CSS3 techniques and browsers. Things don’t need to be complex at the beginning; a wireframe simply serves as a solid foundation to begin coding.

The best way to start is with a blank slate, because it affords you the most creativity. The three basic elements are

• html

• head

• body

This is the skeleton. More detailed elements are need for the wireframe to look good. The div is the element used to box certain areas of the page, such as the logo or search box.

Divs are the building blocks of HTML5 wireframe prototypes. Anything and everything can be enveloped in a div, and styling is easier when you apply IDs to elements. Much of the main code will be split up by divs because they are the basic block elements.

With the new HTML5 specs, an element called nav has been introduced. This can be combined with an unordered list and some CSS properties to create and define your website’s main navigation area. Below is a simple example of how you could structure yournav:

<div id="header"><nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Item 3</a></li><li><a href="#">Contact</a></li></ul></nav></div>