Understanding HTML, XHTML and DHTML

As programmers, we come across the terms HTML, XHTML and DHTML on a daily basis. The difference between these is subtle but important to understand. This post will elaborate these concepts in further details. I would suggest reading my other post HTML Document Structure before proceeding.

HTML

Hyper Text Markup Language or HTML is a markup language used for creating web documents. It has the following characteristics:

1. HTML is a markup language and not a programming language.
2. HTML is an application of SGML (Standard Generalized Markup Language). SGML is a system for defining markup languages.
3. HTML markup consists of elements where each element has a start and end tag. The content of the element is contained between the two tags.
4. HTML also includes character reference and symbols such as ‘&lt;’ is used to represent the ‘<’ sign.
5. An HTML document allows comments.
6. HTML documents are validated by Document Type Definition or DTD.

XHTML

Extensible Hyper Text Markup Language or XHTML is the reevaluation of HTML 4. Both have sharp resembles but with subtle differences. However, the most critical difference between the two is that XHTML is an application of XML . This means that XHTML follows the XML syntax rules for validating web documents. These rules include the following:

1. XHTML is case-sensitive.
2. The entire document has only one root element.
3. Elements must be nested in the correct order.
4. Every element must have a closing tag leading to a well-formed document. Elements without content such ‘br’ must have a self-closing tag.
5. The element tags and attributes are in lowercase.
6. Attributes must be in double or single quotes.
7. Each attribute must have a corresponding value. There is no notion of default values.
8. If there is a syntax error in the XHTML document, the entire document is aborted from loading.
9. Comments are limited in XHTML.
10. The id attribute is used instead of name attribute.

Since XHTML complies with the above rules, it is portable across different platforms including web browsers, mobile phones, palm devices or any reduced browser. HTML, on the other hand, can ignore these rules altogether leading to document with syntax errors.

XHTML also deals with CSS differently. This includes the following characteristics:

1. Element Selectors are case sensitive.
2. In HTML certain properties (background, overflow) of the BODY element applies to the root HTML element as well. This is not true for XHTML.
3. In HTML, even if we omit some tags, elements still exist in the DOM and hence the CSS properties apply to them. This is not true for XHTML. The CSS will only apply to elements with proper markup.
4. MIME types (Content-Type header specified in HTML/XHTML document) are very important when using style-sheets in XHTML document. An XHTML document can work with application/xhtml+xml, application/xml and text/xml MIME types. An XHMTL document using text/xml MIME type is parsed as HTML. However, a style sheet written specifically for XHTML document may not work with text/xml MIME type (since its interpreted as HTML).

XHTML also deals with JavaScript differently. Some of these characteristics include the following:

1. XHTML does not support the .innerHTML property.
2. XHTML does not support document.write () otherwise it confuses the browser which is unable to tell whether a document is well formed or not. For example suppose we have a tag </MyTag> somewhere in the document. Obviously this is not a well formed tag. However, if somewhere above JavaScript uses the statement ‘document.write (“<MyTag>”);’ it will make it a valid tag. This means that unless the document is fully served, the browser cannot if it is a well formed document.
3. DOM methods are replaced by respective namespace-based methods.

DHTML

Unlike HTML and XHTML, Dynamic HTML or DHTML is not an industry standard and is not supported by W3C, IEEE or ISO. The term DHTM was coined by Microsoft. DHTML represents a set of several technologies/standards including HTML/XHTML, DOM, CSS and JavaScript. The merger of these technologies leads to development of Rich Client Applications. HTML/XHTML and CSS are used to create the static but rich visual appearance while JavaScript and DOM are used to make the web applications dynamic.

With this we come to the end of this post. I hope this post has given you a good idea about the difference between HTML, XHTML and DHTML. Do provide your feedback and stay tuned for more…