HTML vs. XHTML
A more XML-based and stringent variant of HTML is called XHTML.
What is XHTML?
- EXtensible HyperText Markup Language is known as XHTML.
- A more XML-based and stringent variant of HTML is called XHTML.
- HTML defined as an XML application is called XHTML.
- All of the major browsers support XHTML.
Why XHTML?
Since XML is a markup language, any documents using it must be properly marked up (or “well-formed”).
In order to make HTML more adaptable and extendable to deal with different data formats (like XML), XHTML was developed. Furthermore, browsers attempt to show a website with faults in the markup, disregarding errors in HTML pages. Thus, XHTML has far more stringent error handling.
Read our XML Tutorial if you’d want to learn more about XML.
The Most Important Differences from HTML
- <!DOCTYPE> is mandatory
- The xmlns attribute in <html> is mandatory
- <html>, <head>, <title>, and <body> are mandatory
- Elements must always be properly nested
- Elements must always be closed
- Elements must always be in lowercase
- Attribute names must always be in lowercase
- Attribute values must always be quoted
- Attribute minimization is forbidden
XHTML - < !DOCTYPE ... .> Is Mandatory
An XHTML <!DOCTYPE> declaration is required for an XHTML document.
The xmlns attribute in <html> must identify the xml namespace for the document, and the <html>, <head>, <title>, and <body> elements must also be present.
Example
Here is an XHTML document with a minimum of required tags:
<!DOCTYPE html PUBLIC "-//CODINGASK//DTD XHTML 1.1//EN"
"http://www.codingask.com/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.codingask.com/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
some content here...
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
XHTML Elements Must be Properly Nested
In XHTML, elements must always be properly nested within each other, like this:
Correct:
<b><i>Some text</i></b>
Wrong:
<b><i>Some text</b></i>
XHTML Empty Elements Must Always be Closed
In XHTML, empty elements must always be closed, like this:
Correct:
<p>This is a sentence</p>
<p>This is another sentence</p>
Wrong:
<p>This is a sentence
<p>This is another sentence
XHTML Elements Must Always be Closed
In XHTML, empty elements must always be closed, like this:
Correct:
<p>This is a sentence</p>
<p>This is another sentence</p>
Wrong:
<p>This is a sentence
<p>This is another sentence
XHTML Empty Elements Must Always be Closed
In XHTML, empty elements must always be closed, like this:
Correct:
A break: <br />
A horizontal rule: <hr />
An image: <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Happy Face" title="Html Vs. Xhtml 2" data-lazy-src="happy.gif"><noscript><img decoding="async" src="happy.gif" alt="Happy Face" title="Html Vs. Xhtml 2"></noscript>
Wrong:
A break: <br>
A horizontal rule: <hr>
An image: <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Happy Face" title="Html Vs. Xhtml 3" data-lazy-src="happy.gif"><noscript><img decoding="async" src="happy.gif" alt="Happy Face" title="Html Vs. Xhtml 3"></noscript>
XHTML Elements Must be in Lowercase
In XHTML, element names must always be in lowercase, like this:
Correct:
<body>
<p>This is a sentence</p>
</body>
Wrong:
<BODY>
<P>This is a sentence</P>
</BODY>
XHTML Attribute Names Must be in Lowercase
In XHTML, attribute names must always be in lowercase, like this:
Correct:
<a href="https://www.codingasks.com/html/" target="_blank" rel="noopener">Visit our HTML tutorial</a>
Wrong:
<a HREF="https://www.codingask.com/html/">Visit our HTML tutorial</a>
XHTML Attribute Values Must be Quoted
In XHTML, attribute values must always be quoted, like this:
Correct:
<a href="https://www.codingask.com/html/">Visit our HTML tutorial</a>
Wrong:
<a href=https://www.codingask.com/html/>Visit our HTML tutorial</a>
XHTML Attribute Minimization is Forbidden
In XHTML, attribute minimization is forbidden:
Correct:
<input type="checkbox" name="vehicle" value="bike" checked="checked" />
<input type="text" name="lastname" disabled="disabled" />
Wrong:
<input type="checkbox" name="vehicle" value="bike" checked />
<input type="text" name="lastname" disabled />
