DEV Community

Cover image for Introduction to XML
Tanwa Sripan
Tanwa Sripan

Posted on

Introduction to XML

Hello, hello! 😮‍💨 How the month has flown by! I have not had the time to write anything but that does not mean I have not been learning. While it is fun to learn the newest and latest technologies, you often will have to learn about older technologies as well (especially for jobs).

So, I recently learnt about Extensible Markup Language or XML. I want to write a short introduction about it so I can use it as a reference for myself later on, and of course for anyone who might need to learn about XML 😀.

What is XML?

XML is simple language to store, describe and transport information/data across the network as plain text. It is designed so that the language is human readable with self-describing tags. If you think of JSON as a way of transferring data as plain text in the form of JavaScript Objects, then you can say that XML is a way of transferring data as plain text in a form similar to HTML.

XML is a mark up language like HTML, so it bear a resemblance as it is made up of hierarchical tags which store information. However, unlike HTML, it does not have predefined tags so you can create your own tags however you like to store and structure your data as you see fit. It is said that XML separate information from presentation so XML and HTML complements each other.

It can be used by all sorts of programs and software as a method of transferring data, just like how JSON can be used in all languages.

How does it work?

XML documents often start with XML declaration or a prolog (this is optional), which contains meta-data of the document such as encoding.

It typically look like this:

<?xml version="1.0" encoding="UTF-8"?>
Enter fullscreen mode Exit fullscreen mode

When creating your own XML tags, keep these points (syntax rules) in mind:

  • All elements must have a closing tag or if it is an empty element you can use the short-form e.g. <emptyTag />.
  • Attributes must be quoted e.g. <movie genre="comedy" />.
  • Avoid using characters like <, >, & and use character entities instead e.g. &lt;, &gt; and &amp;.
  • There must only be one root element or one parent element that contains all other elements.
  • Tags are case sensitive.
  • White spaces are preserved (More of a heads up than a rule).

Following the above rules will ensure that your XML document is well-formed.

XML documents, like HTML, follows Document Object Model (DOM) definition, it is a tree-structure with one root node which is the parent to all other elements. This means that you can access, update and manipulate XML documents with programs and scripts.


As usual, the best way to learn is to practice, so open up your favourite code editor and try to create your own XML file with some of you own tags. I will use VSCode. Lets say I wanted to send a list of movies of the year 2020 information, then I could write something like the below code.

<?xml version="1.0" encoding="UTF-8"?>
<movieList year="2020">

<movie genre="action">
    <title>The Old Guard</title>

<movie genre="action">
    <title>Birds of Prey</title>

<movie genre="comedy">
    <title>My Spy</title>

<movie genre="horror">
    <title>A Quiet Place Part II</title>

Enter fullscreen mode Exit fullscreen mode

If you open up the file you have created on a browser, it should display the XML document as a tree-structure with collapsible arrow for nested elements (I ran into a problem with FireFox, but works fine on Edge and GC).

Example of XML file on Edge


XML is a flexible and extensible mark up language similar to HTML but differ in the way that it is used as a standard for transferring or exchanging data over the network. XML is written with non-predetermined tags, this means you can create your own tags and structure your information/data how you will as long as it conforms to the rules of a well-formed XML document.

This has been a very short overview of XML. There are must more about XML that I have to learn and I hope to write more about this topic in the future, for now thank you for reading 😃.

Mayuri from Steins Gate

Top comments (1)

syntaxhacker profile image

good info .. and thanks for mayuri pic