Join Bill Weinman for an in-depth discussion in this video Exploring a simple XHTML page, part of XHTML and HTML Essential Training.
- View Offline
This is the simplest possible HTML document. This is all that's required in a document in HTML. You have a title and you have a paragraph. That's all that's really required. This is the same document in XHTML. This is the simplest possible XHTML document. You'll notice it's got a lot more stuff. You look at this document and you look at this HTML document and you've got to be asking yourself, why would I want to go through all this trouble when I can get away with this? That is an excellent question.
The difference is the XHTML document is going to work more consistently across more platforms on in to the future. So that's why we care about XHTML. The truth is writing this document is no more trouble at all than writing this document. All you have to do is have all of this other stuff saved in a template someplace and whenever you start a new document, you just start from that point and typing your title and your content and you're going, and so it's really not anymore trouble at all.
So let's take a look at some of the different elements in this document. Before we do that, we need to talk a little bit about terminology. So we are on the same page as we talk about all the different parts of this document. So, this is a tag. It begins with a left angle bracket and it has the name of the tag inside and then it ends in a right angle bracket. This is an end tag. It's the same as the tag except it has this slash character between the opening angle bracket and the name of the tag.
So together, these two tags are called a beginning tag and an end tag. Inside, they have the content of the element. So altogether, with the begin tag and the end tag and the content, it's called an element. An element includes all of those pieces, begin, content and end. The begin tag is this one and the end tag is that one, okay? So this is the title tag, here is the head tag and you'll notice that the head tag contains the title tag.
So everything between the beginning of the head and the ending of the head is the whole element, the head element. The head element contains the title tag and it may contain even some other stuff. This is the body tag and the body element contains the body of the document, including this paragraph and whatever else you might want to put in there. Then there is the HTML element, which contains all of it. It goes all the way up here, actually, doesn't it? Yeah. So, that's tag and that's element. A container is a type of a tag that has content.
The P element is a container. It has content. We might have another element that doesn't have content, like the horizontal rule, hr and there is an hr tag that does not have content. It stands alone by itself. Now in XHTML, a standalone tag that does not have content must have this little slash before the closing angle bracket. The reason for that is that in XHTML, all tags must be terminated. So when you have a container, it's easy; you have an end tag that terminates the element.
If you don't have a container, if you have just a standalone tag, then it must have this little shorthand for closing. It would be just as legal to write it this way, but nobody does. That would be just as legal. Now you have a begin tag and an end tag. So instead, there is this shortcut, this shorthand, which says this is terminated. Now, this space between the name and the slash is not actually required. It is traditional. So I tend to do it, but it's not required.
So that is a complete hr element. It has it's begin tag and really has its end tag built into the begin tag. So it begins and ends all in one tag. That is a valid element that doesn't have content. Now let's take a moment and just talk about all this stuff at the top. This stuff at the top is required and that's really all you need to know about it. What it is, how it works, is probably not relevant. It's just required. This is what makes it valid XHTML and this is what makes it possible for it to be read across a lot of different devices, well in to the future.
So you just cut-and-paste it, you keep it in a template, we'll talk about how to do that a little bit later. We're going to talk a little bit about some of the components of this a little bit later, so that you'll understand the parts of it that you may want to occasionally change, but for the most part, you just need to know that it's required and you're going to cut-and- paste that and it's included in the Templates section of the exercise files with this course. So that's it. This is a valid XHTML file. If you do in this way, they're going to work across devices well and consistently and well in to the future.
- Understanding the structure of an HTML or XHTML document
- Creating and using templates
- Controlling white space and line breaks
- Making effective use of tables and frames
- Flowing text around an image
- Formatting tables with CSS
- Creating web pages that work properly across platforms and devices
- Reviewing a case study of a complete web site