XHTML

What is XHTML?

  • XHTML stands for EXtensible HyperText Markup Language
  • XHTML is almost identical to HTML
  • XHTML is stricter than HTML
  • XHTML is HTML defined as an XML application
  • XHTML is supported by all major browsers

Why XHML?

By combining the strengths of HTML and XML, XHTML was developed. XHTML is HTML redesigned as XML.

XML is a markup language where documents must be marked up correctly (be "well-formed").

Some devices often lack the resources or power to interpret "bad" markup. (缺closing tag等)

Differences from HTML

P.S. : 相较于HTML更规范，标准更严格。

Document Structure

  • XHTML DOCTYPE is mandatory(必须声明DOCTYPE)

    The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html> must specify the xml namespace for the document.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Title of document</title>
</head>

<body>
  some content 
</body>

</html>

    ​

    A complete list of all the XHTML Doctypes is found in our HTML Tags Reference.

  • The xmlns attribute in <html> is mandatory

  • <html>, <head>,<title>, and <body> are mandatory

XHTML Elements

  • XHTML elements must be properly nested(nested 结构)

    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>

  • XHTML elements must always be closed(必须有closing tag，即便是empty elements)

    wrong:

    <p>This is a paragraph
<p>This is another paragraph

    correct:

    <p>This is a paragraph</p>
<p>This is another paragraph</p>

    ​

    wrong: 

    A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">

    ​

    correct:

    A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

    ​

  • XHTML elements must be in lowercase(elements小写)

    wrong: 

    <BODY>
<P>This is a paragraph</P>
</BODY>

    ​

    correct: 

    <body>
<p>This is a paragraph</p>
</body>

    ​

  • XHTML documents must have one root element

XHTML Attributes

  • Attribute names must be in lower case(属性小写)

    wrong: <table WIDTH="100%">

    correct: <table width="100%">

  • Attribute values must be quoted(属性值必须加引号)

    wrong: <table width=100%>

    correct: <table width="100%">

  • Attribute minimization is forbidden

    wrong: <input type="checkbox" name="vehicle" value="car" checked />

    correct: <input type="checkbox" name="vehicle" value="car"checked="checked" />

    wrong: <input type="text" name="lastname" disabled />

    correct: <input type="text" name="lastname" disabled="disabled" />

Convert from HTML to XHTML

  1. Add an XHTML <!DOCTYPE> to the first line of every page
  2. Add an xmlns attribute to the html element of every page
  3. Change all element names to lowercase
  4. Close all empty elements
  5. Change all attribute names to lowercase
  6. Quote all attribute values

Validator

代码检查W3C validator: http://validator.w3.org/