TUTORIALS » HTML / JavaScript » HTML essentials (guided tutorials)

XHTML vs HTML

Page 1 of 6

You are in page:

» 1. A well formed code

2. The <!DOCTYPE> declaration

3. The <html> section

4. The <head> section

5. The <body> section

6. Common XHTML errors

Up to this point, you have learned how to use a lot of nice tags to create web pages. You should now be ready to learn the proper way of laying out your tags inside a HTML document. Actually, I think it is a good time for you to move from simple HTML to XHTML...

WHAT!?

Don't freak out, it's easy and it is a must if you want to start developing professional web sites.

XHTML vs HTML

Instead of pointing out all the differences between HTML and XHTML, I want to start teaching you what the two have in common:

Both use the same tags you have learned so far.
Both, HTML and XHTML documents, are plain text files you can using any text editor.
Both can be named using either the .htm or .html file extension.

So what's the big deal? What is the difference? Well, keep reading.

Remember the internet grew very fast (sometimes too fast) so very often its technologies were developed by different groups, at the same time, without a real standard control. This is what happened with HTML. People around the world started writing their web sites using different "standards" causing millions of HTML coded sites to look different depending on the web browser used (and you don't want that to happen to your site). Also, pages containing inconsistent HMLT code are more difficult to be indexed by search engines (and that is something you don't want either).

Today, the www gods (read the World Wide Web Consortium, or W3C) have finally come to an agreement on what the standards to write an HTML page should be, they called this standard: XHTML 1.0.

HTML stands for Hypertext Markup Language while XHTML stands for Extensible Hypertext Markup Language.

Summarizing, XHTML is nothing but a well formed HTML code. XHTML coded pages should display exactly the same regardless of what web browser you are using (more compatible), and they also should be easier for search engines to read and index.

Note: Another major XHTML feature is its ability to include XML syntax (that's where the X comes from). Don't worry about that yet; we will cover it in time.

Basic XHTML code structure

Any XHTML document must include four mandatory parts:

the
```
<!DOCTYPE>
```
declaration
the
```
<html>
```
section
the
```
<head>
```
section
the
```
<body>
```
section

So a basic XHTML document's code would look something like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
   <title>Title of the document</title>
</head>

<body>
   Contents of the document
</body>

</html>

Note that the

<header>

and the

<body>

sections are nested inside the

<html>

section.

Follow to the next pages of this tutorial for an explanation on each section of a XHTML document.

More pages of this tutorial → XHTML vs HTML 12 3 4 5 6 >

TUTORIALS » HTML / JavaScript » HTML essentials (guided tutorials)

XHTML vs HTML

You are in page:

XHTML vs HTML

Basic XHTML code structure

Comments & Questions