The difference between HTML and XML can be confusing if you do not know about both or just one of them. One might think their purpose is the same or almost the same. But this is not the case. So, without further ado, let’s get started and see their differences.
HTML
HTML stands for Hypertext Markup Language. It was designed to display data and focuses on the presentation of the data. It is used in web applications and web pages to present the content and format the structure.
XML
XML stands for eXtensible Markup Language. It was designed to store and transport data. It focuses on what the data is, and not on its presentation.
Having known what HTML and XML are, let’s now see their differences.
|
HTML |
XML |
|
It is used for displaying and formatting data. |
It is used for storing and transferring data. |
|
HTML is a markup language. |
XML provides a framework for creating markup languages. |
|
HTML has its predefined tags. |
XML does not have its predefined tags. The user has to create them. |
|
It has a limited number of tags as they are predefined. |
It has an unlimited number of tags. |
|
HTML is case insensitive. |
XML is case sensitive. |
|
HTML disregards small errors. |
XML does not allow any coding error. |
|
It does not preserve white spaces. |
Whitespaces are preserved. |
|
HTML is static because it is only used to present data. |
XML is dynamic because it is used to transfer data. |
|
It is not necessary to close the tags. |
It is necessary to close each tag. |
More about XML
Extensible
As the name suggests, XML is extensible. Consider an application that presents or uses the data stored as XML, and later that data is updated. Both the versions, new and the old, would work in the application.
Portable
Operating systems, applications, or browsers contain data in different formats. Hence, to transfer data from one system to another incompatible system, data conversion needs to be done, which is a hectic process. XML contains data as plain text. Therefore, it is portable, i.e., data can be transferred across different systems without having any need for conversion.
Separation of Concerns
As already mentioned, XML is not about the presentation of data, but about storing and transporting it. Therefore, it provides separation of concerns, i.e., separate data from its layout, for example, if an application displays that data, then even if the data changes, it will not affect its presentation and vice versa.
More about HTML
Easy to Learn and Use
HTML is quite easy to learn. It is the first language that you study when you start learning web development. As already mentioned, it contains simple predefined tags that are very simple. It also isn’t case sensitive and does not throw errors on small mistakes.
Integrable with other languages
We can easily integrate HTML with other languages, for example, JavaScript, PHP, etc.
Example of HTML
Let’s consider a simple example of HTML.
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
<h1>HTML</h1>
<ul>
<li>HTML is easy to learn and use</li>
<li>HTML is supported by all browsers</li>
<li>HTML is widely used</li>
</ul>
</body>
</html>
Output
Example of XML
Consider the following example in which a student data is stored as XML. It contains the name of the student, age, and marks.
<student>
<name>Kevin</name>
<age>12</age>
<marks>98</marks>
</student>
As you can see, it is self-explanatory.
Example – HTML and XML
Now, let’s use HTML, JavaScript, and AJAX to use the same data given in the above example. If you don’t understand the code, don’t worry because this example just shows how HTML is used to display the data in an XML file. We access the data using JavaScript and AJAX.
<!DOCTYPE html>
<html>
<head>
<title>HTML and XML</title>
</head>
<body>
<h1>Displaying XML data</h1>
<h2 id="name">Name:</h2>
<h2 id="age">Age:</h2>
<h2 id="marks">Marks:</h2>
<script type="text/javascript">
window.onload = function () {
var http = new XMLHttpRequest();
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
data = http.responseXML;
document.getElementById(
"name"
).innerHTML += data.getElementsByTagName("name")[0].innerHTML;
document.getElementById(
"age"
).innerHTML += data.getElementsByTagName("age")[0].innerHTML;
document.getElementById(
"marks"
).innerHTML += data.getElementsByTagName("marks")[0].innerHTML;
}
};
http.open("GET", "student.xml", true);
http.send();
};
</script>
</body>
</html>
Output
Cool, right?
