You're mixing up HTML with XHTML.
Usually a <!DOCTYPE>
declaration is used to distinguish between versions of HTMLish languages (in this case, HTML or XHTML).
Different markup languages will behave differently. My favorite example is height:100%
. Look at the following in a browser:
XHTML
<!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">
<head>
<style type="text/css">
table { height:100%;background:yellow; }
</style>
</head>
<body>
<table>
<tbody>
<tr><td>How tall is this?</td></tr>
</tbody>
</table>
</body>
</html>
... and compare it to the following: (note the conspicuous lack of a <!DOCTYPE>
declaration)
HTML (quirks mode)
<html>
<head>
<style type="text/css">
table { height:100%;background:yellow; }
</style>
</head>
<body>
<table>
<tbody>
<tr><td>How tall is this?</td></tr>
</tbody>
</table>
</body>
</html>
You'll notice that the height of the table is drastically different, and the only difference between the 2 documents is the type of markup!
That's nice... now, what does <html xmlns="http://www.w3.org/1999/xhtml">
do?
That doesn't answer your question though. Technically, the xmlns
attribute is used by the root element of an XHTML document: (according to Wikipedia)
The root element of an XHTML document must be html
, and must contain an xmlns
attribute to associate it with the XHTML namespace.
You see, it's important to understand that XHTML isn't HTML but XML - a very different creature. (ok, a kind of different creature) The xmlns
attribute is just one of those things the document needs to be valid XML. Why? Because someone working on the standard said so ;) (you can read more about XML namespaces on Wikipedia but I'm omitting that info 'cause it's not actually relevant to your question!)
But then why is <html xmlns="http://www.w3.org/1999/xhtml">
fixing the CSS?
If structuring your document like so... (as you suggest in your comment)
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html>
<head>
[...]
... is fixing your document, it leads me to believe that you don't know that much about CSS and HTML (no offense!) and that the truth is that without <html xmlns="http://www.w3.org/1999/xhtml">
it's behaving normally and with <html xmlns="http://www.w3.org/1999/xhtml">
it's not - and you just think it is, because you're used to writing invalid HTML and thus working in quirks mode.
The above example I provided is an example of that same problem; most people think height:100%
should result in the height of the <table>
being the whole window, and that the DOCTYPE
is actually breaking their CSS... but that's not really the case; rather, they just don't understand that they need to add a html, body { height:100%; }
CSS rule to achieve their desired effect.