HTML vs. XHTML

Differences Between HTML and XHTML

Although HTML and XHTML appear to have similarities in their syntax, they are significantly different in many ways.

Note: As the current WHATWG document is a draft, this section will need to track to a moving target.
Differences marked @@@ are differences that could theoretically be changed without affecting backwards compatibility.

MIME Types

• XHTML must be served with an XML MIME type, such as application/xml or application/xhtml+xml.
• HTML must be served as text/html.

Parsing

XHTML uses XML parsing requirements. HTML uses its own which are defined much more closely to the way browsers actually handle HTML today.

• In XHTML, well-formedness errors are fatal. In HTML, error handling rules are much more graceful. Well-formedness errors, which are also syntax errors in HTML, include the following:
  • Unencoded ampersands (&) and less than signs (<) (This does not apply to CDATA).
  • Comments containing extra pairs of hyphens or ending with a hyphen. e.g. <!-- syntax -- error --> or <!-- syntax error --->.
  • Mismatched end tags (does not apply to elements with optional tags)
  • Unclosed tags.
  • Unexpected characters occuring in or before attribute names.
  • Unexpected occurrence of EOF.
  • Unexpected characters before the DOCTYPE name.
  • Missing DOCTYPE name.
  • A PUBLIC identifer in a DOCTYPE without a SYSTEM identifier (Note: including either of these is a syntax error in HTML5; but, in XML only the SYSTEM identifier is allowed to occur on its own).
  • End tags with attributes.
  • Unexpected end tags (in HTML, an unexpected </br> or </p> can cause the start tag to be implied before it).
• The internal subset is permitted in XML, but meaningless (and forbidden) in HTML.
  • In some cases, an internal subset in HTML would end up being partly rendered inline.
• The sequence of characters "]]>" when it does not mark the end of a CDATA section is a well-formedness error in XHTML, but valid in HTML.
• In XHTML: <![CDATA[...]]> is a CDATA section. In HTML, it's a bogus comment.
• In XHTML, <?foo ...?> is a processing instruction. In HTML, it's a bogus comment.
• In HTML, the trailing slash used for the empty element syntax is a parse error for non-void elements (see below), but is ignored in all cases.
• In HTML, the script and style elements are parsed as CDATA. (Note: the definition of CDATA differs from that in XML). In XML, they're parsed as normal elements (which means that comments are treated as real comments, and things that look like start tags actually are start tags).
• In HTML, the title and textarea elements are parsed as RCDATA. (Note: The definition of RCDATA differs from that in SGML and there is no RCDATA in XML).
• In HTML, if scripting is enabled, the noscript element is parsed as CDATA. If scripting is disabled, it's parsed as PCDATA. In XHTML, the element has no effect, and can't really be used to stop content from being present when script is disabled.
• In HTML, the iframe, noembed and noframes elements are parsed as CDATA. In XHTML, they are parsed as normal elements, and therefore do not stop content from being used.
• White space characters in attribute values are normalized to spaces in XHTML.
• Elements with optional tags are implied in certain conditions.
• In HTML, base, link, meta, style and title elements with tags occurring in the body are moved inserted into the head. In XHTML, they stay where they were specified.
• In HTML, tags for certain elements, which appear out of context, are ignored. This includes caption, col, colgroup, frame, frameset, head, option, optgroup, tbody, td, tfoot, th, thead, tr.
• The plaintext element has a special parsing requirement in HTML. (it is, however, forbidden).
• Many other special handling of edge cases and error conditions, not all of which are listed here, occur in HTML.

Syntax

• In HTML, the doctype is required. In XHTML, it is optional.
• In XHTML, tag names and attribute names are case sensitive. In HTML, they are case insensitive.
• In XHTML, non-empty elements require both a start and an end tag. In HTML, certain elements allow the omission of either or both:
  • html (both)
  • head (both)
  • body (both)
  • li (end tag)
  • dt (end tag)
  • dd (end tag)
  • p (end tag)
  • colgroup (both)
  • thead (end tag)
  • tbody (both)
  • tfoot (end tag)
  • tr (end tag)
  • td (end tag)
  • th (end tag)
