BlogsDope image BlogsDope

HTML V/S XML

July 29, 2020 XML HTML 822

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

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

XML output

Cool, right?


Liked the post?
A computer science student having interest in web development. Well versed in Object Oriented Concepts, and its implementation in various projects. Strong grasp of various data structures and algorithms. Excellent problem solving skills.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).