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.
What are XML attributes?
Attributes are additional pieces of data that are included in the opening tag of an element. When declaring attributes, they are listed right before the closing bracket of the opening tag, and aren’t listed anywhere else in the element. The style of the attribute is attribute_name=”attribute_data”.
Attributes can consist of any of a variety of types of data… pictures, serial numbers, product names, and more can be recorded as an attribute and used in multiple ways in XML.
As an example, let’s say that you’ve created attributes for all four of the cats that you’ve mentioned so far. Since there are only two cats in each element, you can re-use the attributes; you’ve named the attributes cat_1 and cat_2, and they each call up additional data about the cat in question. Putting them into your file, you’d have something that looked 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 cat_1=”Tooter” cat_2=”Shade”>Tooter and Shade are the best cats in the world!</cats>
<friends cat_1=”Loki” cat_2=”Sally”>Loki and Sally are pretty cool cats as well, though.</friends>
</cats_info>
Of course, you still have to define what the attributes are used for elsewhere… remember, this is just practice to give you an idea of what an XML document looks like. In the next section and those that follow it, you’ll be introduced to creating stylesheets and other essential parts of XML pages and will leave this basic framework behind. Go ahead and save cats.xml, and get ready to move into the next stage of XML coding.
