Forum Moderators: open
Because this is intended to be a library thread eventually, I will edit rather strongly to keep us on topic. Let's begin with part of a previous thread where g1smd made a solid post on the topic.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
For your page to actually be valid you MUST declare the character encoding (lets the browser know whether to use A to Z letters (latin), or Chinese, Japanese, Thai, or Arabic script, or some other character set) used for the page, with something like:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
There are also other schemes such as UTF-8 and many others.
It is also a good idea to declare what human language the page is in, using:
<meta http-equiv="Content-Language" content="EN-GB">
The language and country codes come from ISO 4217 and ISO 3166. This is useful for online translation tools as well. Change the "en" and "gb" to whatever language and country you need.
You need a <title> element for the page:
<title> Your Title Here </title>
This is displayed at the top of the browser window, and stored as the name of the bookmark if someone bookmarks the page URL in their browser. Most importantly, it is the <title> tag that is indexed and displayed by search engines in the search results page (SERPs).
You need the meta description tag, as this is very important for search engines, and it is useful but not vital to have a meta keywords tag:
<meta name="Description" content=" Your Description Here. ">
<meta name="Keywords" content=" your, keyword, list, here ">
Most search engines do obey the robots meta tag. The default robots action is index, follow (index the page, follow all outbound links) so if you want something else (3 possibilities) then add the robots tag to the page in question. If you want to exclude whole directories then use the robots.txt file for this instead of marking every HTML file with the tag.
<meta name="robots" content="noindex,follow">
The last parts of your header should have your links to external style sheets and external javascript files:
Use this if the stylesheet is for all browsers:
<link type="text/css" rel="stylesheet" src="/path/file.css">
Use this for style sheet that you want to hide from older browsers, as older browsers often crash on seeing CSS:
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css"> @import url(/path/file.css); </style>
Use this for the javascript:
<script type="text/javascript" language="javascript" src="/path/file.js"></script>
End the header with this:
</head>
<body>
and then continue with the body page code.
It is as simple as that.
Note: The revisit meta tag is ignored by search engines. Delete it from your page.
[edited by: tedster at 7:17 pm (utc) on Sep. 3, 2005]
[edit reason] removed comments not related to this thread [/edit]
And it's often helpful to point browsers to the location of a favicon image I want them to use.
<link rel="shortcut icon" type="image/x-icon" href="[path to favicon.ico]"
So, what else does it take to create a solid head section for your html document?
[edited by: tedster at 7:59 pm (utc) on Sep. 7, 2005]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Make sure it is always on the very first line of your source code, with nothing before it, even white space.
The second thing I like to add are links to alternative content versions, especially for syndication or RSS feeds. You add them like this:
<link rel="alternate" type="application/rss+xml" href="/feed.rss" title="The title of my RSS feed">
