HTML Starter Template
After becoming a freelance web designer I found that I was repeating tasks over and over. Here is the semantically correct, HTML Strict Valid template which I use each time I start web development on a new site. Feel free to use it as you wish…
Got comments on my structures, things to add or remove?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="Author" content="Freelance graphic design in Bracknell Berkshire UK - www.faithinme.com">
<link rel="stylesheet" type="text/css" media="screen" href="/css/screen.css">
<!--[if lt IE 7]>
<style type="text/css">@import url("/css/screen_ie.css");</style>
<style type="text/css">@import url("/css/screen_ieold.css");</style>
<![endif]-->
<!--[if gte IE 7]>
<style type="text/css">@import url("/css/screen_ie.css");</style>
<![endif]-->
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<ul class="access">
<li><a href="#nav">Skip to Navigation</a></li>
<li><a href="#content">Skip to Content</a></li>
</ul>
<div id="container">
<div id="header">
<h1><a href="/">Title</a></h1>
<span id="tagline">TagLine</span>
</div><!--// End Header -->
</div><!--// End Container -->
</body>
</html>
Why do you not use Strict Valid XHTML (1.0 or 1.1) templates for your new sites, which is a successor to the classic HTML 4.0? You would benefit by having a mixture of classic (HTML) and cutting–edge (XML), also it would be future-proof.
Most 5-10 page sites will never need to use XML files so I tend to use the HTML DTD. If I am working on CMS or Ecommerce websites I tend to use mainly XHTML DTD.
I think the main point is to use a Strict DTD whether it be HTML or XHTML. The choice of using XHTML when XML isn’t going to be used on the site is just down to personal preference.
Thanks for your comments!
We have something very similar - saves a lot of time (and therefore money ;0)!
Do you have a standard CSS sheet as well? We’ve found that the Yahoo CSS reset found here: http://developer.yahoo.com/yui/reset/ is very useful and goes along way to ensure our sites look good in all browsers…
My CSS starter sheet can be found here: http://www.faithinme.co.uk/blog/css-starting-template/2008/09/20/
The Yahoo CSS reset is quite similar to what i’m using except I have slimmed things down further.
Instead of:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
We can use:
* { margin:0; padding:0; }
I’ve not seen use of table-collapse and font-style in a reset before, am going to read up a little on that. I like the fonts & grids CSS resets!
Thanks for your comments!