Generic basic XHTML template

Every time - and I really do mean every time - I start doing a new web page I can never remember all the required bits and pieces you need for a valid XHTML 1.1 page - it was so much easier back in the old days when all you needed was a few simple <html>, <head> and <body> tags! Now you need a doctype, a namespace declaration, multiple style sheet declarations, and if you are a search-engine optimisation nut you'll need a raft of <meta> tags too - basically I dont want to waste time looking these up or trying to remember them all, so I've created a generic XHTML template.

XHTML Hello World

This XHTML template is an extremely simple but fully valid XHTML 1.1 document that just says "Hello World" in the good old programming tradition. So, first of all we have the actual document:


<!DOCTYPE html PUBLIC "-//W3C//DTD 
XHTML 1.1//EN" "http://www.w3.org/TR/2001/REC-xhtml11-20010531/DTD/xhtml11-flat.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Language" content="en-gb" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="robots" content="index, follow" />
        <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
        <link rel="stylesheet" type="text/css" media="print" href="style.css" />
        <title></title>
    </head>
    <body>
        <p>
            Hello, World
        </p>
    </body>
</html>

CSS Generic Template

You'll have noticed that I have included CSS in there too - I thought whilst I am at it I might as well have a nice simple CSS template with all of the most common tags there already just waiting for me to fill it in, so here you go:


/*
 *	Body
 */

body {
	padding				: 5px;
	margin				: 0;
	background			: #FFFFFF;
	color				: #000000;
	font-family			: sans-serif;
	font-size			: 100%
}

/* Generic IE-only Hack */
* html body {}

/*
 *	Links
 */

a {
	color				: #0000FF;
	background-color		: #FFFFFF;
	text-decoration			: underline;
}

a:hover {
	color				: #FF0000;
	background-color		: #FFFFFF;
	text-decoration			: underline;
}

a:active {
	color				: #FF0000;
	background-color		: #FFFFFF;
	text-decoration			: underline;
}

a:visited {
	color				: #FF0000;
	background-color		: #FFFFFF;
	text-decoration			: underline;
}

a:focus {
	color				: #FF0000;
	background-color		: #FFFFFF;
	text-decoration			: underline;
}

/*
 *	Paragraph, Code, Blockquote
 */
p {}
code {
	white-space			: pre;
}
blockquote {}

/*
 *	Headings
 */
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

/*
 *	Lists
 */
ul {}
ol {}
li {}
ul li {}
ol li {}

So there you go - a simple and ready-to-use basic XHTML template. Both the XHTML and the CSS are valid so its a good start for your own designs. Feel free to copy-paste this as much as you like and make any modifications you want, or you can download the two example files too.

Back 15.05.2006.

Thanks, again Mr.!

your pal, Greg 25.07.2006

Doctype and all the others that must be in the document for valid Xhtml generates automaticly for me when im using macromedia dreamweaver.

crilleofsweden 26.01.2007

mdibb.net