Using XHTML
Updated on July 28, 2007
XHTML is the backbone of the web page. It tells the computer how to display or handle the information.
The Tag
XHTML is based on tags. Every tag is enclosed in angle brackets < >.
The codes in the tags are the instructions. These codes must be written in lower case. (We'll talk about exceptions to this rule later.)
<tag>
All tags have an opening and a closing. The opening tag tells the browser where to start doing something, and the closing tag tells them computer when to stop doing it. (Notice the forward slash at the beginning of the closing tag.)
<tag>Stuff the tag deals with.</tag>
Some tags contain empty elements, elements that don't have stuff in the middle to deal with (e.g. image tags, horizontal rule tags, line breaks, etc.). An empty element doesn't have opening and closing tags, just a single tag with with a space and a forward slash ( /) at the end of the tag code.
<tag />
Elements
Every tag contains an element. The element is what the tag is all about.
This tag creates a table element. Everything between the opening and closing tags (the content) is in the table.
<table> </table>
Attributes
Some elements have attributes. Attributes describe the element. The values of the attributes must be enclosed in quotes (" ").
This tag creates a table that is 100% wide.
<table width="100%"> </table>
The <!DOCTYPE ...> Tag
The first line of an XHTML document is the document type definition (DTD) tag. This tag tells the browser specifically what type of document the file is and how to display it. The following is a transitional XHTML 1.0 DTD (the transitional DTD is more flexible than the strict DTD because it allows you to use HTML formatting rather than just CSS).
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Check out http://www.w3.org/QA/2002/04/valid-dtd-list.html if you would like to see other DTDs you can use.
<html></html> Tags
The <html> tag tells the browser "This is the beginning of the HTML document." (Ok, so technically we're using XHTML code, but it's still considered an HTML document.)
The </html> tag tells the browser "This is the end of the code." The end tag is the very last line.
<head></head> Tags
The <head> tag marks the beginning of the page header and is placed immediately after the <html> tag.
The </head> marks the end of the page header.
The page header is where information about the page is kept.
The most common tags you'll find inside of the header are the <title></title> tags. These tags tell the browser the title of the page. (If you bookmark the page, this is what your bookmark will be called.)
You'll also find <meta>, <link>, <style>, <script>, and <base> tags.
<body></body> Tags
The <body> tag marks the beginning of the page content and is placed immediately after the </head> tag.
The </body> tag marks the end of the page content and is followed by the closing </html> tag.
The body of the document is where you would put everything you want displayed in the browser, such as text and images as well as objects.
Putting It All Together
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>This is the title of my page.</title></head><body><p>Example Text</p><img src="/images/sample.jpg" /></body></html>
Properly Nested Tags
XHTML is very picky about its structure. Everything is nested in something else.
Think of every tag as a container.
Big Container: contains jelly beans + a medium container
Medium Container: contains chocolate pieces + a small container
Small Container: contains toffee pieces
If you were to describe these containers with tags, you would need opening and closing tags. The opening tag is the base of the container; the closing tag is the lid.
<big container>Jelly Beans are in here!<medium container>Chocolate Pieces are in here!<small container>Toffee pieces are in here!</small container></medium container></big container>
Here is the rule: You cannot let the contents of one container spill into another. If a container spills, the computer can't figure out what belongs where.
Example: This is a spill. Notice how it doesn't make sense. Logically the small container cannot be both inside and outside the medium and big container. It's either in it, or it's outside of it. It can't be both.
<big container>Jelly Beans are in here!<medium container>Chocolate Pieces are in here!<small container>Toffee pieces are in here!</medium container><big container></small container>
Likewise, your XHTML tags must be nested properly as well.
<p><b>Bold Text</b></p>
Notice how the following code isn't properly nested because the <b></b> tags are simultaneously inside and outside the <p></p> tags at the same time.
<p><b>Bold Text</p></b>
...by Feed