53

I can't believe what is happening in my website. When I add this line:

<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html>
 <head>

Everything works fine. And when I don't, CSS "messes" up, everything becomes different and layout becomes "ugly".

How can this line solve all the problems?!

jeroen
  • 91,079
  • 21
  • 114
  • 132
good_evening
  • 21,085
  • 65
  • 193
  • 298
  • 7
    Do you have a valid doctype in the first line of your HTML? – Dominic Barnes Apr 29 '11 at 23:26
  • 1
    Are you sure it's not the line *above* that one that's making the difference? What browser are you testing with? – thirtydot Apr 29 '11 at 23:27
  • @Dominic Barnes: my first lines are: ` ` – good_evening Apr 29 '11 at 23:28
  • @hey: So let me get this straight: If your first two lines are ` ` - then everything works fine. But if your first two lines are ` `, then everything is broken? Is that the case? If so, it's umm.. not good. – thirtydot Apr 29 '11 at 23:40
  • What I think was actually going on was this: The specified HTML 5 and the document isn't HTML 5. Adding the HTML tag above it didn't get it processed as XHTML -- it got it processed as HTML 4 (Quirks Mode). The xmlns line was ignored, as was the HTML 5 doctype and the extra element. – yam655 Aug 23 '13 at 01:32
  • @Oriol: I'm reopening this as I think an answer specific to HTML/XHTML would be useful (even if just to say "it allows XHTML 1.0/1.1 markup to validate, and does nothing in HTML5 and you can leave it out of an HTML5 document"). – BoltClock Sep 30 '18 at 06:15

4 Answers4

99

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.

Nisse Engström
  • 4,738
  • 23
  • 27
  • 42
Richard JP Le Guen
  • 28,364
  • 7
  • 89
  • 119
  • `"and thus working in quirks mode"` - I also think this is the case. As I said in my comment, `"If so, it's umm.. not good."`. – thirtydot Apr 29 '11 at 23:57
  • 4
    that's a brave attempt at an explanation, but a bit muddled. When discussing the height:100% matter, it would be better to leave XHTML out, since it's only the DOCTYPE (mostly just its presence or absence) that's relevant, not whether it's HTML or XHTML syntax. Then explain the namespace as being a property of XHTML separately. – Alohci Apr 30 '11 at 00:01
  • your HTML is missing doctype and you are implying a table-based layout – tereško Apr 30 '11 at 00:08
  • 1
    @teresko - True, but that's kind of the point ;) @Alohci - This is also true, but I didn't want to stray too far from `xmlns`, so I used XHTML so as to include it therein. – Richard JP Le Guen Apr 30 '11 at 00:13
  • You are absolutely right, I was writing invalid HTML for some of the things. Thank you. – good_evening Apr 30 '11 at 10:08
  • HTML should have a doctype. – Marcin Sep 11 '13 at 14:12
  • @Marcin - And I contradict that assertion how? – Richard JP Le Guen Sep 11 '13 at 15:43
  • Your html example lacks one. – Marcin Sep 11 '13 at 16:19
  • 3
    You mean the one which follows the "(note the conspicuous lack of a declaration)"? The example which is part of my explanation as to why the OP's markup is rendering as quirks mode HTML instead of XHTML? The one meant for the OP to try in a browser and go "ohhhh my markup is rendering in quirks mode because I'm not using a DOCTYPE!" Is that the HTML example you're referring to? – Richard JP Le Guen Sep 11 '13 at 20:14
33

Its an XML namespace. It is required when you use XHTML 1.0 or 1.1 doctypes or application/xhtml+xml mimetypes.

You should be using HTML5 doctype, then you don't need it for text/html. Better start from template like this :

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>domcument title</title>
        <link rel="stylesheet" href="/stylesheet.css" type="text/css" />
    </head>
    <body>
            <!-- your html content -->
            <script src="/script.js"></script>
    </body>
</html>


When you have put your Doctype straight - do and validate you html and your css .
That usually will sove you layout issues.

Yuhong Bao
  • 3,891
  • 1
  • 19
  • 20
tereško
  • 58,060
  • 25
  • 98
  • 150
8

It sounds like your site has CSS or JS that depends on running in quirks mode. Which is why you need garbage above your doctype to render "correctly". I suggest removing said garbage and then fixing your CSS+JS to actually work in standards mode; you'll save yourself a lot of pain in the long run.

Boris Zbarsky
  • 34,758
  • 5
  • 52
  • 55
0
The namespace name http://www.w3.org/1999/xhtml 
is intended for use in various specifications such as:

Recommendations:

    XHTML™ 1.0: The Extensible HyperText Markup Language
    XHTML Modularization
    XHTML 1.1
    XHTML Basic
    XHTML Print
    XHTML+RDFa

Check here for more detail

JWL
  • 13,591
  • 7
  • 57
  • 63