Home / Computers / Internet

What are the XML elements?

Elements in XML are the basic pieces of data that you’ll use.  Every valid XML document contains one (and only one) root element, which contains all of the other elements on the page.  To properly use a root element, it should be declared at the top of the document, after the XML declaration but before any of the elements that it contains.  This may sound a bit confusing at the moment, but it’ll become clearer in just a second.

Open up your cats.xml file.  It should look a little something like this:

<?xml version=”1.0”?>

<?xml-stylesheet type=”text/css” href=”cats.css”?>

<cats>Tooter and Shade are the best cats in the world!</cats>

Right now, the <cats> tag is creating a root element, that contains the phrase “Tooter and Shade are the best cats in the world!”.  Assuming that you’re wanting to do a bit more than that, you’re going to need to declare a root element to build the rest of your file in.

Insert the following tag into your document, before the <cats> element but after the stylesheet declaration:

<cats_info>

Of course, at the end of your document, you’ll need to close the tag, to get the following:

            <?xml version=”1.0”?>

            <?xml-stylesheet type=”text/css” href=”cats.css”?>

            <cats_info>

            <cats>Tooter and Shade are the best cats in the world!</cats>

            </cats_info>

Now <cats_info> is your root element, with <cats> existing as an element within it.  Any other elements that you might wish to create will go inside of the <cats_info> element; if you put any on the outside, it can cause errors when the browser tries to read it.

As an example of having multiple elements within the root element, let’s say that you wanted to also tell the world about your friends’ cats, Loki and Sally.  Using a new element, this one named <friends>, we can insert info about Loki and Sally into the <cats_info> root element.

            <?xml version=”1.0”?>

            <?xml-stylesheet type=”text/css” href=”cats.css”?>

            <cats_info>

                        <cats>Tooter and Shade are the best cats in the world!</cats>

                        <friends>Loki and Sally are pretty cool cats as well, though.</friends>

            </cats_info>

You might notice that I indented the lines containing the elements within the root a bit more… this isn’t strictly necessary, but it does make it a bit easier to keep track of what’s going on.

Another useful element (of sorts) that’s often used to help keep track of what’s going on is the comment.  The comment is included in the document after the XML declaration, and cannot be placed inside any XML tags or nested.  It’s used to leave a note inside of the code itself relating to the content or development (usually), and is contained within the pseudo-tags <!- - and - ->.  Comments can span several lines and can even contain white space, just as long as it doesn’t contain the double hyphen (two hyphens together with no space in between, displayed here as - -).

To add a comment to cats.xml, include the following text after the XML declaration:

            <!- - This XML document is practice, and documents great cats. - ->

Stop for a moment and look at your file… it should look about like this:

            <?xml version=”1.0”?>

            <!- - This XML document is practice, and documents great cats. - ->

            <?xml-stylesheet type=”text/css” href=”cats.css”?>

            <cats_info>

                        <cats>Tooter and Shade are the best cats in the world!</cats>

                        <friends>Loki and Sally are pretty cool cats as well, though.</friends>

            </cats_info>

Go ahead and save it, and we’ll start looking at the attributes that the elements need to have.