Code samples for building a web-page

The following are samples of code you may just want to copy and paste into your document.

For a fuller explanation and reference, visit HTML Dog.

Page first published: around 10 years ago. Last updated: .

Below is a list and short description of the different elements to include in your file.

1. Start with the doctype declaration, nice and simple:

<!DOCTYPE html>

Older doctype declarations

2. After the doctype comes the html opening tag:
this tag contains...

<html lang="en">

German language:

<html lang="de">

More language codes

3a. Next comes the head tag. This is not compulsory but if it is there it is compulsory to have a title tag inside it:

<head>
<title>My Web Page Title</title>

3b. Put the character encoding next or, better, as first thing after the <head> tag:

<meta charset="utf-8" />

or

<meta charset="windows-1252" />

More character sets

4. Meta data:

<meta name="description" content="Kaya Basharan. Meta-data. Part of a series of template web-pages to be used for building more useful web-sites" />
<meta name="author" content="Kaya Basharan" />
<meta name="robots" content="noindex" />

5. Favicon icon:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

or

<link rel="shortcut icon" href="img/favicon.ico" />

6a. Adding CSS in the header:

<style media="all">
	#container {
		width: 1000px;
		margin: auto;
	}
	pre {
		border: 1px dotted #339;
		padding: 0.4em;
		overflow: auto;
		background: #eef;
	}
</style>

6b. Linking to an external CSS file:

<link rel="stylesheet" media="all" href="styles.css" />

6c. CSS file for printing:

<link rel="stylesheet" media="print" href="styles.css" />

6d. CSS file for hand-held devices:

<link rel="stylesheet" media="handheld" href="styles.css" />

Media types in more detail.
CSS3 Media queries.
Basic tutorial for iPhone.
More on the iPhone.

7a. Adding javascript in the header:

<script type="text/javascript">
	$(function() {
		$(".accordion_inner").accordion_inner({active: false, autoHeight: false});
	});
</script>

7b. Linking to an external javacript file:

<script type="text/javascript" src="js/slide.js" defer ></script>

or

<script type="text/javascript" src="js/slide.js" async ></script>

My preferred method is to put the Javascript in the head (under the CSS) and use the 'defer' attribute. There are a number of sites out there saying that defer is not well supported but it seems that support has jumped in the last year or two (Can I Use: Defer) and I'm not an advocate of supporting "legacy browsers".

Putting the Javascript at the bottom of the page is (theoretically) nearly as good as deferring and this old solution from Google (Feed the Bot - Correct Defer) seems like overkill to me if defer is genuinely supported now.

I noticed that YSlow recommends reducing DNS requests - sensible - but in the case of something like jQuery, doesn't it make more sense to use a CDN like Google's Hosting Libraries? The down-side, compared to hosting the file yourself, would be an extra DNS lookup, the up-sides would be the possibility that the browser already has this file, one less connection to and one less file on your own server.

Further reading:

8. Internet Explorer fixes:

<!--[if IE 8]><link rel="stylesheet" href="iefix.css" /><![endif]-->

More Internet Explorer conditional comments
Wikipedia article on CSS hacks

9. HTML contents:

</head>

<body>
<div id="container">

<p>web site contents.</p>

</div>
</body> 
</html>

I'm tired of searching, just give me the solution!

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>web site title</title>
	<meta name="description" content="Kaya Basharan. Part of a series of template web-pages to be used for building more useful web-sites" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="styles.css" />
	<script type="text/javascript" src="js/slide.js" defer ></script>
</head>

<body>
	<div id="container">
		<header>
			<h1>Page Title</h1>
			<p>Sub-Title</p>
		</header>

	<p>web site contents.</p>

	</div><!-- end of container -->
</body> 
</html>

An alternative HTML5 Template from WebFX.com

Non-copyrighted dummy content

1. Lorem ipsum dolor sit amet

2. Creation - ESV

3. About me:

My name is Kaya Basharan. I’m a Christian. And this is my personal web-site. I work as a web programmer specializing in HTML and CSS. I am also learning TYPO3 and have created and implemented a number of TYPO3 web-sites which I have listed under portfolio at the top of my home-page. I have been told that HTML and CSS are not, strictly speaking, programming languages, which means I'm not really a programmer; I'm a mark-up-er or an organiser... Okay, fair enough, I can live with that. I guess that is my strong point, which is actually what this web-site is all about - my own little collection of organised bits and pieces for reference. Half reference, half portfolio. Mostly tutorials, articles, HTML, CSS, web-page templates, christian resources, music, web design, TYPO3, album cover artwork, nestle boycott information and help, vegetarian recipes and various other bookmarks and references. My favourite home-page. I’ll make you one if you ask nicely. Help yourself. Kaya Basharan

Home