HTML vs XHTML

[Lugzburz]

I'm just learning web design - which standard should I be concentrating on? HTML 4 or XHTML?

[trigun879]

I think You should go with HTML but that's just my opinion

[Lugzburz]

What is the real difference?

[ko4]

yeah i wanna know too, what's difference ?

[sanils]

What is XHTML?
XHTML 1.0 is a 'reformulation of HTML 4 as an XML 1.0 application', according to the XHTML 1.0 specification.
In other words, it is an XML-based markup language that has the same set of element types and attributes as HTML 4.

How is XHTML different from HTML?
XHTML is fundamentally different from HTML, despite looking very similar.

* XHTML is XML, which means that the syntax rules are slightly different.
* There are things you can do in XHTML which you cannot do in HTML.
* There are things you can do in HTML which you cannot do in XHTML.
* There are differences concerning CSS.
* There are differences concerning client-side scripting (e.g., JavaScript).


Differences in Syntax Rules

* XHTML is case-sensitive, HTML is not. All tags and attributes must be lowercase in XHTML.
* XHTML, being XML, must be well-formed. Every element must have an end tag, or use the self-closing tag syntax. HTML allows some end tags and even some start tags to be omitted.
* If an XML parser encounters a well-formedness error, it must abort. An SGML or HTML parser is expected to try to salvage what it can and keep going.
* All attributes must have a value in XHTML. HTML allows some attributes (e.g., selected) to be minimised.
* All attribute values must be surrounded by double or single quotes. HTML allows quotes to be omitted if the value contains only alphanumeric characters (and some others).
* The comment syntax is more limited in XHTML, but that's rarely an issue for most designers/developers.


Things You Can Do in XHTML But Not In HTML

* Use CDATA sections (<CDATA>). That's useful if you have content with lots of literal characters that otherwise need to be escaped.
* Use PIs (processing instructions), e.g., to link to a style sheet:
<xml>
* Include elements from other XML namespaces (see below).
* Use the &apos; character entity.


Things You Can Do in HTML But Cannot Do in XHTML

* 'Hide' the contents of style or script elements with SGML comments (<!--…-->).
* Create parts of the page dynamically with JavaScript while the document is still loading (e.g., using document.write()).
* Use named character entities (e.g., &nbsp;) other than the four predefined ones: &lt;, &gt;, &amp; and &quot;.
* Use the .innerHTML property with JavaScript (technically this is non-standard even in HTML).


Differences Concerning CSS

* Element type selectors in CSS are case sensitive for XHTML, but not for HTML.
* In HTML, the properties background-color, background-image and overflow on the BODY element will be applied to the root element (HTML) unless specified for that element also. That is not the case for XHTML.

In HTML some start tags are optional, but the element node exists in the document object model even if the tags don't occur in the markup. If we want to style header cells in the table body, we might use a CSS rule like this one:
Code:

tbody th {text-align:left}

In HTML, this will work even if we omit the <tbody> and </tbody> tags in our markup, because the TBODY element will be created anyway. That will not work in XHTML; unless we have explicit <tbody> and </tbody> tags, the selector will not match.

Differences Concerning JavaScript

* document.write() cannot be used with XHTML (see Why document.write() doesn't work in XML)
* DOM methods like createElement() must be replaced by their namespace-aware counterparts (createElementNS() etc.).
* The non-standard .innerHTML property should not be used for XHTML documents.
* The same issues with implicit elements that occur for CSS also apply for JavaScript.

[Lugzburz]

Thank you for your answer - very informative! How easily can you mix and match? Can you have a page that draws from elements of both?