Skip to main content

HTML vs XHTML

XHTML is a stricter and cleaner version of HTML.

What Is XHTML?

  • XHTML stands for EXtensible HyperText Markup Language
  • XHTML is almost identical to HTML 4.01
  • XHTML is a stricter and cleaner version of HTML
  • XHTML is HTML defined as an XML application
  • XHTML is a W3C Recommendation of January 2000.
  • XHTML is supported by all major browsers.

Why XHTML?

Many pages on the internet contain "bad" HTML.
The following HTML code will work just fine if you view it in a browser (even if it does NOT follow the HTML rules):
<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
<p>This is a paragraph
</body>
XHTML is HTML 4.01 redesigned as XML.
XML is a markup language where documents must be marked up correctly and "well-formed".
If you want to study XML, Read our XML tutorial.
Today's market consists of different browser technologies. Some browsers run on computers, and some browsers run on mobile phones or other small devices. Smaller devices often lack the resources or power to interpret a "bad" markup language.
Therefore - by combining the strengths of HTML and XML, XHTML was developed.

The Most Important Differences from HTML:

  • 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

XHTML Elements Must Be Properly 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>
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 a closing 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 Closed

Empty elements must also be closed.
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 Case

Tag names and attributes must be in 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 Element

All XHTML elements must be nested within the <html> root element. Child elements must be in pairs and correctly nested within their parent element.
The basic document structure is:
<html>
<head> ... </head>
<body> ... </body>
</html>

Comments

Post a Comment

Popular posts from this blog

Toshiba Canada enters all-in-one PC market

Toshiba of Canada has thrown its hat into the all-in-one personal computer (PC) ring with the launch this week of the Toshiba DX730, a 23” all-in-one machine designed for users who want a large display and multimedia features in an environment where space is at a premium. It's Toshiba's first foray into this form factor, said Mini Saluja, national training manager with Toshiba of Canada, building on its experience in the laptop market. The DX730 has a 23” full HD multitouch display with a glossy black finish on an aluminum stand. It comes with a matching Bluetooth keyboard and mouse, and boasts Onkyo stereo speakers with Waves MaxxAudio sound processing. Two models of the DX730 will initially be available. The $899 model features a second-generation Intel Core i3 processor with 4GB of DDR3 memory, a 1TB 7200 RPM hard drive, a DVD SuperMulti Drive and HDMI in. For $1,049, you can move up to a model with an NVIDIA Geforce GT 540M processor and Intel Core i5, as we...
1 comment
Read more

Xiaomi Mi 11 Ultra review

  Introduction Now that the Pro moniker has gone mainstream, it's Ultra that has come to represent the cream of the crop, and the Xiaomi Mi 11 Ultra can wear that badge proudly. Limited to its home market last year, the ultimate Mi has gone global this time around, and we're happy to have it for review today. We're torn whether it's the camera system's physical appearance that is more striking or the hardware inside. A simply massive raised area on the back looks bolted on, almost after the fact, it's hard to miss, and it's a great conversation starter even if it's not everyone's cup of tea. But its size is warranted - the main camera packs the largest sensor used on a modern-day smartphone, and next to it - two more modules unmatched in their own fields, in one way or another. Oh, and yes, there's also a display here - because why not, but also because it can be useful. There's a lot more than 1.1 inches of ...
Post a Comment
Read more

JavaScript Where To

JavaScript in <body> The example below writes the current date into an existing <p> element when the page loads: Example <html> <body><h1>My First Web Page</h1> <p id="demo"></p> <script type="text/javascript"> document.getElementById("demo").innerHTML=Date(); </script> </body> </html>
Post a Comment
Read more