Why Basic HTML5 Templates

To our surprise we have been approached by a variety of users' who have asked why we are creating basic HTML templates and what makes them "BASIC". This question isn't that easy to answer to be honest.

The reason why we have created and are still creating basic HTML templates is that currently free HTML5 templates are not that widespread and thus not that easy to correctly understand and interpret.

A wide range of websites that offer either premium or free HTML5 templates aren't actually coding the templates using the new HTML5 standards. They simply add an HTML5 doctype to a template that has been coded using HTML4 or XHTML.

Due to the availability of complex structural wireframes built in HTML5 a working knowledge of the basics is a must to have and understand. Our basic templates use a wide range of the new implemented structural mark-up elements that are available.

Why do we call them "Basic" ? Easy, they are basic, or at least the lower the number (Basic 1, Basic 2 etc.) the less complex the structural mark-up.

The higher the templates name (Basic 25, Basic 26 etc.) the more complex the templates HTML5 source code is.

To ensure maximum usability and the need for a variety of users' to be able to understand what is going on in the CSS files, we decided to make them as "Basic" as possible.

Creating a CSS file that is understandable and easy to modify for such a large spectrum of users' isn't actually that hard to do. All of the "Basic" series templates are accompanied by a well structured CSS file.

Virtually all of the tags and elements that are controlled via CSS are marked-up in long form, this is to ensure that everyone understands what they are modifying.

An example:

To modify the images found in the following HTML5 code we can use a long or short form of CSS mark-up:

<div id="container"> <div id="intro"> <section> <article> <figure> <ul> <li><img src="/images/demo/demo.jpg" alt=""></li> <li><img src="/images/demo/demo.jpg" alt=""></li> <li><img src="/images/demo/demo.jpg" alt=""></li> </ul> <figcaption>Some Images In A line</figcaption> </figure> </article> </section> </div> </div>

The following CSS code is written in long form:

#container #intro section article figure ul li img{ width:130px; height:130px; }

We could have written it like this:

#intro img{ width:130px; height:130px; }

The example above simply demonstrates that when using the long form of coding you are able to identify an element in an exact position, making it easier to find it in the HTML5 source code.

The shorthand version demonstrated here would modify all images in the "#intro" whereby the long form only modifies the images in the specific element specified.

There are pro's and con's with both versions but for learning purposes and for those users' who have little or no understanding of CSS & HTML5 we think the long form is better.