What is Difference Between HTML and XHTML?
FREE
HTML is a markup language that was used to build the world's first webpage. Ever since this webpage was created, there have been a lot of modifications and variations done in the HTML language, such as adding the concept of error handling, addition of new features such as a table, etc., because of which XHTML came into the picture.
Both languages are used to build web and Android applications. However both languages are the two sides of the same coin, but there are some major differences between the two.
HTML stands for Hypertext Markup Language, whereas XHTML stands for Extensible Hypertext Markup Language. It is an extension of HTML and is stricter and more structured compared to HTML.
In this article, we will be pointing out some major differences between the two of them.
HTML vs. XHTML
| HTML | XHTML |
|---|---|
| 1. HTML is an SGML-based language. That is, it defines the standard for generalizing the markup languages for documents. SGML stands for Standard Generalized Markup Language. | 1. XHTML is an XML-based language, which means it manipulates and processes data using XML technologies. |
| 2. HTML is not a case-sensitive language. | 2. XHTML is a case-sensitive language. |
| 3. HTML empty elements do not require a closing tag at the end, not even a "/" symbol to signify the end of the tag. | 3. XHTML empty elements must always be closed; that is, there must be a "/" symbol at the end of the empty element. |
| 5. The tags and attributes in HTML can be specified either in lowercase or uppercase since it is not case-sensitive. | 5. All XHTML elements and attributes must be in lowercase since it is a case-sensitive language. |
| 6. The HTML document requires a minimum of four tags to create an HTML page that is <html>, <head>, <title>, and <body>. The <!DOCTYPE> declaration is not necessary for HTML. | 6. An XHTML document must contain the <!DOCTYPE> declaration followed by the <html>, <head>, <title>, and <body> tags in its document to create a webpage. Moreover, the xmlns attribute in <html> tag is also necessary. |
| 7. Some HTML elements may function properly without a closing tag. | 7. All the XHTML elements must be closed. Even the empty elements also require a closing tag. |
| 8. Some elements in HTML may be improperly nested; that is, they do not need to be closed in the order in which they are opened. | 8. All XHTML elements, however, must be properly nested within each other; that is, they must be closed in the order in which they were opened. |
| 9. It is not mandatory to put quotes while using the attributes in HTML. | 9. It is mandatory to put quotes around an attribute in XHTML. |
| 10. It allows attribute minimization, where boolean attributes can omit their values. For example, "checked". | 10. It does not allow attribute minimization. All the attributes must be written in full attribute-value pairs. |
| 11. The webpage is displayed even if the HTML document has some errors in it. | 11. There is a more strict error handling in XHTML. |
| 12. It can have a filename extension of.html or.htm. | 12. Its filename extension can be .xhtml,.xht, or .xml. |
Examples
There are a lot of differences specified above in the table that we are going to look at here in detail with the help of examples.
An XHTML Document with a Minimum of Required Tags
The XHTML document requires some tags that must be present in the document, without which the web or Android application cannot be created.
Firstly, the <!DOCTYPE> declaration must be present in an XHTML document. Furthermore, the <html>, <head>, <title>, and <body> tags must be specified in the document.
Moreover, it also requires the xmlns attribute in <html> to specify the XML namespace for the document.
Let us see it with an example-
The first two lines of the example are the DTD (Document Type Definition), which tells the browser which type of markup language the web page is using. However, it is always written at the start of an XHTML document.
After which, the <html> tag is defined. Everything that is inside an HTML or XHTML document must be enclosed within the <html> tag.
Further, the <head>, <title>, and <body> tags are defined, which specify the rest of the content of the webpage.
XHTML Elements Must be Properly Nested
All the XHTML elements must be properly nested. That is, they should be closed in the same order in which they were opened.
Let us see it with an example.
Wrong:
The above code snippet is wrong because the <b> and <i> tags used above are not properly nested. The <i> tag is used as a child of the <b> tag since it is opened after it. Therefore, it must be closed inside the <b> only.
However, the correct way to represent them is as follows-
Correct:
<b><i> Hello! You are welcome here. </i></b>
XHTML Elements Must Always be Closed
The elements in XHTML must always be closed.
Let us see it with an example.
Wrong:
The above code snippet is wrong because the <h1> and <h2> tags are opened but not closed. They must always be closed.
However, the correct way to represent them is as follows-
Correct:
Empty Elements in XHTML Must Always Be Closed
Empty elements are those that do not contain anything between them. Therefore, these tags do not contain a closing tag, but they must be closed with the symbol ‘/’ at the end of the tag.
These tags are used to perform some action on the webpage, such as including a horizontal line, adding an image, etc.
Let us see them with an example.
Wrong:
The above code snippet is wrong because the empty tags <hr> and <img> used above are not closed. Empty tags are self-closing tags and must be closed with a '/' symbol.
However, the correct way to represent them is as follows-
Correct:
XHTML Attribute Names Must be in Lowercase
XHTML elements and attribute names must be in lowercase as it is a case-sensitive language and treats upper and lowercase letters differently.
Let us see them with an example.
Wrong:
<DIV>
<P> Hey there! How are you> </P>
</DIV>
The above code snippet is wrong because the elements <DIV> and <P> are not in lowercase. The tags and attributes in XHTML must always be in lowercase.
However, the correct way to represent them is as follows-
Correct:
<div>
<p> Hey there! How are you> </p>
</div>
XHTML Attribute Minimization is Forbidden
Attribute minimization refers to just specifying the attribute name without specifying its value.
XHTML does not support attribute minimization. The attribute-value pairs in XHTML must be written completely.
Let us see them with an example.
Wrong:
<input type="checkbox" name="gender" value="male" checked/>
<input type="text" name="Address" disabled/>
The above code snippet is wrong because the attributes checked and disabled are not provided with their values. This is known as attribute minimization, which is forbidden in XHTML.
However, the correct way to represent them is as follows-
Correct:
<input type="checkbox" name="gender" value="male" checked="checked" />
<input type="text" name="Address" disabled="disabled" />
Learn More
You can learn more about HTML in this article.
Conclusion
- HTML stands for Hypertext Markup Language, whereas XHTML stands for Extensible Hypertext Markup Language.
- XHTML is basically an extension of HTML, which is stricter than HTML.
- Both languages are used to create web and Android applications.
- HTML is SGML based, whereas XHTML is an XML-based language.
- HTML is easy to learn for beginners, and then they can move on to XHTML.
- If you want to create more strict and structured content on the webpage, then XHTML is best suited for the purpose.
- However, if one wants a flexible version of a webpage, one should prefer HTML.