HTML Basic Template

Ok, so this is another one of those threads where I want to know what you guys and girls do - in regards to a (X)HTML template document. A boilerplate if you like. But not the most basic type. Well, according the SitePoint HTML Reference page on the [URL=“http://reference.sitepoint.com/html/page-structure”]Basic Structure of a Web Page a basic (HTML 4.01) Web page would look like the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
  </body>
</html>

Of course this is a basic Web page structure. Certainly not the type of structure I’d use in any Website I’d produce but it is just an example to show the basic structure of a Web page. 10 out of 10 Websites I visit will have much more in the documents head section. I have a document on my desktop PC and my USB Stick called “html4-template.html” which looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<meta name="author" content="">
		<title></title>
		<!-- <base href=""> -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/stylesheet.css">
		<link rel="stylesheet" type="text/css" media="print" href="css/print.css">
		<!-- <link rel="alternative stylesheet" type="text/css" media="screen" href="css/accessibility.css"> -->
		<link rel="icon" type="image/x-icon" href="favicon.ico">
		<!-- <script type="text/javascript" src="js/global.js"></script> -->
		<!-- <script type="text/javascript" src="js/#.js"></script> -->
	</head>

	<body>
	</body>
</html>

So whenever I’m creating a new Website / Web page I’ll just create a new folder with the name of the domain name for the folder e.g. - “apcooper.co.uk” and then paste this document into that folder and rename it “index.html”. I’ll fill in the meta tag content appropriately including the title of the page and the base href (which is commented out so everything works when I’m developing locally with no files on the server).

I then have an alternative stylesheet commented out. If I need to include an alternative stylesheet then I delete the comments and simply change the file name, if needed. But at least it’s there for me. The same goes for the external JavaScript files however, I always have the “global.js” file so that file name is already placed there. Any other external JS files can just be copied and pasted from the line below and change the file name. Job done. If I don’t need a certain line I simply delete it. But the point of the template file is that everything I’ll need in the header of the document is there when I begin developing.

So, I guess my question to you lovely people :stuck_out_tongue: is - Do you use your own custom HTML basic template document? and if you do, would you be kind enough to post it here for us to see?

Also, if anyone has any comments to make about my basic template, if I’m including something I shouldn’t be, or I’m missing something, then please tell me!

Andrew Cooper

I have one but I like yours better. :slight_smile:

I have another one almost as basic as your top example that I use for test-driving elements (JS, nav menus, whatever) in a bare-bones environment.

[highlight=“Basic HTML 4.01 Template”]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
http://www.w3.org/TR/html4/strict.dtd”>
<html lang=“en”>
<head>
<meta http-equiv=“Content-Type” content=“text/html;charset=utf-8”>
<title>Test Drive</title>
<style type=“text/css”>
body {
width: 100%;
}
</style>
</head>

<body>

<p>bleah</p>

</body>
</html>

Thanks, I appreciate that!

I do exactly the same thing (with a similar basic layout) just for testing out layouts, example scripts, colours, etcetara.

Andrew Cooper

Both of you have posted what I use, too.

Recently, following a discussion about print style sheets (and a post by Paul O’Brien), I’ve changed this:


<link rel="stylesheet" type="text/css" [COLOR="Blue"]media="screen"[/COLOR] href="css/stylesheet.css">
<link rel="stylesheet" type="text/css" media="print" href="css/print.css">

to this:


<link rel="stylesheet" type="text/css" [COLOR="Red"]media="all"[/COLOR] href="css/stylesheet.css">
<link rel="stylesheet" type="text/css" media="print" href="css/print.css">

Using media=“all” in the first link means you don’t have to rewrite everything that stays the same in the print style sheet, but rather just override styles that are different.

I also have an IE style link in my template (which I delete if not used):


<!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css"><![endif]-->

Lastly, I’m tending to do away with the favicon link, as it doesn’t seem to have a purpose if the favicon is in the root folder.

Ralph, you’re right about the media="all" in the style element. Not sure I have the gumption to delete the favicon element… :slight_smile:

I as well set my media attribute value to all.

I add this in my stylesheet for print styles:

@media print {

}

Coop, by adding that attribute in your stylesheet itself, does that make the print stylesheet subsidiary to the main sheet? You’re not adding a link to a print stylesheet in your HTML?

Everything I’ve seen of late suggests that it’s unnecessary if the image is in the root folder, but I haven’t tested it in all browsers. Can’t hurt to leave it, I suppose.

Coop, by adding that attribute in your stylesheet itself, does that make the print stylesheet subsidiary to the main sheet?

I second that question! I’ve never been totally sure about this.

Inquiring minds want to know.

The second way to specify a media type is to use the @media rule. This allows you to add media specific sections inside your stylesheet so you can use a single stylesheet, and still provide styles for specific media types. The @media rule is similar to the media attribute; it accepts a comma separated list. This rule can be put anywhere inside your stylesheet (they can even be nested), and should contain relevant style rules inside curly braces. Any styles not inside a @media rule are applied to all media types.

Here are some tutorials:
http://www.w3.org/TR/CSS2/media.html

I’m not sure I understand this concept completely, could one of you give me a more detailed example and description and what exactly this means?

That’s a great idea, after reading your post I immediately kicked myself! (not literally xD) I should have had this in my template from the beginning. Although, I develop for IE8 and the other latest browser versions and then add a separate IE7 stylesheet using the same method.

How many browsers have you tested in ralph? And which ones? It would be one less line of markup :smiley: but I want to ensure that the favicon appears in all Web browsers without the markup in the head being required, before I stop using it.

And can we some more people post their own HTML basic templates that they have?

Andrew Cooper

I think I really only have them for the doctypes:

HTML4


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="nl">
    <title></title>
    <meta name="description" content="something">
    <!--link rel="stylesheet" type="text/css" href="*.css"-->
<style type="text/css">
/*foo*/
</style>
  </head>
<body>

</body>
</html>

XHTML1


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="nl">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="nl" />
    <title>TITLE</title>
    <meta name="description" content="iets" />
    <link rel="stylesheet" type="text/css" href="#" />
<!--<style type="text/css">-->
  </head>
<body>

</body>
</html>

HTML5


<!DOCTYPE html>
  <html lang="nl">
  <meta charset="utf-8">
  <title>TITLE</title>
  <!--link rel="stylesheet" type="text/css" href="#"-->
  <style>
/*foo*/
  </style>
<body>
  <div>FOO</div>
</body>
</html>

That’s not to say I don’t add in favicon or other stuff in the head. The style tags are in there because often I’ll start my basic-box styles in the page, as I’m building locally… by the time it starts getting some bulk to it, it’s also about time to move to the server and test everyone else, so that’s when the css gets split off to another sheet.

I always have a print stylesheet with the main stylesheet being media=“screen, projection”
'cause my print sheets don’t have ANYTHING in common with the screen sheets, except the * {margin: 0;} maybe (sometimes not even that).

You know IE won’t do it anyway, right? You’ve got to “favourite” it. Or some damn thing… goofy IE, trying to stay with the original meaning of “favicon”. Lawlz. All nostalgic n’ stuff.

I usually tend to copy the last page I was working with and adapt it but I do have this one lying around.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Page Title</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- Meta -->
<meta name="description" content="#">
<meta name="keywords" content="#">
<!-- CSS -->
<link href="main.css" rel="stylesheet" media="all" type="text/css">
<!--[if lte IE 7]>
<link href="iecss.css" rel="stylesheet"  media="all" type="text/css">
<![endif]-->
<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet"  media="all" type="text/css">
<![endif]-->
<link href="print.css" rel="stylesheet" media="print" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body id="home">
<div id="outer">
    <div id="header">
        <h1>Header</h1>
        <ul id="navigation">
            <li><a href="#">nav</a></li>
            <li><a href="#">nav</a></li>
            <li><a href="#">nav</a></li>
        </ul>
    </div>
    <div id="content"> </div>
</div>
<!-- end outer -->
<div id="footer">
    <p class="copyright">&copy; 2010</p>
</div>
</body>
</html>


Paul, do you really normally have/use stylesheets for IE7 and 8? Or do you just have really picky customers?

Paul, do you really normally have/use stylesheets for IE7 and 8? Or do you just have really picky customers?

The first one I use for ie7 and ie6 at the same time and then just split it with * html inside. Nearly all my clients must have good ie6 support even if degraded slightly and I still automatically do the box model hacks (force of habit).

The ie8 one is for the odd bug I come across and if none found then I delete it. Usually there’s only one or two rules in it and if I can’t work around it then they get a fix.

If I can get away with a few * html in the main sheet then I’ll just delete all the ie sheets. It all depends on the job in hand.:slight_smile:

Yep I use a basic template just like Stomme Poes, makes things much easier.

As I understand it, all browsers for many years now have been supporting the favicon.ico protocol, which means that they will check for a favicon in the root folder without any link in the head of the document. There are no actual W3C specs for this behavior, though, as favicons were invented by MS and picked up by the other browser makers soon after.

I’ve not found a situation where the favicon doesn’t work, except when it hasn’t been saved for IE as a proper .ico file. (Better browsers are happy with gifs and pngs these days.)

BBEdit -> File -> New -> HTML Document


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Untitled</title>
</head>
<body>

</body>
</html>

Then again I haven’t created a master template in quit some time. The project I’m currently responsible for had all that stuff set up from the previous developer.

I see. Many of the people who’ll visit Websites I create / will create will be IE users. I think I’ll stick with including the markup for the favicon in the head for now, at least until IE9 is released, we’ll see what happens I guess!

I think I’ll stick to the normal approach of adding a print stylesheet until I read about it properly. I guess there isn’t much variation then from what I have as my HTML basic template document. That’s an encouraging thing to know at least!

Andrew Cooper

Crimson Editor > Open Template > hello world.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
   <title>hello world</title>
   <style type="text/css">

   </style>
   <script type="text/javascript">

   </script>
</head>
<body>

</body>
</html>

head and body don’t get indented, to save on excessive rightness on the important elements later on in the body.

Since I don’t do much that involves entire HTML pages (and I don’t do much for people that pay me anyway), most of them are for myself, test pages or simply proof of concept examples, mostly for JS. So most JS/CSS just go straight into the head, and if they’ll be put in separate files, I’ll do that manually afterwards.

Stomme Poes, what’s the HTML5 one for? Do you really use it that often?