★Case-sensitivity of attributes
As mentioned in the previous tutorial under the differences between HTML & XHTML, XHTML is case-sensitive:
RIGHT: <img src="picture.gif" alt="My Picture" border="0"/>
★Quotation marks around values
XHTML does live up to the name of being the sticter and cleaner version of HTML because everything in your code has got to be precisely written - you can't try to take short-cuts. When defining properties, all attribute values must be enclosed within quotation marks " ". Here's an example:
RIGHT: <div class="text">
★Image 'alt' attribute
In XHTML, all image codes must contain the 'alt' attribute, even if it is blank:
RIGHT: <img src="picture.gif" alt="" />
★Use 'id' attribute, not 'name'
If you are used to using the 'name' attribute, make sure you change it to 'id':
RIGHT: <img src="picture.gif" id="picture01" alt="" />
★'lang' attribute
The 'lang' attribute basically points to your browser the language of your document's content. When using this attribute in XHTML, you must include the 'xml:lang' attribute:
RIGHT: <html lang="en" xml:lang="en">...</html>
★DOCTYPE declaration
For every XHTML document, you must have a declare its document type, i.e. DOCTYPE. This is a code which you will insert right at the top of your document's source, before the <html> tag. Key elements that must also be present in your document are the <html>, <head> <title> and <body> tags. Below illustrates the elements that are compulsory (the minimum) for your document:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title goes here</title>
</head>
<body>...</body>
</html>
*Note that the DOCTYPE declaration doesn't require a closing tag ' />' because it is not a XHTML element.
The codes in bold may not always be what you see as above, because it depends whether your DOCTYPE is Transitional, Strict or Frameset. More about this at the Document Type Definitions (DTD) tutorial.
