Rainbow Quill

XHTML

Starting an XHTML Page

So this is my first XHTML tutorial. The tutorials here will be strict to XHTML 1.1 W3C Standard and tested using Mozilla Firefox 3.0.1 (as of this writing) and Internet Explorer 6.0 (since I don’t want to upgrade to version 7.0). So let’s start it simple.

XHTML or Extensible Hypertext Markup Language is a markup language similar to HTML. It is also used for web pages but is also compatible with Mobile XHTML browsers. These small browsers have problems rendering non-XML standard webpages like HTML. XHTML is the XML-standard version of HTML. New tag constructs and rules are added. While redundant tags are also removed.

To give an introduction to a few terms that I would use. Let’s look at the following example:

<tag1></tag1>
<tag2 />
<tag3>tag3 contents</tag3>
<tag4 attrib1="value_1" attrib2="value_2">tag4 contents</tag4>
<tag5 attrib1="value_1" />

All 5 examples are called tags. tag1 is a normal tag paired with a closing tag. tag2 is also a tag but is short-closed. tag3 is like tag1 but it has an inner content of tag3 contents. tag4 is like tag3 with tag4 contents as its inner content and has 2 attributes, attrib1 and attrib2, with values value_1 and value_2 respectively. tag5 is a short-closed tag with an attribute attrib1 with value value_1. XHTML pages are composed of tags like these. Some tags require to be fully-closed while some require to be short-closed.

So to start, you need to specify the document type, also known as the DOCTYPE. This is the source of every web developer’s problem. Most new (and some experienced) web developers encounter the “IE” problem. Yes I do agree with them that the rendering engine of FF is different from IE thus resulting to many design and layout differences. All (known) web browsers render pages in 2 modes:

Standards Mode - This is the mode that the browser uses when it encounters a valid DOCTYPE declaration on the (X)HTML document. It follows a strict way of layouting a page. It follows the specified Document Type Definition (DTD) in the DOCTYPE declaration. DTD defines the rules of the tag structure of the document. Like which tags can be nested with a specific tag. Or like what attributes can a tag have.

Quirks Mode - This is the default mode of browsers when they encounter an invalid DOCTYPE declaration or if they don’t have one. The browser renders the page top-to-bottom based on the tag structure on the file. This results into many of the rendering problems/differences. Of course, we don’t want to let the browser render in this mode that’s why we should be following standards.

This is the normal structure of an XHTML 1.1 document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
   <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
   <title>Basic XHTML 1.1 Structure</title>
</head>

<body>
   <h1>Basic XHTML 1.1 Structure</h1>
   <p>This is just a sample XHTML 1.1 document.</p>
</body>

</html>

The first line is always the DOCTYPE declaration. This specifies that we are going to use XHTML 1.1 and use the DTD associated with it. Following that is the html tag defining that we are going to use the XHTML namespace (from the xmlns attribute). Namespaces areused by XML documents to define the scope of tag rules. The html tag also specifies the language we are going to use via the xml:lang tag.

Inside the html tag are two tags, namely head and body. The head tag contains the headers and metadata of the XHTML document. The meta tag with http-equiv attribute set to Content-Type specifies the content type of the document and how it is going to be delivered to the browser. We set the MIME type to application/xhtml+xml and the character set to UTF-8.

The title tag must be inside the head tag. This contains the page title of the XHTML document. The content of this tag is what is displayed on the browser’s title bar.

Following the head tag (after closing it) is the body tag. The content of this tag is what is displayed on the browser content pane. In this example I’ve added two tags inside the body tag. A header 1 (h1) tag and a paragraph (p) tag with some text inside them.

And by saving this file into my_first_page.htm, you can now view it in a browser. If you want to see how the page looks like, you can view it here.

Leave a reply