Many of you may have heard of XHTML but your wondering what it is and why use it? Well I will try my best to explain what it is and how to use it correctly. XHTML stands for Extensible HyperText Markup Language, and is quoted by W3.org like this:
The XHTML family is the next step in the evolution of the Internet.
To start using XHTML you firstly need to give your page a DTD (Document Type Definition). There are 3 document types when it comes to using XHTML, these are strict, transitional and frameset. You can find a list of all doctypes on the doctype page.
When writing your XHTML you must always remember to keep all attributes in lower case and put all attribute values in quotes. E.G.
| <TABLE WIDTH=200> - Incorrect
<table width="200"> - Correct |
Line Breaks
Line breaks are coded differently in XHTML, this is because all tags in XHTML must be closed; it is done in the following way:
| <br /> |
Horizontal Rule
This is also closed in the same way as the line break.
| <hr /> |
ID attribute
In HTML there were various tags that had to be given a name attribute, such as a, applet, form, frame, iframe, img, and map. When using XHTML the attribute name is deprecated (obsolete / not used anymore) and is replaced by the id attribute instead. E.G.
| <iframe src="/img_articles/9074/page.html" id="frame_id"> |
There are certain tags that can't contain certain other tags, for instance, the a tag can not contain another a tag inside of it. Here is a list of the others:
a must not contain other a elements. pre must not contain the img, object, big, small, sub, or sup elements. button must not contain the input, select, textarea, label, button, form, fieldset, iframe or isindex elements. label must not contain other label elements. form must not contain other form elements.
If you are using an external stylesheet with your XHTML (which you probably will and should) then you must remember that instead of using the code:
| <link rel="stylesheet" type="text/css" href="stylesheet.css"> |
Which has no closing tag, you must instead use the code:
| <link rel="stylesheet" type="text/css" href="stylesheet.css" /> |
Meta Tags
When you create your HTML document you must always remember to include the charset META tag. You have already included it in your previous HTML page but this will not validate because like the BR and HR tags it also needs to be closed. Here are a few examples of HTML meta tags.
|
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="index,follow"> <meta http-equiv="Content-Language" content="EN-GB"> |
Which are all going to be invalid with XHTML, here's how you close these tags:
|
<META HTTP-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> Wrong
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> Correct |
This should get you well on your way to creating valid XHTML pages and away from the old HTML.
