How to structure a XHTML document
XHTML is a web programming language defined by the W3C (World Wide Web Consortium), as an eventual successor to the HTML programming language. The W3C now recommends that you code in XHTML rather than HTML, as that’s the way most sites are now going, with the ability to combine XML and HTML into a more useful programming language.
However, if you haven’t learnt XHTML yet, don’t despair! The differences between the two languages are fairly small and you can quickly pick up XHTML if you already know HTML. In this post, I’m simply going to guide you through writing a short, but valid, XHTML document. So let’s begin!
DOCTYPE declaration
Firstly, you need to define the Document Type, in what’s called a doctype declaration, so that a browser knows how to render your site. In this case, we are using XHTML 1.0 Transitional, 1 of 3 versions of the XHTML 1.0 specification, and the one I recommend that newbies initially code to.
<!DOCTYPE html
If there is no doctype declaration, then the browser switches to a mode called Quirks Mode, where it attempts to interpret what you have coded in old and incorrect ways. It does this on the presumption that if you have not included a doctype declaration, then you might not know what you are doing, so it has to interpret your “mistakes”. If you have written to a web standard (XHTML 1.0 Transitional being one), then a doctype declaration is very important to ensure that the browser doesn’t display your web page wrong by switching to Quirks Mode.
Next we have the word PUBLIC, showing that the Document Type Definition (DTD) is publicly available, rather than private.
<!DOCTYPE html PUBLIC
Now we have to include the Formal Public Identifier which tells the browser about the DTD and also about the organization behind this:
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”
This is fairly self explanatory - the W3C being the organization behind the DTD, the DTD being XHTML 1.0 Transitional, and the ‘EN’ standing for English.
Finally for the doctype declaration section, we have the web address (URL) of where the DTD can be found:
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Note to place the closing ‘>’ on the end to show that the doctype declaration is over.
Open the HTML tag
Now that the doctype declaration has been done, you need to open the page with the <html> tag.
This is simply done like this:
<html xmlns=”http://www.w3c.org/1999/xhtml”>
This simply describes which language is to be used in the document, and it should be used on the first line after the doctype declaration, on ANY XHTML document, whether it is XHTML 1.0 Strict, XHTML 1.0 Transitional or XHTML 1.1, to name 3 examples.
Finally, place the following code on a new line:
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
The rest of the header markup
Now that the document has been described and defined, it’s time to start adding content to it. The header is sometimes neglected by webmasters, as you may have seen when you visit a web site, and you see “Untitled Document” as the title at the top of the browser. Firstly write <head> on the next line. This simply opens the header.
Now place the opening <title> tag under this on the next line and inside write what you want to be displayed in the browser title. Then close the title tag with </title>. Your header markup should now read like this:
<head>
<title>Daniel Price’s ornithology encyclopedia</title>
Following this comes meta markup, which include keywords and description for your site, for when it is indexed by Google:
<meta name=”keywords” content=”Bird watching, ornithology, wildlife” />
<meta name=”description” content=”A small encyclopedia about the sport of bird watching and how to identify common birds” />
Last but not least is the important link to the CSS (Cascading Style Sheets) file, which tell the browser how to display your web page:
<link rel=’’stylesheet” href=”http://yourwebsite.com/style.css” type=”text/css” />
This tells the browser where the CSS file is and what it is, so that your web site will be displayed properly.
Now, close the header with:
</head>
The body and rest of the document
After you’ve done all that, now it’s time to start placing real content on the page. You need to tell the browser that you are now starting the main body of the document, with the <body> tag:
<body>
After this, you can add paragraphs and images and other content to the page. For the sake of not making this entry extremely long, I’m simply going to add a small bit of text. You need to open the paragraph tag to tell the browser you are writing text, and that it is a paragraph (obviously):
<p>This is some writing. Content can be placed in this tag. Now I will close the tag. </p>
This process can be repeated as many times as you want to place text in the document.
To cut an extremely long blog post short, once you’ve added the content, just finished off the document like this:
</body>
</html>
The body of the document has been closed and now the full document has been closed too, with the closing HTML tag.
That’s it! If you’ve stayed awake through all of that, give yourself a pat on the back!
The full code of the page should be as below, and here is a link to what the page looks like in a browser. The W3 validator confirms that this is Valid XHTML 1.0 Transitional code.
<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Daniel Price’s ornithology encyclopedia</title>
<meta name=”keywords” content=”Bird watching, ornithology, wildlife” />
<meta name=”description” content=”A small encyclopedia about the sport of bird watching and how to identify common birds” />
<link rel=”stylesheet” href=”http://danlprice.co.uk/style.css” type=”text/css” />
</head>
<body>
<p>This is some writing. Content can be placed in this tag. Now I will close the tag. </p>
</body>
</html>
