The importance of doctype in stylesheets and html

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“>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s