Article
XHTML Web Design for Beginners - Part 2
Content
The element we have just looked at only contained the text "Hello World". But elements can contain a lot more than just text. If they couldn't, then XHTML wouldn't be very useful.
For instance, most of your elements will also contain other elements. In fact a number of elements must contain certain other elements to work properly (and we'll look at each of these a little later).
An element that contains another element looks like this:
<head>
<title>The document title</title>
</head>
Here we have a <head> element that contains a <title> element. As we go on you'll see elements containing more and more elements, as you build up your knowledge and produce larger, more complex documents.
Nesting
No, we're not talking about preparing for babies. Nesting describes the way in which elements contain other elements. When we say that elements are properly nested, we mean that:
- each element is completely contained within the elements that contain it, and
- it completely contains the elements it contains.
Try and say that after a night out!
That might sound confusing, but it's really quite simple, as these examples will demonstrate. We are going to be using the elements <em> and <strong> which give text emphasis and strong emphasis, respectively. We'll look at them in detail later.
<em>The Lord Of The Rings is a <strong>fantastic</strong> story.</em>
This is valid XHTML.
<em>The Lord Of The Rings is a <strong>fantastic</em> story. </strong>
This is not. The <em> starts outside the <strong> but finishes inside it. The tags are not properly nested. Think of elements as being like boxes. A box can have a box inside it, or can be inside a box, but it can't be inside a box, and outside it as well. Neither can your elements.
Required Elements
There are four elements that all XHTML documents must contain. We have already seen that you must have a <head> and it must contain a <title>. I've also mentioned the <html> and <body> elements. Let's look at each of these elements in turn, starting from the top.
<html>
The <html> element is the container for your whole document. It starts first and finishes last. It tells the computer that this is an <html> document, and must always be present.
<head>
After <html> the next element should always be <head>. The head contains elements that are about the document rather than elements that are displayed in the page itself. This includes things like the document title, information to be given to search engines, and how this document relates to others on your site.
<title>
Within the <head> of your document you must have a <title> that describes what the document is. Without a <title> your document is not valid.
<body>
Finally your document must have a <body>. The <body> is the Web page itself. It comes after the <head> and is the only other element that can go in your <html> element. Anything that you want to put in your page goes in here.
You can think of an XHTML document as being like a human body. All people are people from head to toe (<html>), they have a head that contains information you don't see when you look at them (<head>), they have a name (<title>) and they have a body (<body>).
Putting Them All Together
When we put all of these together we get the basic structure for an XHTML document. Here it is.
Every XHTML document you produce will have that same basic structure. All other elements go in either the <head> or the <body>.
Attributes
Often an element can't convey enough information about itself through its name alone. For example, the <img> element, which is used to display an image, is no use on its own. You also need to tell the browser where to find the image file, and other things like a text description for users who don't get the image for one reason or another.
This is achieved with attributes. Attributes are added to the start tag of your element and come in the form of a name="value" pair. The name is the name of the attribute you're using, and "value" is replaced with the value you wish to provide for the attribute. Let's take a closer look.
As with element names, all attribute names are in lower case. You have a choice of using either double quotes " or single quotes ' as long as you use the same before and after the value. You must enclose the value in one form of quotes or the other. Without them your document will not be valid, and may not work as you intended.
Let's look at an example to see an attribute in action. Below is a simple <img> element that tells the browser to fetch an image from /images/logo.gif.
<img src="/images/logo.gif" />
You will see attributes used a lot and you'll soon get the hang of them, so again, don't sweat it if this seems overwhelming now.
Summary
We have seen that there are rules to be followed when you write your XHTML documents, and we've looked at the basic building blocks of XHTML. As long as you follow these rules, plus others that I'll mention as we go along, you'll be on your way to creating XHTML Web pages. We'll now add some elements to your arsenal that are used to mark up text.