HTML has ruled for almost a decade as the primary markup language for websites. However, we browsers evolved, the rendering of HTML code were different on every browser. It was when XHTML came into the picture. In this article, we will share the differences between HTML and XHTML.
Differences between HTML and XHTML
As a summary, HTML XHTML difference is on these points:
- MIME Types
- Parsing and Syntax
- Parsing Modes
- Case Sensitivity
- Error Handling
- Character Encoding
- Namespaced Element
- XLink attributes
- The DOC type
- Strict HTML Element closing
- CDATA Comment
HTML stands for Hyper Text Markup Language. XHTML stands for Extensible HyperText Markup Language. They are like two sides of a coin, except that the other side, XHTML, is strict. XHTML is the successor of HTML, and it doesn’t allow developers to get away with lapses in thier coding and HTML structures.
Every browser has its own specific HTML tags. This is the reason XHTML came into the picture to handle those convoluted browser-specific tags. There are the most critical differences between HTML and XHTML and they can be classified under MIME types, Parsing, and Syntax.
MIME stands for Multipurpose Internet Mail Extensions. In HTML you need to use text/html. In XHTML, you need to use XML MIME type like application/xhtml+xml or application/xml. Here are some HTML MIME types:
Parsing and Syntax
The biggest difference between the two is that HTML uses its own parsing requirement while XHTML uses XML parsing requirement. Let’s look at each feature and the difference in each feature in HTML and XHTML.
HTML: In HTML, three different parsing modes have been defined and they are quirks mode, no quirks mode, and limited quirks mode.
XHTML: There is only one parsing mode. It is by XML parsing rules.
HTML: No elements are case sensitive.
XHTML: Every element is case sensitive and must be used in lower case only.
HTML: There is no well-formedness constraint and hence there are no errors that are fatal
XHTML: Well-formedness errors are all fatal
HTML: In HTML, the XML declaration is treated like a bogus comment or in other words it is forbidden. Even though, you can use the charset attribute with the meta element.
XHTML: Here, you need to use an XML declaration to specify the character encoding. The default character encoding is UTF-8 or UTF-16.
HTML: In HTML, namespaced prefixes are not allowed. Foreign elements are not treated as if they belong to another namespace and are displayed by default as inline elements.
XHTML: In XHTML, the namespace needs to be declared for HTML elements. You can use foreign elements independent of HTML elements.
HTML: In HTML, Foreign elements can use attributes like xlink:arcrole, xlink:actuate, xlink:role, xlink:href, xlink:title, xlink:show, and xlink:type. You can use only xlink as prefix.
XHTML: Based on conformance rules that have been defined by Namespaces in XML, XLink attributes can be specified on foreign elements. You can use any prefix.
HTML: In HTML, names are not case sensitive and it allows attribute minimization.
XHTML: In XHTML, names are case sensitive and it doesn’t allow attribute minimization. Make sure to quite all attribute values.
HTML: In HTML, the DOCTYPE is mandatory even though it has no value. DOCTYPE is treated case insensitively and all HTML documents should use <! DOCTYPE html >
XHTML: In XHTML, you can even use an HTML5 DOCTYPE or any custom DOCTYPE.
All tags within XHTML must close correctly
While using XHTML, make sure to close any open HTML tags, and use short tags correctly. Otherwise, the page may render differently on different browsers as they will close those tags as per their anticipation.
HTML: <![CDATA[…]]> is not a valid CDATA comment. Anything that goes within this comment is considered as content data.
XHTML: <![CDATA[…]]> is a valid CDATA comment. If the content within this section contains any “]]>” then it can give unexpected errors.
So these are some of the major differences between HTML and XHTML which every web designer should be aware of. Cross browser compatibility is one of the considerable enhancements on XHTML 1.1. It is a subset of which supports most advanced mobile browser and is known as XHTML Mobile Profile (XHTML MP).