How to Code XHTML

Module X10c

Audience and Objectives
About this document...
Review Questions

What is XHTML?

XHTML is a family of eXtensible HyperText Markup Languages as defined by the W3C. It is the successor to the HyperText Markup Language (HTML), and is formulated in XML. All are ultimately derived from the Standard Generalized Markup Language (SGML).

What is XHTML for?

The purpose of XHTML is to create and organize Web pages.

What does an XHTML page look like?

The page you're looking at now is written in XHTML.

What you see is your Web browser's rendering of the XHTML code.
Rendering means reading and markup and displaying the contents.
You can look at the code by using the browser's View > (Source) Code

An XHTML Example

Here is the code for an XHTML page that simply displays, "Hello, World":

<?xml version="1.0" encoding="UTF-8"?>

      <!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>Hello!</title>

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" 
      />

      </head>

<body> Hello, World </body> </html>

Let's look at each line and explain it...

Almost every line of this file is required, and can be the same every time. Lines that can be changed are shown in green.

<?xml version="1.0" encoding="UTF-8"?>

Because XHTML is a type of XML, files begin with an XML type declaration, so everyone will know what version of XML this is. XML information begins with <? and ends with ?>

The encoding is the type of characters used. ISO-8859-1 is used for English and the languages originating in Western Europe. Languages using other characrters are encoded differently.

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

This is the Document Type Definition (DTD) which explains exactly how XHTML works. The URL is where the definition is found. All XML documents must have a DTD, because XML is extensible and it has been used to create many varieties of markup language. XHTML is one of hundreds! DTD information begins with <! and ends with >

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

The HTML code starts here. What kind of HTML? This is XHTML as described at the URL shown.

(X)HTML commands begin with < and end with >

<head>

(X)HTML files have two main parts: A Head and a Body. This is the beginning of the Head.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

This is an HTML Meta-tag. Meta-tags have information for computer software, but aren't displayed by the browser. This meta-tag defines the type of file and its character set.

Why do XHTML files need to say what kind they are and what character set they use, in so many ways? Because over the years, different software has been developed to look for the information in different tags. Fortunately, networks and computers are speedy enough that this doesn't slow them down.

Notice that this tag ends with

/>

This is because in XHTML every tag must either have a matching close-tag, or end with />
We'll talk about close-tags in a moment...

<title>Hello!</title>

The "title" of an (X)HTML page doesn't show in the window, but in the "title bar" - the area above the window that identifies it.

Like most HTML tags, <title> must have a close-tag. Close-tags are built by putting "/" in front of the name of the tag.

</head>

This is the close-tag for the Head section of the file.

Except for the Title, nothing in the Head is shown to the viewer. Other behind-the-scenes informaton is often put into the Head.

<body>

Here's where the Body, the main part of an HTML file, begins.

Hello, World

This is the only line with anything that shows on the screen. The tag indicates that this is a paragraph, and its close-tag follows.

Most Web pages would have lots more lines here, but since this is an example of what must be in an (X)HTML file, we're keeping it to the bare minimum!

</body>

This is the close-tag for the body section.

</html>

And finally, the close-tag for the (X)HTML file itself.

Review

Link to review questions which you can print as a study guide.

Audience:

This is for people who want to learn how to code Web pages using XHTML, who have not learned HTML.

Objectives:

When you successfully complete this lesson, you will be able to...

Identify the core components and rules of an XHTML document including syntax and essential elements

Return to Top of this document

About this document...

Module X10c: How to Code XHTML

This document is part of a modular instruction series in Computer Instruction. For more information, see the overview or the list of modules in this series, X: XML, XHTML, DHTML, CSS. This document has been used in the following classes: INP 150.

Author:: Laurence J. Krieg
Institution:: Internet Professional Department, Washtenaw CommunityCollege
History:: Original: 2 September 2003
Copyright:: Copyright © 2003, Laurence J. Krieg.
Instructors: You may point to this file in your Web-based materials.
Students: you may make a copy for your personal use.
All other uses: contact the author, LaurenceJ. Krieg for permission.

Return to Contents of this document