XHTML - D-Zine Volume 11 :
XHTML Doctype








On this page we will look at Doctype, Head, Body and Title Compulsory.

An XHTML document must consist of a doctype, head, title and a body. You will learn about the doctype and what it does in the following subsections.

Invalid Valid
<html>
  <head>...</head>
  <body>...</body>
</html>
<!DOCTYPE ... >
<html>
  <head>
    <title>...</title>
  </head>
  <body>...</body>
</html>


Note that the doctype is not a part of the XHTML document, its job is to state what language and version is being used. In this case it is XHTML, version 1.0. Thus the Doctype does not have to be lower case and does not require to be terminated with a forward slash.



The XMLNS Attribute
First let's, start with the simple part, the head tag requires an "xmlns" attribute, which is an XML Namespace . This attrubute looks like this:

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





Document Type Definition
A DTD (the doctype) declares what type of language a document is written in. A HTML 4.01 Transitional Doctype that you may have seen in your time using HTML, may look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


For HTML 4.01, you have four flavours of document types:

HTML 4.01 Loose
HTML 4.01 Transitional
HTML 4.01 Strict
HTML 4.01 Frameset



For XHTML, which is a very strict language, the loose Doctype doens't exist anymore.
There are only three flavours of Doctypes:

XHTML 1.0 Transitional
- Most common in use and easy to conform to.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


XHTML 1.0 Strict
- Has some formatting features disabled and is harder to conform to.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


XHTML 1.0 Frameset
- Is used strictly for frameset pages.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


With the Strict DTD, you must use CSS for formatting as most of XHTML's formatting features have been disabled as they have been deprecated. If you do a search of W3.ORG will find CSS alternatives that will be much more powerful than the XHTML formatting features that have been disabled.

XHTML 1.1 doesn't have any conformance levels such as strict and transitonal, there is only XHTML 1.1. This is similar to the XHTML 1.0 Strict DTD and its doctype looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


With all of this in mind is a basic XHTML Transitional template for your use:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
</head>
<body>
</body>
</html>


The XML tag that hasn't been explained yet, declares the version of XML being used and the character set/encoding. The charater set is used to define which characters are available. For example, a Japanese document would have a Japanese Character Set. ISO-8859-1 is the Western European Character Set that was created by the International Standards Organization. You may have seen the character set defined in a meta tag before similar to the one below:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


UTF-8 (Unicode) is the native encoding of XHTML and its use with XHTML is encouraged, although, it is not of concern to use a different character set such as ISO-8859-1.


Language Attributes
The "lang" attirbute is commonly used to specify the language being used inside an element. The "xml:lang" attribute must be used in conjunction with the "lang" attribute in XHTML. The only reason why the "lang" element is used is for back-browser compatibility reasons and has actually been removed from XHTML 1.1. Here follows an example:

<p lang="en" xml:lang="en">Hello World</p>
<p lang="de" xml:lang="de">Hallo Welt</p>


 << PREVIOUS
READ MORE >>  


















DEVELOPER TIP!





     "Better Than Books - As Easy As It Gets!"