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 tag should 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

After you have all this set up, create a folder and name it something like “template,” and put all the necessary files in there to save it for posterity.

No Comments

Comments are closed.

Recent Blog Posts in Web Development
The Cyclist at Law website redesign was a great opportunity to create a modern and mobile-responsive twist on its existing theme. Ideally we wanted to personalize the “Cyclist at Law” brand by...
As a landscaping company, Blooms Landcare needed a more vibrant and mobile-responsive site to attract its target audience. Before The Blooms Landcare Website Redesign Mobile Responsive Website Design Mobile responsiveness is more...
Recently we launched a redesign for the Todd Durham Law Firm website. We aimed to simplify the site’s overall design, as well as make it much more mobile-friendly. With Google’s recent update,...