A Comprehensive Comparison of XHTML Vs HTML5 with Features, Benefits, and Sample Code Examples:
This tutorial shall throw some light on the markup languages like XHTML, HTML5 and how they help in creating webpages.
Let us first understand the phrases XHTML and HTML5, then we will explore the differences between them and how these markup languages make our life easy while developing pages on the web.
What You Will Learn:
Comparison Of XHTML Vs HTML5
History of XHTML:
- In the year 2000, XHTML‘s first version also called XHTML 1.0, was launched by the World Wide Web. It came up with modern syntax rules and tags. It was a blend of XML and HTML. XHTML 1.0 was almost similar to HTML 4.0 and there were three document types (transitional, frameset and strict) under which developers categorized them.
- For XHTML 1.1 version (introduced in 2001), there came the concept of modules. Similar elements were grouped under a specific module that can be utilized by the developers, thereby reducing the lines of code. For example, <body>, <head>, <Html>, and <title> form a part of the Structure module.
Why Use XHTML (XML + HTML)?
XHTML stands for eXtensible HyperText Markup Language. While writing code in HTML, there are chances that you miss a closing tag or case for an element. XHTML makes coding more stringent, polished and often straightforward.
This should be taken into consideration that sometimes errors in HTML often called bad Html when code is not properly handled by the browsers on a small device like a mobile phone. Thus, XHTML which has the flavor of XML makes a page properly marked up.
XHTML has a lot of commands over the web page displayed on various devices and browsers. This leads to better ease of use and view of pages on the web. The modularized nature of XHTML is a salient feature that helps the developers in the reusability of code.
EXtensible Markup Language (XML) is a markup language that is used to relate, carry and supply data and HTML deals with the presentation of this data on the web. Thus robustness combination of both HTML and XML makes XHTML beneficial.
XML structure is depicted in the code snippet below:
<? xml version="1.0" encoding="UTF-8" standalone ="no"?> <xhtml> <component1>HTML</component1> <component2>XML</component2> </xhtml>
XML has only user-defined tags like <xhtml>, <component1> and <component2>. version, encoding and standalone is the part of the XML declaration. XML is self-explanatory and the above code explains the components of XHTML. However it cannot run on its own, software or a piece of code is required to present, receive or supply the information inside the tags.
Why Use HTML5?
XHTML is not compatible with the IE8 and other older versions of the browsers. HTML5 is capable of using XHTML style tags but not vice versa. While writing code in XHTML, there are several restrictions that the developers need to adhere to.
Some of the restrictions are listed below:
- XHTML elements and attributes should not be in uppercase.
- Always include a start and end tags.
- Doctype declaration at the beginning of the code is mandatory.
<html > <head> <title>HTML</title> <body> <P>Bad HTML </body>
The above code is an example of a bad Html code where the paragraph closing tag is missing and it is a capital letter.
Because of these restrictions, this markup language is considered stricter and so there came a gradual shift towards HTML5 which takes care of error handling in syntax, cases in the code, closing of tags and so on. In short, it is an advantage for developers.
Further reading =>> HTML Cheat Sheet With HTML5 Tags
Besides, it has features like audio, video, games, canvas, SVG, a good number of modern APIs like determining geolocations, web storage, drag, and drop. Also, it takes care of the semantics which makes the code more readable and easy to debug.
Please refer to the video to learn more interesting facts on why HTML 5 came into picture replacing XHTML:
What Is XHTML?
It is considered a HTML documented as XML. HTML 4.01 is nearly similar to XHTML. It is a polished version of HTML 4.01 and launched by World Wide Web Consortium. Modern browsers support XHTML.
Sample XHTML code snippet:
<? xml version="1.0" encoding="UTF-8"?> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>XHTML</title> </head> <body> <h1> XHTML heading</h1><br /> <p><i>this is an XHTML paragraph</i> </p> </body> </html>
Let’s discuss the code to know the structure of XHTML:
- XHTML DOCTYPE declaration is mandatory in the code. There are three sets of Document Type Declaration (DTD) in XHTML namely Strict, Transitional and Frameset.
- Xmln’s attribute should be compulsorily added to the document.
- Elements including empty ones (like br, hr) should have a closing tag.
- Elements should not be in the upper case.
- XHTML structure should always contain <html>, <head>, <title> and <body>.
- There should be only one root element <html>.
- Nesting of the elements should be proper, in the above code, the portion marked in bold explains nesting. This shows how nesting is achieved in XHTML.
- Version, encoding in the code are the part of the XML declaration.
Let’s see the output of the above code now:
How to write and execute an XHTML code?
Any text editor namely Notepad, Atom Editor or a Visual Studio source code editor can be used to write the XHTML code. We need to save the file with (.xhtml) to a location. Then open it in any browser.
Please watch this video for more information on how to create an XHTML doc.
Benefits of XHTML:
- XHTML pages can be corrected and improved because of cleaner code.
- It has a proper design and constant format which makes it easy for interpretation and processing by the browsers.
- Applets and scripts can be utilized by an XHTML document.
What Is HTML5?
We have discussed in detail about all the salient features of HTML5 in the article (HTML vs HTML5). Please refer to this tutorial to get all the essential knowledge on HTML5, its code structure, benefits, usage, and important elements.
Benefits of HTML5:
- New semantic tags like header, footer, aside, article, and nav make the code self- explanatory and debugging is easy.
- Audio, video, and games can be handled without the need for external plugins like flash.
- Shapes like a circle, rectangle and so on can be drawn easily with the canvas and SVG tags.
- Modern APIs deal with drag and drop feature, geolocation feature that gives the location of users and so on.
- Efficient error handling, web storage, efficiency are some other benefits of HTML5.
XHTML vs HTML5
Enlisted below are the differences between XHTML vs HTML5 in details.
|1||XHTML stands for Extensible HyperText Markup Language. It was launched by World Wide Web Consortium.||HTML stands for HyperText Markup language. It was a launched by the partnership between World Wide Web Consortium and Web Hypertext Application Technology Working Group.|
|2||There are three set of Document Type Declaration (DTD) in XHTML namely Strict, Transitional and Frameset which are complex.||Simpler and only one doctype declaration is present. It does not have the option to add or keep out a DTD url in the doctype.|
|3||This is an application which belongs to XML.||This is an application which belongs to Standard Generalized Markup Language|
|4||XHTML is a fusion of HTML and XML.||HTML5 is the latest version of HTML released till date.|
|5||It is case sensitive and in lower case.||It is not case sensitive.|
|6||All tags including the empty ones should be closed. ( < br/> , < /hr> ).||Empty tags need not be closed ( br , hr tags )|
|7||All attributes should have quotes.|
< table bgcolor="green" > , here bgcolor is the attribute for the table element.
|Enclosing attributes in quotes is optional.|
|8||Attribute should not shortened or minimized.|
< input type="radio" value="subject" checked="checked" / >
|Attribute for an element is depicted like this:
< input type="radio" value="subject" checked / >
|9||Nesting of the elements should be maintained.||No such restrictions.|
|10||XHTML structure comprises of < html>, < head>, < title> and < body> and there is only one root element < html>.||< html> , < head> , < title> and < body> tags are not compulsory.|
|11||XHTML has few attributes,like|
1) Core attributes which comprise of id, class, style.
2) Language attributes which comprise of lang, dir.
Some Microsoft Proprietary attributes are there only for few versions of IE like tabindex, autofocus, and language and so on.
|HTML5 has many attributes, like –
2) Bgcolor: Defines background color behind elements on the webpage.
3) Align: Places tags in the center, left or right.
Apart from these, there are many more.
|12||Requires an XML parser.||Requires an HTML specific parser.|
|13||Better suited for desktop users.||Specially designed for mobile users.|
|14||XHTML code is more descriptive and demonstrating.||HTML5 code is unexpressive but they have semantic meaning.|
|16||Type attribute mandatory for script element.||Type attribute may be skipped for script element.|
Why HTML5 is better than XHTML?
In recent times, HTML 5 is ahead of XHTML in all respects. Ease of use for the developers as well as end-users is the main reason for its popularity. User-friendly webpages can be designed from HTML5 due to its semantics. Screen readers can readily discover the content on the page with the help of <header>, <footer>, <nav>, <section>, <aside> and so on.
Audio, video support is a milestone for the HTML5. External plugins are not necessary for playing an audio, video.
The below code snippet shows how video element is used in HTML5:
<video height="240" controls> <source src="testhelp.mp4" type="video/mp4"> </video>
Controls attribute deals with the stop, play and volume of the video.
<Canvas>, <svg> elements of HTML5 is capable of handling various shapes.
The following code explains the use of the SVG vector:
<! DOCTYPE html> <html> <Body> <svg width="200" height="200"> <rect width="200" height="200" style="fill: yellow" /> </body> </html>
The square shape gets formed using svg element, please note we have used a rect element in the code, however, due to the uniform height and width dimension, a square gets formed.
Html5 has a very simple DOCTYPE declaration. XHTML declaration is complex and difficult to remember while coding.
<! DOCTYPE html> – declaration for HTML 5.
HTML 5 relies on web storage instead of cookies for storing information. This form of storage is a lot more secure and the amount of data transmitted is also huge. Also, there are a good number of APIs which give the benefit of drag and drop feature, determine geolocation information of the users and offline storage.
The dynamic content of the webpage is a reality now with the help of HTML5. Devices like smartphones, tablets are easily compatible with HTML 5 with the help of viewpoint settings of height and width, full-screen browsing for IOS users and many more.
XHTML gives us a well-formatted code, however, the amount of restrictions it imposes for developers has resulted in a shift towards HTML5 which has efficient error handling features. Also, XHTML is more suited for desktop usage and all modern days devices like mobiles, tablets, etc depend on HTML5 for the best results.
Features Of XHTML
Some prominent features and tags of XHTML are as follows:
a) XHTML has three sets of Doctype declarations.
These are explained as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
b) Attribute xmlns is mandatory for all XHTML document.
c) All the attributes should be enclosed in quotes, not minimized and in lower case.
Example of a correct attribute:
<input type="radio" value="test" id ="radio" disabled="disabled" />
d) There should be a single root element with proper structure of <html>, <head>, <title>, <body>. All elements should have the closing tag, in lower case and correctly nested.
Sample code snippet illustrating the above rule:
<? xml version="1.0" encoding="UTF-8"?> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>XHTML Heading Illustration</title> </head> <body> <h1> this is the opening heading</h1><br /> <p><i>this is an XHTML paragraph</i> </p> </body> </html>
e) The name attribute should not be used for XHTML.
f) World Wide Web has come with a validator that checks if our code adheres to the standard developed by them.
The code can be checked by stating the URL, file upload or by direct text input corresponding to the three separate tabs as shown in the above image.
Suggested reading =>> HTML Vs PHP
We have discussed the differences between XHTML vs HTML5 in all respects here.
HTML5 is an essential markup language that is relevant in today’s web development. While XHTML which is considered one of the previous versions of HTML 5 has some benefits over HTML’s other lower versions but it has its own set of pros and cons.
XHTML has made the code more descriptive and clear. However, it has imposed restrictions on the users which reduced usability. However, the XHTML modularity framework can be used to a larger extent. Also, we need to keep in mind that XHTML is specially designed for desktop applications and not for mobile users.
Further reading =>> HTML5 Vs Flash – Main Differences
We hope this article has refreshed your understanding of XHTML and HTML5. We will come up with related topics in the future as well.
All the Best and keep learning!!