Doctypes & Validation - HTML Forums

scoutt · 05-10-2004, 02:19 AM

Your document should begin with a !DOCTYPE (this tells the browser what sort of HTML
is in the file) followed by the <html> and <head> tags:

if you do not know what doctype to use that tells me that you are not using frames or xhtml.
so if you are unsure which ones to use then it is always: html transitional
Pick one that best suits your needs
(transitional)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

EDIT: I did not put
"http://www.w3.org/TR/html4/loose.dtd"
under the html 4.01 Transitional. that also causes weird things to happen in Internet Explorer 6. it will still validate without it. you can use it but make sure you coding is good and true, not sloppy. for newbies it is best to just to leave it out. if you use scrollbar colors in Internet Explorer it will stop showing colors.

(strict)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
for frames (not iframes) it is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
this doctype only goes in the index page that is making the frame, all regular pages will use whatever doctype you decide

for xhtml it is
(transistional)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

(strict)
<!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" xml:lang="en" lang="en" dir="ltr">

(frameset)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<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 ">

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>

End the header with this:

</head>
<body>

and then continue with the body page code.

It is as simple as that.

Code within the page:

I use: <a href="somepage.html" title="some text here"></a> for links.

I use <img src="somefile.png" alt="some text"> for images.

Headings are done with <hx></hx> tags, properly used from <h1></h1> downwards.

Links to the validators.

CSS Validator
HTML Validator

The alternative URLs let you set options before you validate:

HTML: http://validator.w3.org/detailed.html
HTML: W3C multi-page validator
CSS: http://jigsaw.w3.org/css-validator/validator-uri.html

Useful list of META tags: http://www.geocities.com/CollegePark...all_kinds.html

Don't forget to validate your HTML code or your site might not be properly indexed, or not
indexed at all. See: http://www.google.com/search?num=100...=Google+Search
for loads of sites that have a missing > on the </title> tag, or for some the </title>
tag completely missing, etc. This has completely messed up the way that the site is indexed.

remember, for xhtml doctypes you have to make ALL tags and attributes lower case, including some javascript functions, and ALL
tags need to be closed that do not have a closing tag. />

<meta .... /> (all meta tags)
<link type="text/css" rel="stylesheet" src="/path/file.css" />
<img src="..." alt="" width="" height="" />
<br />
<hr />

onSubmit needs to be onsubmit,
onClick needs to be onclick... etc.

just to name a few.

Some Bugs.
some people wonder why I didn't add
<?xml version="1.0" encoding="UTF-8"?> to the Xhtml doctype. it actually causes Internet Explorer to go into quirks mode and it will make things happen you don't want. So please don't use it if you want your code to look/run right, it will still validate as valid xhtml without it.

If you have something important to add, just tell a moderator and he/she will add it for you.

scoutt · 05-12-2004, 10:40 AM

Common errors and ways to fix them

most of the errors can be easily fixed by using some form of css (cascade style sheets)

for any errors where you get "there is no attribute "HEIGHT" or "WIDTH" or "BACKGROUND" " you need to do this

<tag style="height:100px; width:21px; background: #ffffff">

Line 15, column 49: there is no attribute "TOPMARGIN"

<body bgcolor="#FFFFFF" text="#000000" topmargin="0">
for errors like that you have to use css. most common are the topmargin, leftmargin, rightmargin, marginheight, marginwidth. those can be cured by using this

Code:

<style type="text/css">
html, body { 
    margin:0; 
    padding:0;
}
</style>

or you can use a external style sheet. for more information on style sheets you can read Pegasus's tutorial on css here:
http://www.htmlforums.com/showthread...threadid=39373

for any errors where you get "there is no attribute "LANGAUGE" you need to do this

<script type="text/javascript" src="/path/file.js"></script>
do not use:
language="javascript"

that is deprecated and shouldn't be used.
http://www.w3.org/TR/html4/interact/...ml#edef-SCRIPT

scoutt · 07-22-2004, 09:23 AM

thanks to coothead

This has just been released by the

...

HTML and XHTML Frequently Answered Questions