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?!

Improve this question
6
  • 7
    Do you have a valid doctype in the first line of your HTML? Commented Apr 29, 2011 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? Commented Apr 29, 2011 at 23:27
  • @Dominic Barnes: my first lines are: <html xmlns="http://www.w3.org/1999/xhtml"> <!DOCTYPE html> <html> <head> Commented Apr 29, 2011 at 23:28
  • @hey: So let me get this straight: If your first two lines are <html xmlns="http://www.w3.org/1999/xhtml"> <!DOCTYPE html> - then everything works fine. But if your first two lines are <!DOCTYPE html> <html>, then everything is broken? Is that the case? If so, it's umm.. not good. Commented Apr 29, 2011 at 23:40
  • What I think was actually going on was this: The <!DOCTYPE html> 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 <html> element. Commented Aug 23, 2013 at 1:32

4 Answers 4

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

"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.".
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.
your HTML is missing doctype and you are implying a table-based layout
@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.
You mean the one which follows the "(note the conspicuous lack of a <!DOCTYPE> 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?
|
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="https://stackoverflow.com/stylesheet.css" type="text/css" />
    </head>
    <body>
            <!-- your html content -->
            <script src="https://stackoverflow.com/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.

Improve this answer

1 Comment

I like this answer more. Short and simple.
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.

Improve this answer

Comments

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.