Breadcrumbs

Too Easy XHTML - Introduction to XHTML [1]

Every web page on the web is derived from a popular markup language known as HTML. HTML is needed in order to display any form of content, making it the building block of the web. HTML is the basic language of the web, enabling you to show data to the user's screen and organize information.

HTML comes followed by a few similar acronyms - XHTML and DHTML. XHTML is HTML using an XML syntax to provide stricter rules and more organization. DHTML is a combination of JavaScript, CSS, DOM, and HTML to provide dynamic web page effects.

Why is this the XHTML Guide?

Over time web developers have began to use XHTML over HTML after the W3C declared it a web standard. All-in-all the differences of XHTML and HTML are only in the syntax. They both offer duplicate (close to identical) ways of displaying data.

Unlike HTML, XHTML takes on the strict syntax of XML. This comes packaged with a few simple rules:

  • XHTML tags have to be properly closed in the order they are declared
  • Tags and attributes are case sensitive, so they have to be in lower case
  • All attributes must have a value
  • Proper HTML entities and character values must be used

Above is a small price to pay for the organization provided by using XHTML. Although there are a few more rules that come along with XHTML, the ones listed are the main ones that you'll have to focus on if you're moving from HTML. If you have previously used XML, then XHTML will be a snap!

Another advantage of using XHTML is that it separates the content from the styling. HTML is often cluttered with font and styling tags, while XHTML bravely eliminates these. Using a combination of CSS and XHTML, one can make a more dynamic web page separating the content from the styling. Although HTML has the ability to conveniently use CSS, XHTML was built for it.

You may still be asking yourself why you should be learning XHTML first? This guide will teach you everything that you would learn with an HTML guide, but use proper XHTML standards. You're killing two birds with one stone - learn HTML and learn XHTML syntax.

XHTML Doctypes

When using XHTML you must choose the appropriate DTD. XHTML comes with three flavors of Doctypes:

  • Transitional - Loose set of XHTML often used for HTML to XHTML transitioning
  • Frameset - Identical to Transitional, but allows the use of frames
  • Strict - Firm foundation for XML syntax eliminating the use of all deprecated tags and attributes such as the <font> tag.

Throughout this guide we'll be using XHTML Strict coding to provide the maximum efficiency from XHTML.

Tools You'll Need

To code XHTML, you have all the tools you'll need directly on your computer. Window's Notepad program allows a file to be saved without rich text formatting, therefore is useful for any coding. To save a file as XHTML just save the file as _____.html and you're able to view it in a web browser.

Your First XHTML Page

Now that we've gone through and established a foundation of what XHTML is, it is time to start looking at the foundation of a properly formatted page. Review the following code:

Code: XHTML

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>First Web Page</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
</head>
<body>
    Hello World
</body>
</html>

Hello World

The preceding code may look slightly confusing at first, but you'll grow use to over time. Let's break down the page structure and take a look at each piece.

Code: XHTML

<?xml version="1.0" encoding="iso-8859-1"?>

This declares the version of XML syntax and encoding that we are going to be using in the document.

Code: XHTML

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

This is the Doctype declaration for the document. As you see we've set it to the XHTML Strict DTD provided by the W3C.

Code: XHTML

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

This contains the actual XHTML document and a few important attributes. We'll explain more on this later in Part 2 of this guide.

Code: XHTML

<head>
    <title>First Web Page</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
</head>

The head area (<head></head>) contains the page title and the MIME type for the document. Web page titles are displayed at the top bar in your browser when the page is loaded. MIME types we will discuss later in Part 2.

Code: XHTML

<body>
    Hello World
</body>

This is the heart of the document containing the precise text that the user will see. This particular body contains the text "Hello World". When you load the page into your browser you'll see the text "Hello World"; appear on the screen.

Most of this page structure you won't have to alter, as it will remain static for all of your web pages. Areas that will change include the body and the head of the document. Other sections, such as the XML and DTD declaration, will remain the same for all of your web pages.

Summary

In Part 1 you've learned what XHTML is and its advantages over HTML. You've also taken a look at the page structure of an XHTML page. In Part 2 we will look at extended areas of the page structure and the syntax of XHTML tags.