The most important rules that makes XHTML different from HTML:
- All elements and attributes must be written in lower case.
- All elements and attributes must be nested correctly.
- All non-Empty Elements must have a closing tag.
- All values of attributes must be quoted.
- Every attribute including a boolean attribute must have a value.
- All empty elements must be terminated using a space and a trailing slash.
- Use id attribute instead of the name attribute.
- Must have a DOCTYPE declaration. Here is a template for XHTML.
- in strict XHTML, all inline elements must be contained in a block element.
- All elements and attributes must be written in lower case.
In HTML, you can write all elements and attributes in lower case or upper case, even in mix case:
< table BORDER="1" Width="80%" >
But in XHTML, only lower case is allowed:
<table border="1" width="80%">
All elements and attributes must be nested correctly.
You could do the following nesting in HTML:
<p>This is in HTML <b> </p></b>
In above line, the parent element (p tag) is closed before the child element (b tag) is closed:
Here is the right way to nest the above line in XHTML:
<p>This is in XHTML <strong> </strong> </p>
All non-Empty Elements must have a closing tag.
Her is in HTML:
<p> This is a paragraph.
In XHTML, every tag must have an end tag.
<p>This is a paragraph.</p>
All values of attributes must be quoted.
In HTML:
<a href=index.html>
In XHTML:
</a><a href="index.html">
Every attribute including a boolean attribute must have a value.
In HTML, the presence of the boolean attribute implies "true" to the value
of the attibute, and otherwise implies "false" to the value of the attribute.
Here is how you write in HTML:
<td nowrap>
In XHTML, you must assign the value of the attribute with the same name as the attribute itself.
<td nowrap="nowrap">
All empty elements must be terminated using a space and a trailing slash.
Empty elements are those HTML tags that do not include anything
between the beginning and end tag, they are:
area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta, param
Here are allowed in HTML:
<br><hr>
In XHTML, these become:
<br />
<hr />
Use id attribute instead of the name attribute.
In HTML, some elements such as <a>, <input>, <frame>, <img>, <iframe>
have a name attribute:
<input type="text" name="thename" />
The name attribute is deprecated In XHTML, the above code should be:
<input type="text" id="thename" />
or:
<input type="text" id="thename" name="thename" />
( The smart way to be compatible with older browser)
Must have a DOCTYPE declaration.
Here is a template for XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Title goes here</title>
</head>
<body>
Body content goes here
</body>
</html>
The DTD can be Strict, Transitional, or Frameset.
in strict XHTML, all inline elements must be contained in a block element.
Block: will automatically force a new line before or after the element, and will take the full width available.
Some common block elements include:
<div>
h1, h2, h3
<p>
<table>
<form>
<ul> <ol> <li>
The difference between inline and block HTML elements:
Inline: will not force a new line before or after the element, and only takes as much space as necessary.
Some common inline elements include:
<span>, <a>, <strong>, <br>, <input>