XHTML Web Design for Beginners: XHTML Building Blocks
This section of the site features articles published between 2002 and 2004. They remain here for reference purposes and may contain information that is out of date.
- Hello World,
- XHTML Building Blocks,
- Text That Says Something,
- Advanced XHTML Building Blocks,
- Text That Says Something 2.
Elements and tags are the building block of XHTML. You need to fully understand both of these concepts to be able to write Web pages properly. We already touched on how they work in our example above but we're going to take a closer look now.
An element is used to mark sections of your document in order to tell the computer what that section is. This can range from marking the entire document as with the <html> element to marking a single word as important. The concept is the same in all cases.
Elements are made up of two tags; a start tag and an end tag. Between these tags is the element content.
This element tells the computer that its content "Hello World" is the title for the document. Without the start and end tags the computer would have no way of knowing what to do with this text.
A start tag is made up of a left angle bracket followed by the name of the element and then a right angle bracket.
A start tag tells the computer that we are starting a new element and that it should regard everything it now encounters as part of that element start tag until it reaches the right angle bracket.
End tags are made up of a left angle bracket and a slash followed by the name of the element and then a right angle bracket.
Once the computer gets to the end tag for an element it knows that element is finished. The slash is necessary to distinguish it from the start tag.
When you are entering your tags you must make sure that the names use lower case letters only. XHTML is what we call case-sensitive. This means that the following tags are all different:
Only number 1 is an XHTML tag, the rest do not exist. All tags in XHTML are in lower-case so it is not difficult to remember, just be careful and make sure you get it right.
Certain elements do not have any content. For these empty elements a special syntax is provided. Instead of inserting an end tag immediately after the start tag has finished all we have to do it put a slash before the right angle bracket of the start tag to tell the computer that this element is finished.
The <br> element is used to insert a line break into your document. This tells the computer to stop the text at that point and start a new line. As you may have guessed the <br> element does not have any content so instead of entering the element like this:
we use a single tag with a slash at the end of the tag to show that it is an empty element:
Not only does this save typing, it also makes the code easier to read and more manageable. The space before the slash is necessary to support older Web browsers that do not understand empty elements and will simply ignore the slash as long as there is a space before it.
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.
Other than text, most of your elements will also contain other elements. In fact a number of elements must contain certain other elements to work properly. We will look at each of these 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 will see elements containing more and more elements as you build up your knowledge and produce larger, more complex documents.
No we're not talking about preparing for babies. Nesting means the way in which elements contain 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.
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. We're going to look at each of these elements in turn, starting from the top.
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.
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.
Within the <head> of your document you must have a <title> which describes what the document is. Without a <title> Your document is not valid.
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>).
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>.
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 it's 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 are using, value is replaced with the value you wish to provide for the attribute. Let's take a closer look.
As with elements 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 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.
We have seen that there are rules to be followed when writing 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 will mention as we go along, you are on your way to creating XHTML web pages. We're now going to add some elements to your arsenal that are used to mark up text.