Html Template

This is a typical Html page of code that I have colour coded, for a

  1. Responsive website to also display correctly on mobile devices
  2. SEO (Search Engine Optimization, xml sitemap, robots txt file, google authorship, canonical)
  3. Google Analytics and Webmaster Tools.


In Bold Black type are the Html tags

In Red are Html tags and content for SEO (Search Engine Optimization)

In Green are the scripts and Media Queries to make the page Responsive for Mobile Display

In Blue are the variables that change from page to page and website to website

In Yellow background is the text that actually appears on the Web Page


<!DOCTYPE html>




<title>The page title goes here (under 70 characters)</title>  

<meta name=”description” content=”The website page description of the content goes here (keep it under 156 characters)“>

<link rel=”stylesheet” type=”text/css” href=”LocationNameofCssFile.css goes here” media=”screen, handheld” /> 

<link rel=”canonical” href=”http://  either the www. or non-www. version of the website page url goes here” />

<link rel=”publisher” href=”http://www. web address of the website Authors Google plus profile goes here“/>

sitemap code missing from here

robots txt code missing from here  <meta name=”robots” content=”index,follow,archive” />

google analytics code missing from here

Google webmaster tools verification code missing from here


what is this ?

<meta name=”geo.position” content=”52.1667,-7.6667″ />

<meta name=”geo.placename” content=”IE-WAT” />

<meta name=”geo.region” content=”Waterford (county)” />


<script src=css3-mediaqueries.js”></script> 

<meta name=”viewport” content=”width=device-width, initial-scale=1″>




<div id=”wrapper”>

<div id=”header”>

<div id=”site-logo”><a href=HomepageLocationGoesHere“>home</a></div>
<div id=”site-menu”>

<li><a href=”Home.html“>Home</a></li>
<li><a href=”AboutUs.html“>About Us</a></li>
<li><a href=”Products.html“>Products</a></li>
<li><a href=”Videos.html“>Videos</a></li>
<li><a href=”Customers.html“>Customers</a></li>
<li><a href=”UserGuide.html“>User Guide</a></li>
<li><a href=”Pricing.html“>Pricing</a></li>
<li><a href=”ContactUs.html“>Contact Us</a></li>




<div id=”content”>



<br /> 

<hr style=”height: 3px; width: 600px;” size=”3” width=”600” color=”#ff0000” />



<div id=”footer”></div>





Back to Top of Page