|
Ken Ward's HTML Tutorial ...Summary of XHTMLThis page is a cookbook for making HTML 4.01 pages into XHTML pages, rather than a tutorial. What is XHTML?XHTML stands for E X tensible H yper T ext M arkup L anguage , which is aimed to replace HTML. It is very similar to HTML 4.01, but is a stricter and more logical. XHTML is a based HTML and XML (e X tensible M arkup L anguage) . It is compatible with older browsers, and is the 'HTML' of the future. Put crudely, XHTML is the new HTML. You don't need to change your pages to be ".xhtml". They remain ".htm" or ".html", but they are written in a way that makes it less likely for them to fail in current browsers, and compatible with future ones. Why Use XHTML ?Browsers are presently very forgiving and support the old HTML, however, in the future, browsers and programs dealing with HTML will become more strict. A correct XHTML document is easier for a program to examine and to check. When a browser opens a webpage, it can open an XHTML page quicker, because it doesn't have to go into "quirks" mode to figure out non-standard code. Following the XHTML guidelines, documents are made more easy to transport to other media, and increases accessibility, in for instance, talking browsers and text-only browsers. In the future, the number of clients will increase, with telephones and other media reading internet documents. Using standard documents gives your pages forward compatibility. Converting to XHTML now, will make your pages compatible with future technology. Basic XHTML DocumentThe following is an example of a basic XHTML document :
The above document defines the character set in the first line. Insstead of using utf-8, you can use other character sets. For example: < ?xml version="1.0" encoding="iso-8859-1"? > The next one defines the character set in the meta tags.
A minimal document must have a DTD at the top. The Content Type needs to be defined, although this can be done server side. And the page needs the html, head, body, and title tags. DoctypeThere are three possible doctypes:
An XHTML document should start with one of the above. More information from W3C. You would use the strict dtd when you do not use any old, or depreciated HTML attributes, and use style sheets to format your pages (and not HTML). You would use the "transitional" dtd when you have not completely used all the standards of XHTML, and wish to format your pages with HTML, using "font", "align", "size", "width", etc. Also the strict dtd does not accept the TARGET tag, although transitional does. This page, for example, follows the transitional standard. The frames DTD is used when you use frames on your page. XML NamespaceYou can also define the xml namespace as follows:
Content TypeIn the example basic page , the Content Type was defined as utf-8 :
Another common one is ISO-8859-1
There are a number of valid character sets and implementations. The one above is a common one for those writing in Roman letters. The page must have its Content Type defined. Differences between HTML and XHTMLNext we need to look at the differences between HTML and XHTML, or what changes we must make to produce XHTML documents. All LowercaseTags must be lowercaseWhile HTML is not case sensitive, and you can write <a Href, <A hRef, etc, in XHTML, all tags must be lowercase. Therefore, the following is the only correct way to write tags:
Attributes and Events Must Be LowercaseThe surprising thing here is that Events, which we think of as JavaScript, must be lowercase. So while we could write onClick=, or ONCLICK=, we must now write:
Similarly, properties and property names must be lowercase:
The <img tag, by the way, MUST have an "alt" attribute in XHTML, which is logical because some browsers are text browsers and others talking browsers, which need the "alt" text. The forward-slash at the end of the IMG tag leads us onto the next rule: All Tags Must Be ClosedIn HTML, it wasn't necessary to close some tags, and the following is OK in HTML:
However, in XHTML, the tags must be closed:
Which, after all, is logical. Some tags in HTML are empty tags and it wasn't necessary to close them. The famous example is:
In XHTML we must close this tag. One way to do this, which is compatible with older browsers is to add a space and a forward slash:
So in XHTML we would write the empty tags as follows:
These tags must be on one line in XHTML, whereas they could span several lines in HTML. Attribute Values Must Be QuotedIn HTML, we could write:
However, this breaks three rules. The correct way to write the above is:
That is, all the values are in quotes, and we do not have minimisation , where we could write simply checked , when we meant checked="checked" or checked="true" .(If the name attribute is present, the id attribute is required, but they don't need to have the same value) XHTML elements must be properly nested and well-formedThis means that we should not write:
But we should write this:
That is we close the tags in the opposite order to the way we opened them. Also we should not write block tags such as "<p>" or "<table>") inside inline elements (such as "<a>", "<span>", or "<font>"). So:
Because we have the block (p) element inside an inline element (font). Instead write:
The id attribute replaces the name attributeIn XHTML, the name attribute is replaced with the id attribute. In transitional documents both name and id can be used, but a name without an id is not allowed. The name and id property values must be one word. So not
But
Required AttributesSome elements require an attribute. For instance, the FORM requires an action:
An empty action, it appears, is better than no action! An image requires an "alt" attribute and an src attribute!:
JavaScript and CSS tags need a type attribute:
In strict XHTML 1.0, the language tag is deprecated. So we write: <script type= "text/javascript" > Rather than: <script language= "javascript" type= "text/javascript" > HTML in JavaScriptXHTML considers the forward slash to be an end marker, so when writing HTML with JavaScript the forward slashes should be preceded with an escape character ("\", backward slash). So:
The backward slash precedes any forward slashes. Invalid CharactersSome characters may not be recognised in the character set chosen. For instance, �� may not be recognised, and needs to be replaced by © Strict XHTML recognizes the following special character names only:
& - ampersand ( & )
Most Recent Revision: 18-Oct-98.
I am always pleased to hear from you.
|
