Basic XHTML Components and Syntax

The `<html>` Element

An XHTML (or HTML) document starts with the <html> element and ends with its corresponding closing element </html>. Put everything else in between these elements.

`<head>` and `<body>`

Every properly-coded XHTML document has a <head> and a <body>. The <head> contains some basic information about the document, such as the title. The <body> contains the part of the document that browsers display in the main viewing area. Most of the content in the <head> is invisible. The only thing that viewers can see is the title, which shows up in the title bar at the very top of the browser window.

Simplified Web Page

In an overly-simplified (but completely functional) format, here is a complete web page:

<html>
  <head>
    <title>This is a web page</title>
  </head>
  <body>
    <h1>Web Page 1</h1>
    <p>This web page is short and boring.</p>
  </body>
</html>

Here is a screenshot of this web page as seen in a browser:

Elements: Open and Close

Every "element" or "tag" must have both an opening and a closing part; a start and and a finish. Think of them as parentheses. You can't have just an opening parenthesis. You need to have a closing parenthesis in order to balance the group. Look at these examples of English grammar:

Correct: I like fruit (especially raspberries and mangoes).

Incorrect: I like fruit (especially raspberries and mangoes.

The same thing is true for XHTML elements. You can't just start a paragraph, for example. You also have to end it at some point.

Correct: This is my paragraph.

Incorrect: This is my paragraph.

You might think of this structure like a sandwich (one of my previous students came up with this metaphor). You wouldn't put bread on only the top of the sandwich. You'd want bread on both the top and the bottom of the sandwich (at least in the type of sandwich that we're trying to build here). "XHTML sandwiches" can get quite complex, with lots of layers of sandwiched inside each other. For example, The <html> tags surround everything. Then there are the <head> and <body> tags. Within the <body> tags you have  tags, which may contain other tags, and so on.

With the early versions of HTML, you could get away with just opening tags in some instances. They weren't as strict in HTML as they are in XHTML, but there are good reasons to be strict. For now I'll just say "that's the way it is" and tell you that you need to have both opening and closing tags.

Self-Closing Elements

Even though the general rule is that elements need both an opening and closing "tag" (for example: and ), some elements can close themselves. They don't require separate closing tags because they have the closing tags built into them. The most common self-closing elements are images, line breaks, and horizontal "rules" (i.e. horizontal lines).

How does an element to close itself? It's the slash ( / ) that does the trick. The difference here is that the slash is inside of the the opening tag, which makes it also the closing tag. In the case of image elements, it looks like this (simplified for illustration purposes):

<img src="someimage.jpg" />

The slash at the end means that the element is done. It's over. It's finished. You won't have a </img> tag at the end. In some ways it would make sense to have that extra closing tag, but that's not the way they do it. Why? Because there's no information to go in between the tags. All of the information you need is already in the main element itself.

In case you're wondering, "img" stands for image and "src" stands for source. The src attribute specified which image to use. In this case, the image is called someimage.jpg. In essence, this element says to the browser, "insert the image called someimage.jpg here."

The   and <hr /> elements work in a similar way, but hey do not require a src attribute or anything else:

<p>This paragraph<br />
will show up on two lines in the browser.</p>
<hr />
<p>Here is another paragraph.</p>

Don't Overlap Elements

Another thing to keep in mind with the opening and closing of elements is that you can't overlap them. You can embed them inside each other in many cases, but you can't overlap them.

Correct: Words with both bold and italics

Incorrect: Words with both bold and italics

The incorrect example is sort of like putting the sandwich meat on the bottom of the sandwich, beneath the bread. You shouldn't do that. It doesn't work very well with sandwiches, and it doesn't work very well with XHTML. Elements can contain other elements, but they can't cross over each other.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 License.