Article
XHTML Web Design for Beginners - Part 2
XHTML Building Blocks
Elements and tags are the building blocks of XHTML. You need to fully understand both concepts to be able to write Web pages properly. We already touched on how they work in our example above, but let's 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
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.
Start Tags
A start tag is made up of a left angle bracket, followed by the name of the element, and a right angle bracket.
A start tag tells the computer that we're starting a new element, and that it should regard everything it now encounters as part of that element's start tag until it reaches the right angle bracket.
End Tags
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 the end tag from the start tag.
Case Sensitivity
When you enter your tags, you must make sure that the names use lower case letters only. XHTML is case-sensitive. This means that it sees each of the following tags as different from the others:
- <title>
- <Title>
- <TITLE>
Only number 1 is an XHTML tag; the rest do not exist. All tags in XHTML are in lower-case, so it's not difficult to remember. Just be careful to make sure you get it right.
Empty Elements
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 is 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 doesn't contain any content, so instead of entering the element like this:
<br></br>
we do this:
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.