Tip:
Highlight text to annotate it
X
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.