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?!
An XML namespace is a collection of names that can be used as element or attribute names in an XML document. The namespace qualifies element names uniquely on the Web in order to avoid conflicts between elements with the same name.
W3C HTML. https://html.spec.whatwg.org/multipage/ is the current HTML standard. It obsoletes all other previously-published HTML specifications.
XHTML stands for EXtensible HyperText Markup Language. XHTML is a stricter, more XML-based version of 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:
<!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> <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 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 anxmlns
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?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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With