mileswjohnson » read » The basics of Xhtml

The basics of Xhtml

November 17th, 2007

Lets start off by assuming you know the basics of HTML (HyperText Markup Language). XHTML stands for eXtensible HyperText Markup Language, allowing itself to be more versatile, compatible, and cleaner then its predecessor. It is aimed to replace HTML as a global web language and has the ability to support xml applications. XHTML is recommended for any web programmer.

Doctypes and Headers
All XHTML files should have a Document Type Definitions (Doctype) stated in its source. A XHTML document consists of three parts: Doctype, Head, and Body. The Doctype declaration should always be the first line in an XHTML document. There are three different XHTML Doctypes: Strict, Transitional, and Frameset. The html tag must have the following attribute associated with it, xmlns="http://www.w3.org/1999/XHTML". We will start out by explaining quickly what each Doctype accomplishes.

Strict: Use this when you want really clean markup, free of presentational clutter. Use this together with Cascading Style Sheets.
Transitional: Use this when you need to take advantage of HTMLs presentational features and when you want to support browsers that don't understand Cascading Style Sheets.
Frameset: Use this when you want to use HTML Frames to partition the browser window into two or more frames.

< !DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-strict.dtd">
< !DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">
< !DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-frameset.dtd">

Empty Tags
New in XHTML is the closing of meta, base, link, img, br, and hr tags. Usually they close with a simple ending tag like all the other tags, but for your XHTML to pass its standards it should now be auto-closed as so />. These elements do not need a ending tag, this closing tag /> provides that same effect. One important fact about using the img tag, is that no matter what, you must use the alt tag, even if the alt value is blank. It is also recommended that you supply a title tag for all anchor links.

Syntax
XHTML is all about a clean looking source and is all case sensitive. So lets begin with lowercase and uppercase attributes. In HTML, tags could be lowercase or uppercase and the browser will read it the same; (E.G., WIDTH=100 HEIGHT="100"). It wasnt necessary to use quotation marks within these attributes. But, now with XHTML it has all changed. All tags and attributes must be lowercase and have there elements nested within quotations; (E.G., width="100" height="100"). Its not difficult to start coding in lower case and using quotations. If you must edit a current file and have it meet XHTML standards, just use a program like dreamweaver or notepad, and replace and re-format the main tags. You can also get a firefox extension called HTML Tidy, which will also render your source as XHTML.

When using forms in XHTML, it is recommended you do the following. All forms must have a fieldset child, associated with a legend. All inputs must have a label associated with itself. In XHTML the id attribute replaces the name attribute, unless you are using a global radio/checkbox input. When you are marking an input disabled, selected, checked or another attribute, that attribute needs to be quoted; checked="checked". XHTML elements must be properly nested and closed, and each tag must match up accordingly and cannot be missing an closing tag. Here is a full example of a clean mark up:

< !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">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
 
<body>
This would also be a <a href="#" title="Link">clickable anchor link</a>!
<img src="this/is/a/image.gif" alt="Image" />
<form action="index.php" method="post">
<fieldset>
    <legend>Search</legend>
 
    <label for="term">Search Terms</label>
<input type="text" id="term" name="term" />
<input type="submit" id="submit" name="submit" value="Submit" />
</fieldset>
</form>
 
</body>
</html>

In closing, XHTML is not difficult to learn compared to HTML. Its just a few simple syntax and code changes that are quite beneficial. Why wouldnt you want to have a clean, well nested, validated source? I knew I do! Thank you for reading, I hope this has helped some eager beginner wanting to learn XHTML.

You can leave a comment, or trackback from your own site.

2 Comments

1
Alec Shade December 21st, 2007 4:59 am

I am following you, still I fail to understand why should I use xhtml instead of html. Care to elaborate on that a little longer? Thanks.

PS. Also, the “Leave a Reply” fields font color is white so it’s hard to see what I type in there. You should fix this.
2
Miles January 10th, 2008 9:28 am

@Alec - It wont matter if you do xhtml or html, but as long as you do them bother correctly you should be fine. The few reasons why you should use xhtml is because it is cleaner, more up to date, clients prefer everything in xhtml and its just a personal preference.