Free Web development courses with real-time projects Start Now!!
Welcome to DataFlair HTML Tutorial series. In this article, we are going to see HTML vs XHTML. So firstly we will see each of HTML and XHTML and then we will learn differences between HTML and XHTML. So let’s start.
HTML
HTML(Hyper Text Markup Language) is a combination of Hyper Text i.e., linking of web pages, and Markup language, which uses tags to define the content within a document. Thus, we use HTML to structure the web pages and display them to the users. It is the most basic building block of the web and billions of websites have been developed using HTML and rendered onto the browsers.
HTML was developed by Tim Berners-Lee in the late 1990’s and since then has developed from a small number of tags to a complex mark-up framework. It has enabled the developers to create interactive web pages with animated images, sound, and gimmicks of all sorts.
XHTML
XHTML stands for EXtensible Hypertext Markup Language. It was developed by the World Wide Web Consortium(W3C) Recommendation and has significantly helped the developers to work comfortably with XML. XHTML helps the developers to enter the world of XML, yet remain comfortable with the working experience due to the compatibility of the prior technology with the new one.
XHTML 5 is the standard specification currently prevailing, and we can use it to develop an XML adaptation of HTML5.
Even though XHTML is similar to HTML, it is important to write the correct code since it is more strict than HTML in case-sensitivity and syntax-correctness. XML parsers systematically structure and parse the XHTML documents, unlike HTML, where parsing is lenient.
Why use XHTML?
- XML conforming – XHTML documents are XML conforming and are easily validated and edited using the tools of XML.
- Maintainability – XHTML documents have a proper structure and the web-pages can be easily processed and parsed by the developers.
- Quality Web-pages – Due to the strictness of XHTML and its consistent structure, quality web-pages are rendered.
Strength of HTML- XHTML portrays combined strength of HTML and XML. - Browser Compatibility – Due to its strictness, consistent code is worked upon, thus ensuring compatibility across various browsers.
- Standardized – The standard of code that is represented through XHTML documents is used on different devices, without any changes.
Benefits of XHTML
- Cleaner Code – It generates cleaner code since it is mandatory to close all the tags and ensure proper nesting.
- Less Bandwidth – Since XHTML documents are lean, they consume less bandwidth, which reduces the cost of rendering large websites.
- Well-formatted – XHTML documents are well-formed and formatted, thus can be easily deployed to other devices. For example, Braille readers and other environments.
- XML- XHTML is a version of XHTML, thus enabling the developers to enter the world of XML.
- Use of CSS – XHTML works along with CSS, thus enabling easy updates.
Structure of XHTML Document
The document consists of three parts-
- DOCTYPE – Used to declare the document type definition(DTD).
- Head – Used to define the title and other related attributes.
- Body – Used to define the content of the website.
Rules for XHTML Coding
Let us now see the comparison between HTML and XHTML.
1. <!DOCTYPE> is compulsory
The XHTML document must have the <!DOCTYPE> declaration and the <html>,<head>,<title>,<body> elements are also mandatory. The xmlns attribute within <html> must specify the namespace for xml for the document. Here is a basic XHTML document-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title of document</title> </head> <body> Content </body> </html>
2. Proper Nesting
There should be proper nesting of elements.
Correct-
<b><i>DataFlair</i></b>
Incorrect-
<b><i>DataFlar</b></i>
3. Closing Elements
XHTML elements should always be closed by a closing tag, including the empty tags.
Correct-
<p>Paragraph1</p>
<p>Paragraph2</p>
Break: <br />
Horizontal rule: <hr />
Image: <img src=”rainy.gif” alt=”rain” />
Incorrect-
<p>Paragraph1
<p>Paragraph2
Break: <br>
Horizontal rule: <hr>
Image: <img src=”rainy.gif” alt=”rain”>
4. Lowercase
XHTML elements and attributes must always be in lowercase.
Correct-
<body>
<p>Paragraph</p>
<a href=”https://data-flair.training/”>DataFlair</a>
</body>
Incorrect-
<BODY>
<P>Paragraph</P>
<a HREF=”https://data-flair.training/”>DataFlair</a>
</BODY>
5. Quoted attribute values
The attribute values of XHTML must be quoted.
Correct-
<a href=”https://data-flair.training/”>DataFlair</a>
Incorrect-
<a href=https://data-flair.training/>DataFlair</a>
6. Attribute minimization
Attribute minimization is strictly forbidden in XHTML.
Correct-
<input type=”checkbox” name=”vehicle” value=”bike” checked=”checked” />
<input type=”text” name=”firstname” disabled=”disabled” />
Incorrect-
<input type=”checkbox” name=”vehicle” value=”bike” checked />
<input type=”text” name=”firstname” disabled />
Differences Between HTML and XHTML
| Basis for Difference | HTML | XHTML |
| Definition | HTML, HyperText Markup Language is the markup language for creating web pages | XHTML (Extensible HyperText Markup Language) is a family of XML markup languages that extend versions of the widely used HTML. |
| Type of format | Document File | Markup Language |
| Function | Web-pages written in HTML and rendered by the browsers. | Web-pages written in XHTML which is stricter than HTML and provides a XML-based environment. |
| Parser | Flexible framework with lenient HTML parser. | Restrictive subset of XML parsed with standard XML parsers. |
| Case-sensitivity | It is not case-sensitive | It is case-sensitive. |
| Internet media type | It is text/html | It is application/xhtml+xml. |
| Extended from | It is Extended from SGML. | Extended from XML, HTML. |
| Expressive | Less Expressive | More Expressive |
| Filename Extension | It’s Filename extension is .htm or .html | Filename extension is .xhtml, .xht, .xml, .htm or .html. |
| Constraints | No such well-organized constraints | Well-organized constraints. |
| Application | Application of Standard Generalized Markup Language (SGML). | It’s an Application of XML |
| Developer | Proposed by Tim Berners-Lee in 1987. | World Wide Web Consortium Recommendation in 2000. |
| Versions | It’s Versions are HTML2, HTML3.2, HTML4, HTML5. | Versions- XHTML1, XHTML1.1, XHTML2, XHTML5. |
Summary
In this article, we’ve discussed the renowned subset of XML i.e., XHTML. XHTML is very much similar to HTML and incorporates most of its syntax. However, it has a more restrictive framework and stricter syntax rules than HTML. It was developed by W3C Recommendation in 2000 and has proven to be of utmost benefit for the developers. We’ve discussed the significant differences between HTML and XHTML in this article.
Hope you liked the article. Do share your feedback in the comment section.