I need help choosing the correct DOCTYPE for my site.
My site uses a combination of CSS and older HTML elements such as tables, center tags, font tag, etc.
Therefore should I use HTML 4.01 Transitional or HTML 4.01 Strict? Or perhaps something else?
Below is my final code:
<html>
<head>
<title>My Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{background-color: #FFFFFF; text-align: center;font: 96% Verdana,Arial,sans-serif}
h1,h2,p{margin: 0;padding: 2 10px 0.2em}
h1{font-size: 120%;color: #4396D8;letter-spacing: 1px}
h2{font-size: 110%;color: #FFFFFF}
div#container{width:600px;
margin: 0 auto;text-align:left}
div#content{float:left;wid
th:400px;b
ackground:
#E8E8E8;}
div#box{float:left;width:7
20px;margi
n-top:5px;
margin-lef
t:8px;back
ground: #F5F5F5}
div#box form{margin: 0;padding: 0 10px 0.1em;margin-left:1px}
div#box p{margin: 0;padding: 0 10px 0.2em}
#small{font-size: 74%;color: #828282;margin: 0;padding: 0 10px 0.4em}
#item{font-size: 104%;color: #404040;margin: 0;padding: 0 10px 0.4em}
#select{font-size: 105%;color: #005279;margin: 0;padding: 0 10px 0.4em}
#help{font-size: 80%;color: #0080C0;margin: 0;padding: 0 1px 0.4em}
#check{width:23px;height:2
3px;}
div#spacer{clear: both;}
</style>
<link rel="stylesheet" type="text/css" href="corners.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div align="center"><center>
<table border="0" cellpadding="5" cellspacing="5" width="760">
<tr>
<td width="200">Image</td>
<td> </td>
<td valign="bottom"><p align="right"><font size="2"
face="Verdana">Text</font>
</p>
</td>
</tr>
</table>
</center></div>
<div id="container">
<div id="content">
<h1>Title</h1>
<p>Content content <strong>bold content</strong></p>
</div>
<div id="box">
<h1>Title</h1>
<p>Text <b id="help">Blue Text</b></p>
<p id="small">Small text</p>
<div id="spacer">
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<form>
<textarea rows="3" cols="40"></textarea>
<br>
</form>
</td>
<td>
<form>
<div style="float:left">
<p id="item"><input type="checkbox" id="check">Column 1</p>
<p id="item"><input type="checkbox" id="check">Column 1</p>
<br>
</div>
<div style="float:left">
<p id="item"><input type="checkbox" id="check">Column 2</p>
<p id="item"><input type="checkbox" id="check">Column 2</p>
<br>
</div>
</form>
</td>
</tr>
</table>
<div id="spacer">
</div>
</div>
</div>
</body>
</html>
