XHTML/A Basic XHTML Document

File Extension

A user can still use the standard .html or .htm extension, but now the user can use the following:

.xhtml
.xht
.html
.htm

You can use any of these for all the XHTML standards.

XML Declaration

It is a good idea to begin all XHTML, or indeed any XML application, with an XML declaration. XML declarations explicitly state which version of XML and which character encoding we are going to use. For example, if we wanted to use XML 1.0 with Western European character encoding, our XML declaration might look something like this:

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

Note that if no XML declaration is stated, the document is assumed to be XML 1.0 with UTF-8 character encoding.

Doctype Declaration

Your XHTML isn't valid unless it has a doctype. Doctypes are actually SGML statements which tell the browser what version of XHTML you are using. For example, to let the UA know that we want our markup to be served as XHTML 1.0 Strict, we need only input the following:

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

Tags and Elements

XHTML uses tags. Tags are pieces of text enclosed in less-than (<) and greater-than (>) signs. An example of a tag in XHTML is the <html> tag, in which all XHTML documents are enclosed. In XHTML, all tags should be in lower case.

Tags are composed of the tag name and the attributes. The tag name determines the type of tag, and the tag attributes give more information about the tag. For example, in the <a> tag, used mainly to make links, the href attribute is used to say where those links should go. A hyper-link to https://www.wikibooks.org would be written as <a href="https://www.wikibooks.org/">.

Tags are useless unless they are part of an element, or a tag with information between an opening tag and a closing tag. A link to https://www.wikibooks.org with the text "Wikibooks" written inside of it would be written as <a href="https://www.wikibooks.org/">Wikibooks</a>. That comes out to Wikibooks. The closing tag is the same as the opening tag except it starts with a slash (/) and doesn't repeat the attributes.

Elements can be nested. That means that there can be elements that are completely inside another element. An example of this would be

<a href="https://www.wikibooks.org/"><span id="wikibooks">Wikibooks.org</span></a>

You'll learn what the <span> tag does later.

A Sample Document

As I said before, the document starts with an <html> tag. The document also ends with </html>. These two tags and everything in between are referred to as an html element. Two elements must be nested inside the html element: the <head> element and the <body> element. Of course, other elements may be nested or sub-nested within these elements.

The <head> element is, for now, only to house the <title> element. The title is put between the <title> begin and end tags. So the overall syntax of the <head> element is, for a title of "Wikibooks":

<head>
  <title>
    WikiBooks
  </title>
</head>

Of course, this cannot be in a .html file alone, but making this into a complete XHTML file isn't much more work. As I already said, you have to put an <html> tag around the whole thing. But you also need a place for the content. Hence, the <body> element. The <body> element is put within the <html> element. For now, we'll just put text within the <body> element. The text will show up in most browsers in Times New Roman 12-point font and wrapped around the screen. Any kind of whitespace will show up as one space. So here's a sample XHTML document with the title "Wikibooks" and the content "Wikibooks is a great website.":

 <?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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
     <title>
       Wikibooks
     </title>
   </head>
   <body>
     <p>
       Wikibooks is a great website.
     </p>
   </body>
 </html>

The first line is the doctype. This tells the browser what type of document the file is. All valid HTML and XHTML documents have a doctype. We will be using the XHTML 1.0 Strict doctype.