I don’t know if many people realize how important it is to place the appropriate DOCTYPE declaration at the top of their HTML files so I have created the following HTML sample to illustrate some of the value:
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html>
<head>
<title>Table Test</title>
<style type=”text/css”>
.myFont
{
font-family: Arial,
Helvetica,
sans-serif;
font-size: 1.3em;
}
</style>
</head>
<body>
<h1>Doctype</h1>
<p>
This is a simple page to test the
effect of doctypes and what they
do with your CSS.
</p>
<table border=”1″>
<tr>
<th>Name</th>
<th>Surname</th>
</tr>
<tr>
<td>Hannes</td>
<td>Foulds</td>
</tr>
<tr>
<td>Lize</td>
<td>Taljaard</td>
</tr>
</table>
</body>
</html>
This is what it looks like when the DOCTYPE is in place, notice how the font size we set in the body tag trickles down to all the child tags:
When we take out the DOCTYPE it ignores the font of the parent and renders thus:
I have provided the most common DOCTYPE declarations below and you may find them usefull:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd“>
<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd“>
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd“>
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
