What does "<html xmlns="http://www.w3.org/1999/xhtml">" do?
HtmlCssXhtmlHtml Problem Overview
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?!
Html Solutions
Solution 1 - Html
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!
<html xmlns="http://www.w3.org/1999/xhtml">
do?
That's nice... now, what does 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!)
<html xmlns="http://www.w3.org/1999/xhtml">
fixing the CSS?
But then why is 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.
Solution 2 - Html
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.
Solution 3 - Html
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.
Solution 4 - Html
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