Creating a Standard HTML Template

Step By Step Guide for Building a Standard HTML Template

Beginning a project with an HTML file with all the required tag elements and general CSS helps save time and increases your efficiency.  A basic HTML page requires a DOCTYPE, head elements, link tags for CSS, title tags, etc.  All these elements help to create a fully functioning HTML page or site.  Creating an HTML template with all these elements and saving it as a standard file gives you a good starting place for future projects. Modifications can be made to the standard template to make a more robust page or site, but it’s good to have the basic structure in place for more convenience and less frustration.

Head Elements

Starting with the head elements, we can include the title tag with a generic title like “Title”.  Include a link tag for the CSS.  The meta tagshould be included as it defines the character set to use.  If you know your sites will include frameworks such as jQuery and its different subset of frameworks, then it is best to go ahead and download those frameworks ahead of time.

Body Elements

The body elements can vary from project to project, but keeping tags that are universal to all websites is key to making a flexible and versatile standard HTML template.  A standard HTML template should include all of the following:

• Banner or Header
• Navigation or Menu
• Footer
• Sidebar

A banner or header should be included since this tells users what site they are on.  Navigating a site is a fundamental activity and is one of the main interactions between a user and the site, so a navigation/menu section is a must-have. Next, add a footer to accompany the header.  The content between the header and the footer will vary from each developer and company depending  on what the workflow is. For me personally, I have a sidebar area that is floating to the right, though it could be on either side. Add text to each HTML element to spell out their functions. For example, the banner could be have the title or an explanation of what each element is to supposed to do.

The Details

Having these HTML elements is a nice start, but let’s take it a step further. Adding generic CSS selectors, the elements will give you a bit more flexibility in laying out the HTML template. You could start styling the text, adding background color, padding, margins, and a myriad of other CSS styles.

Be Sure to Save