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?!
Check here for more detail
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 :
When you have put your Doctype straight - do and validate you html and your css .
That usually will sove you layout issues.
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
... and compare it to the following: (note the conspicuous lack of a
<!DOCTYPE>
declaration)HTML (quirks mode)
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)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)
... 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 theDOCTYPE
is actually breaking their CSS... but that's not really the case; rather, they just don't understand that they need to add ahtml, body { height:100%; }
CSS rule to achieve their desired effect.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.