XHTML Syntax

XHTML is more strict syntax and has a greater requirement than HMTL. HTML lets you get away with sloppy code. Although the browser is able to render your page properly if you don't follow proper XHTML syntax, it is best to following them by habit so that you don't get into the habit of sloppy code.

At this point, I want to point out some of the proper syntax of XHTML so that you can recognize what are considered bad habits as you look at older code or read outdated tutorials on the internet.

Proper XHTML syntax requires the following...

1. Proper nesting of tags. You have just seen this example with the bold and italics.

2. All tags and attributes in lowercase letters and attribute. For example, write <div id="wrap"> and not <DIV ID="wrap">.

3. All tag attributes must be in quoted. For example, write <table width="80"> and not <table width=80>.

4. All tags must have matching closing tag. For example write ...

<p>Hello World</p>
<p>The quick brown fox.</p>

and not ...

Hello World
<p>The quick brown fox.

(Even though the two code will look the same on the browser)

5. The doctype statement that we saw at the top is required.

6. All XHTML documents must have the following tags: html, head, title, body.

7. No shortcut notation in attributes. Write <option selected="selected> and not <option selected>.

Here are further references on XHTML syntax:

http://www.htmlgoodies.com/beyond/xml/article.php/3473511
http://www.w3schools.com/xhtml/xhtml_syntax.asp

Viewing Source

Here is my version of the code so far: firstpage.html

You can do one of several things with this link. The following

1. Click on the link to see how my page renders in the browser.

2. If using Internet Explorer (IE), right-click on the link and select Save Target As to download the file to your local disk. And then you can view it in Dreamweaver or any other text editor. In Firefox, the menu is Save Link As.

3. If using IE, after clicking on the link to view the page, you can do menu View -> Source to see the source code of my page. In Firefox, the menu is View -> Page Source.

In the next lesson, you will learn about the horizontal rule and the background color.