Summary of HTML to XHTML;
In HTML, some elements can be improperly nested within each other, like this:
In XHTML, all elements must be properly nested within each other, like this:
Note: A common mistake with nested lists, is to forget that the inside list must be within <li> and </li> tags.
This is wrong:
XHTML Elements Must Always Be Closed
Non-empty elements must have an end tag.
This is wrong:
Empty elements must either have an end tag or the start tag must end with />.
This is wrong:
The XHTML specification defines that the tag names and attributes need to be lower case.
This is wrong:
All XHTML elements must be nested within the <html> root element. All other elements can have sub (children) elements. Sub elements must be in pairs and correctly nested within their parent element. The basic document structure is:
Some More XHTML Syntax Rules:
This is wrong:
This is wrong:
This is wrong:
HTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map. In XHTML the name attribute is deprecated. Use id instead.
This is wrong:
To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol.
The Lang Attribute
The lang attribute applies to almost every XHTML element. It specifies the language of the content within an element.
If you use the lang attribute in an element, you must add the [FONT=Arial,Helvetica,Geneva,sans-serif][FONT=Arial,Helvetica,Geneva,sans-serif]xml[/FONT][/FONT]:lang attribute, like this:
All XHTML documents must have a DOCTYPE declaration. The html, head and body elements must be present, and the title must be present inside the head element.
This is a minimum XHTML document template:
The XHTML standard defines three Document Type Definitions.
The most common is the XHTML Transitional.
<!DOCTYPE> Is Mandatory
An XHTML document consists of three main parts:
An XHTML Example
This is a simple (minimal) XHTML document:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The rest of the document looks like HTML:
XHTML 1.0 Strict
XHTML 1.0 Transitional
XHTML 1.0 Frameset
-----------------------------------------
Thanks to Resonate for this article
- Tags must be properly nested: overlapping elements are not allowed
- Tags and attributes must be in lower case
- All elements must be closed
- Attribute values must always be quoted
- Attributes cannot be minimized: For example, <option selected> is incorrect it should be instead: <option selected="true">
- ID attribute replaces the Name attribute
- Mandatory elements: XHTML documents require certain mandatory elements. The html, head, body and title elements must exist. Additionally there must be a DOCTYPE declaration.
- XHTML elements must be properly nested
- XHTML elements must always be closed
- XHTML elements must be in lowercase
- XHTML documents must have one root element
In HTML, some elements can be improperly nested within each other, like this:
<b><i>This text is bold and italic</b></i>
In XHTML, all elements must be properly nested within each other, like this:
<b><i>This text is bold and italic</i></b>
Note: A common mistake with nested lists, is to forget that the inside list must be within <li> and </li> tags.
This is wrong:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
</ul>
This is correct:<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Notice that we have inserted a </li> tag after the </ul> tag in the "correct" code example.XHTML Elements Must Always Be Closed
Non-empty elements must have an end tag.
This is wrong:
<p>This is a paragraph
<p>This is another paragraph
This is correct:<p>This is a paragraph</p>
<p>This is another paragraph</p>
Empty Elements Must Also Be ClosedEmpty elements must either have an end tag or the start tag must end with />.
This is wrong:
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
This is correct:A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />
XHTML Elements Must Be In Lower CaseThe XHTML specification defines that the tag names and attributes need to be lower case.
This is wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
This is correct:<body>
<p>This is a paragraph</p>
</body>
XHTML Documents Must Have One Root ElementAll XHTML elements must be nested within the <html> root element. All other elements can have sub (children) elements. Sub elements must be in pairs and correctly nested within their parent element. The basic document structure is:
<html>
<head> ... </head>
<body> ... </body>
</html>
Writing XHTML demands a clean HTML syntax.Some More XHTML Syntax Rules:
- Attribute names must be in lower case
- Attribute values must be quoted
- Attribute minimization is forbidden
- The id attribute replaces the name attribute
- The XHTML DTD defines mandatory elements
This is wrong:
<table WIDTH="100%">
This is correct:<table width="100%">
Attribute Values Must Be QuotedThis is wrong:
<table width=100%>
This is correct:<table width="100%">
Attribute Minimization Is ForbiddenThis is wrong:
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>
This is correct:<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
<frame noresize="noresize" />
Here is a list of the minimized attributes in HTML and how they should be written in XHTML:HTML Version XHTML Version
compact
compact="compact"
checked
checked="checked"
declare
declare="declare"
readonly
readonly="readonly"
disabled
disabled="disabled"
selected
selected="selected"
defer
defer="defer"
ismap
ismap="ismap"
nohref
nohref="nohref"
noshade
noshade="noshade"
nowrap
nowrap="nowrap"
multiple
multiple="multiple"
noresize
noresize="noresize"
The id Attribute Replaces The name AttributeHTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map. In XHTML the name attribute is deprecated. Use id instead.
This is wrong:
<img src="picture.gif" name="picture1" />
This is correct:<img src="picture.gif" id="picture1" />
Note: To interoperate with older browsers for a while, you should use both name and id, with identical attribute values, like this:<img src="picture.gif" id="picture1" name="picture1" />
IMPORTANT Compatibility Note:To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol.
The Lang Attribute
The lang attribute applies to almost every XHTML element. It specifies the language of the content within an element.
If you use the lang attribute in an element, you must add the [FONT=Arial,Helvetica,Geneva,sans-serif][FONT=Arial,Helvetica,Geneva,sans-serif]xml[/FONT][/FONT]:lang attribute, like this:
<div lang="no" xml:lang="no">Heia Norge!</div>
Mandatory XHTML ElementsAll XHTML documents must have a DOCTYPE declaration. The html, head and body elements must be present, and the title must be present inside the head element.
This is a minimum XHTML document template:
<!DOCTYPE Doctype goes here>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title goes here</title>
</head><body>
</body></html>
Note: The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element, and it should not have a closing tag.The XHTML standard defines three Document Type Definitions.
The most common is the XHTML Transitional.
<!DOCTYPE> Is Mandatory
An XHTML document consists of three main parts:
- the DOCTYPE
- the Head
- the Body
<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body> ... </body>
</html>
The DOCTYPE declaration should always be the first line in an XHTML document.An XHTML Example
This is a simple (minimal) XHTML document:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>
The DOCTYPE declaration defines the document type:<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The rest of the document looks like HTML:
<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>
The 3 Document Type Definitions- DTD specifies the syntax of a web page in SGML.
- DTD is used by SGML [COLOR=orange! important][FONT=Arial,Helvetica,Geneva,sans-serif][COLOR=orange! important][FONT=Arial,Helvetica,Geneva,sans-serif]applications[/FONT][/FONT][/color][/color], such as HTML, to specify rules that apply to the markup of documents of a particular type, including a set of element and entity declarations.
- XHTML is specified in an SGML document type definition or 'DTD'.
- An XHTML DTD describes in precise, computer-readable language, the allowed syntax and grammar of XHTML markup.
- STRICT
- TRANSITIONAL
- FRAMESET
XHTML 1.0 Strict
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Use this when you want really clean markup, free of presentational clutter. Use this together with Cascading Style Sheets.XHTML 1.0 Transitional
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Use this when you need to take advantage of HTML's presentational features and when you want to support browsers that don't understand Cascading Style Sheets.XHTML 1.0 Frameset
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Use this when you want to use HTML Frames to partition the browser window into two or more frames.-----------------------------------------
Thanks to Resonate for this article
