HTML vs XHTML

HTML vs XHTML: XHTML is a stricter, more XML-based form of HTML.


In this tutorial, you will learn-

What is XHTML?

XHTML is a mix of HTML (the HyperText Markup Language) and XML (eXtensible Markup Language). Along these lines, the name XHTML is interpreted as the eXtensible HyperText Markup Language.

Adding the rules of the effectively readable XML document structuring language to HTML resulted in a language that appears almost identical from HTML. While it has much stricter rules, they additionally work on the code’s readability.

After they get used to it, a lot of developers actually prefer the cleaner code. The stricter standard likewise prevents incompatibility issues in various browsers and gadgets.

• XHTML represents EXtensible HyperText Markup Language

• XHTML is a stricter, more XML-based version of HTML

• XHTML is HTML defined as an XML application

• XHTML is supported by all major browsers


Why XHTML?

XML is a markup language where all documents should be increased accurately (be “well-formed”).

XHTML was developed to make HTML more extensible and adaptable to work with other data formats (like XML). Moreover, browsers disregard errors in HTML pages, and attempt to display the site even if it has some errors in the markup. So XHTML accompanies a much stricter error handling.


The Most Important Differences from HTML

• <!DOCTYPE> is mandatory

• The xmlns attribute in <html> is mandatory

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

• Elements should consistently be appropriately nested
• Elements should consistently be closed
•Elements should consistently be in lowercase

• Attribute names should consistently be in lowercase

• Attribute esteems should consistently be quoted

• Attribute minimization is forbidden


XHTML – <!DOCTYPE….> Is Mandatory

A XHTML document should have an XHTML <!DOCTYPE> declaration.

The <html>, <head>, <title>, and <body> elements should likewise be available, and the xmlns attribute in <html> should indicate the xml namespace for the document.

Example

Here is an XHTML document with a minimum of required tags:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Title of document</title>
</head>
<body>

  some content here...

</body>
</html>

XHTML Elements Must be Properly Nested

In XHTML, elements should consistently be appropriately nested within each other, similar to this:

Correct:

<b><i>Some text</i></b>

Wrong:

<b><i>Some text</b></i>

XHTML Elements Must Always be Closed

In XHTML, elements should consistently be closed, like this :

Correct:

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

Wrong:

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

XHTML Empty Elements Must Always be Closed

In XHTML, empty elements should consistently be closed, like this:

Correct:

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

Wrong:

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

XHTML Elements Must be in Lowercase

In XHTML, elements names should consistently be in lowercase, similar to this:

Correct:

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

Wrong:

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

XHTML Attribute Names Must be in Lowercase

In XHTML, attribute names should consistently be in lowercase, similar to this:

Correct:

<a href="https://www.worldofitech.com/html/">Visit our HTML tutorial</a>

Wrong:

<a HREF="https://www.worldofitech.com/html/">Visit our HTML tutorial</a>

XHTML Attribute Values Must be Quoted

In XHTML, attribute values should consistently be quoted, like this:

Correct:

<a href="https://www.worldofitech.com/">Visit our HTML tutorial</a>

Wrong:

<a href=https://www.worldofitech.com/html/>Visit our HTML tutorial</a>

XHTML Attribute Minimization is Forbidden

In XHTML, property minimization is forbidden:

Correct:

<input type="checkbox" name="vehicle" value="car" checked="checked" />
<input type="text" name="lastname" disabled="disabled" />

Wrong:

<input type="checkbox" name="vehicle" value="car" checked />
<input type="text" name="lastname" disabled />


Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.


0 Comments

Leave a Reply

Avatar placeholder