!DOCTYPE and a blank line question

HTML & CSS
1

Perusing forums, I noticed a remark:

“Just make sure the doctype line is on the very first line of your document with no comments or white space before it to ensure proper browser rendering.”

Looking at my coding, I noticed my page has a blank line at the top, with <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” on the second line.

The reason it does that seems to be the PHP code I have been trying to learn. The HTML is placed in a PHP Function at the top and I am guessing that is causing the space.

Will this blank line actually cause improper browser rendering? I haven’t seen any ill-effect on the IE8 I use.

Below is the top part of the code:


 
<?php
function renderForm($error) {
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml: lang="en">
  <head>

Another question might be, is that actually needed and correct? I have always just started my pages with <HTML>. Why all the newfangled strict and xmlns?

I have tried looking this stuff up, but it seems people talk too technical about these things. I guess what I am saying is I need the reply to be in the simplest of forms for me to analyze and comprehend it.

Thanks

Edit: The blank line in the PHP box is not in my code. It was placed there on this page.

2

I don’t think it’s a problem, but you can get rid of the space by starting the doctype on the same line as the closing PHP tag:

<?php
function renderForm($error) {
?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html4/strict.dtd">
<head>

I have always just started my pages with <HTML>. Why all the newfangled strict and xmlns?

Having a doctype tells the browser that it should render the page in “standards mode”, rather than “quirks mode”, which basically means that the browser should assume the code writer is using modern markup rather than outdated markup. It does make a difference. The transitional/strict bits just tell the browser how rigorous your “modern” markup is. If you use strict, the browser will not be as lenient on you as if you use “transitional”. However, there is no excuse to be using transitional in this day and age.

The latest doctype is much simpler, so you can start your page with this if you like:

<!DOCTYPE html>
<html lang="en">
<head>

It’s certainly a lot neater, and has the same effect as the longer doctypes.

EDIT:
BTW, I think you are mixing doctypes by having xmlns="http://www.w3.org/1999/xhtml" xml: lang="en" together with an HTML 4.01 doctype. This is an HTML 4 doctype:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

and this is a xhtml doctype


<!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" lang="en" xml:lang="en">
3

Your code sample actually wrong you have mixed up XHTML and HTML 4.01 syntax (XHTML uses xmlns) as it is an application of XML, HTML 4.01 doesn’t. http://www.w3.org/QA/2002/04/valid-dtd-list.html

Have you read Tommy’s FAQ for example: http://www.sitepoint.com/forums/showthread.php?t=428205 It might help you?

You can get rid of white-space before the markup with your PHP and personally I’d use an include file.

4

could it be margins or padding set on your body tag in your css?

5

This is backward compatible? How can something SHORTER be better?


 
<!DOCTYPE html>
<html lang="en">
<head>
6

Yes indeed.

How can something SHORTER be better?

Hah, I though you’d be happy with less code, given this comment:

Why waste all those bytes if you don’t need 'em? (They do mean something, of course, but all the browser really wants to see is a doctype of any flavor.)

7

I was only asking about the xmlns and things because they kept showing up in coding I saw. As for them being a mix ( html and xhtml ), I probably just copy/pasted someone elses into mine… thinking it was right.

The empty line was not in my code, by the way. It was an extra blank line at the end of an include file. I removed it and it resolved that problem.

Now with the help I have found on this site, I have this crisp, clean source on my login page. ( This is just a personal project and nothing online for others to see. )


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MyPage.com</title>
      <link rel="stylesheet" type="text/css" href="../styles/admin.css">
  </head>
  <body>
    <div id="wrap">
      <p>Admin Login</p>
          <form method="POST" action="admin.php">
            <label>Username</label>
            <input size="15" maxlength="15" type="text" name="admin">
            <br>
            <label>Password</label>
            <input size="15" maxlength="15" type="password" name="password">
            <br>
            <input type="submit" name="submit" value="Log in">
          </form>
      <p><a href="mailto:webmaster@mypage.com">Webmaster@MyPage.com</a></p>
    </div>
  </body>
</html>

Thanks again to everyone for their help and for being patient. The above code may seem basic and trivial to most on this site, but it is a major step for me.

8

Coding is basically about elegance like mathematics; technically there is nothing wrong with your code but how you code is the pattern you will most likely continue with. I use the following:

<!DOCTYPE html SYSTEM “about:legacy-compat”>

9

A blank line shouldn’t cause any problems but a stray character or indeed html comments will send IE into quirks mode and in quirks mode it uses the broken box model and forgets about all the other new features of css that it had learned.

Just try this simple code in ie6 - 8 and see the dramatic difference the display makes compared to other browsers.


<!-- comment  -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">

div{
    width:300px;
    height:300px;
    background:red;
    padding:150px;
}
</style>
</head>

<body>
<div>test</div>
</body>
</html>

As you can see the display is wildly different in IE compared to others so that’s a good reason to always have a proper modern doctype.