• In XHTML, empty elements may use either the empty element syntax (<br/>) or have an end tag immediately follow the start tag (<br></br>). In HTML, the empty element syntax (trailing slash) is allowed on void elements, but forbidden on other elements. However, it serves no purpose whatsoever and can be omitted. End tags for void elements are forbidden.
  • base, link, meta, hr, br, img, embed, param, area, col and input
  • Note: the following are treated as void elements for the purpose in the parsing requirements, but, as they are obsolete and non-standard, the trailing slash is not permitted: basefont, bgsound, spacer, wbr. (although, since these elements are not permitted anyway, it doesn't make much difference).
• HTML allows attribute minimisation (i.e. omitting the value), XHTML does not.
• HTML allows the use of unquoted attribute values, XHTML does not.
• XHTML allows the use of CDATA sections, HTML does not.
• XHTML allows the use of processing instructions, HTML does not.
• In HTML, all entity references are predefined and do not require a DTD. But because there is no DTD for XHTML5, entity references cannot be used in XHTML. (excluding the 5 predefined entities: &, <, >, " and ')
  • You may provide your own DTD for use with your own validating parser, but be aware that browsers do not use validating parsers and will not read the DTD.
• The valid set of unicode characters in XML 1.0 is limited beyond that in HTML.
• Namespace prefixes are permitted in XHTML. They are forbidden in HTML.

Markup

• XHTML allows non XHTML elements and attributes (in different namespaces) to be used, HTML does not.
• XHTML uses the xml:lang attribute, HTML uses lang instead,
• XML ID introduces xml:id, which could be used in XHTML. In HTML it has no effect.
• The namespace declaration (xmlns attribute) is required in XHTML, but forbidden in HTML
• In HTML, the noscript element may be used. In XHTML, it is forbidden.
• HTML uses the base element, XHTML uses xml:base instead.
• In XHTML, p elements may contain structured inline level elements including blockquote, dl, menu, ol, ul, pre and table. In the HTML serialisation, due to backwards compatibility constraints, this is not possible (though it may be done through DOM manipulation).
• In XHTML, table elements may contain child tr elements. In the HTML serialisation, due to backwards compatibility constraints, this is not possible (though it may be done through DOM manipulation).

Character Encoding

• In XHTML, the XML declaration may be used to specify the character encoding. In HTML, the xml declaration is forbidden
• In HTML, the meta element may be used insted. The http-equiv attribute on the meta element is forbidden in XHTML and is ignored if included.
• The default character encoding for XHTML is, according to XML rules, UTF-8 or UTF-16. If the encoding is unspecified in HTML, it should be determined through implementation specific heuristics or fallback to a default value (Note: this section of the spec is not yet finished).

Scripts

• document.write() and document.writeln() cannot be used in XHTML, they can in HTML.
• In XHTML, the use of the innerHTML property requires that the string be a well-formed fragment of XML.
• DOM APIs are case sensitive in XHTML and some are case insensitive in HTML. (This does not apply to elements which are not in the HTML namespace)
  • Element.tagName, Node.nodeName, and Node.localName return the value in uppercase.
  • Document.createElement() is case insensitive (the canonical form is lowercase).
  • Element.setAttributeNode() will change the attribute name to lowercase.
  • Element.setAttribute() is case insensitive (the canonical form is lowercase).
  • Document.getElementsByTagName() and Element.getElementsByTagName() are case insensitive.
  • Document.renameNode(). If the new namespace is the HTML namespace, then the new qualified name must be lowercased before the rename takes place.

Stylesheets

• Selectors, as used in CSS, match case sensitively in XHTML, but case insensitively in HTML.
• CSS requires special handling of the body element in HTML for painting backgrounds on the canvas, which do not apply to XHTML.

Other Information

'Note: This section should probably be removed, tidied up or moved to the discussion page.

An often repeated assertion is that XHTML is as different from HTML as RDF/XML is from N3. And that the proper way to tell the two apart is via MIME types.

There are only two problems with that. XHTML is not as different from HTML as RDF/XML is from N3. And MIME types can't be relied on. Let's take each in turn.

Syntax

• Both N3 and RDF/XML are used to express sets of RDF triples. They are equally capable: every triple store can be dumped into either format. The analogy here is the DOM. It is not currently the case that every DOM tree can be dumped equally capably into either format.
• N3 and RDF/XML are not the same, nor do they even look similar. They are different from top to bottom. Not only are no N3 documents valid RDF/XML, there are no individual triples that can be expressed the same way in both formats.

Need to explain how RDF/N3 is relevant! --Lachlan Hunt 04:43, 4 December 2006 (UTC)

Mime Types

• People have consistently proven that they can't be trusted to configure and set MIME types correctly. Most aren't even aware that MIME types exist. The default setup with Apache is to not allow overrides. One popular use case is for documentation that is served via file:/// URIs directly from your hard disk.
• HTTP as specified indicates that the the Content-Type header is authoritative - it trumps the XML prolog. HTTP as practiced treats the MIME type as a hint. Whether it be feeds or WMV files, users have an expectation as to what happens when they click on these links, and are unhappy when the browser lets them down.

Ideals

In an ideal word:

• the syntax of XML and HTML would be either complete identical or completely different.
  • The syntax of HTML and XHTML are completely different. The fact that they look similar on the surface is irrelevant. (see above). --Lachlan Hunt 04:43, 4 December 2006 (UTC)
• the set of DOM trees that could be serialized as XHTML and HTML would either be completely identical or completely different.
• Content-Type would either aways be respected, or always be ignored.
• there would either be a fool-proof way to "sniff" whether the a given content was HTML or XHTML; or there would be no difference between XHTML and HTML in terms of syntax and range of DOM trees that could validly be serialized would also be identical.
  • There is a foolproof way... the MIME type. :-) -Hixie

Analysis

Obviously, the current situation is less than ideal. XML and HTML evolved from a common ancestor. XML isn't changing. And the constraint to be as backwards compatible with HTML4 as humanly possible places practical limits on what can be done. Neither being absolutely identical with the XML syntax nor being completely different are options.

At the present time, the HTML5 syntax is a (near) superset of the XHTML syntax. Yet the situation is (nearly) reversed for the set of DOM trees that can be serialized into XHTML is larger than the set of DOM trees that can be serialized into HTML5.

Having the syntaxes being substantially similar leads to confusion in some edge cases (e.g.,

) but also has some advantages. Similar syntaxes would make things easier for people who have become disillusioned with XHTML and wish to migrate to HTML5. Conversely, similar syntaxes would make incremental migration from HTML5 to XHTML5 easier for those who wish to take advantage of the greater set of DOM trees that can be represented in that syntax.

Potential Strategies

Note: these strategies are not necessarily mutually-exclusive.

• Develop better tools and actively work to integrate them into products like WordPress and DreamWeaver. (We're doing this already. -Hixie)
• The definition of HTML5 understandably and correctly puts a higher weight on HTML4 compatibility than XHTML migration. But as a migration aid, identify some unlikely/invalid combination (example: use of the HTML5 DOCTYPE combined with xmlns attribute on the html element combined with the use of a non-xml MIME type) and adjust some (as of yet undefined) set of the HTML5 parsing rules.