XHTML stands for Extensible Hypertext Markup Language. It's a hybrid language that incorporates HTML and XML.
XHTML is nearly identical to HTML, although it is more stringent. XHTML is HTML that is defined as an XML application. All major browsers e.g. Google Chrome, Firefox, Microsoft Edge etc. are compatible with it.
In this blog, we will go through the complete guide to XHTML to understand the concepts in a better way.
Why do we use XHTML?
XML is a markup language that requires all documents to be formatted appropriately (be "well-formed").
XHTML was created to make HTML more extendable and versatile in dealing with various data formats (such as XML). Furthermore, browsers ignore HTML page problems and attempt to show the webpage even if the markup contains mistakes. As a result, XHTML has a stricter error handling system.
Syntax of XHTML
The syntax of XHTML is relatively similar to that of HTML, and practically all valid HTML components are also helpful in XHTML. However, when writing an XHTML page, you must pay special care to ensure that your HTML document is XHTML compatible.
While creating a new XHTML page or converting an old HTML document to XHTML, keep the following points in mind:
At the top of the XHTML document, add a DOCTYPE declaration.
All XHTML tags and attributes must be written in lower case.
All XHTML tags should be properly closed.
All of the tags should be appropriately nested.
All attribute values must be quoted.
Minimization of attributes is prohibited.
The id attribute should be used instead of the name attribute.
The script tag's language attribute should be avoided.
The following is a full explanation of the above-mentioned XHTML rules.
Declaration of DOCTYPE
A DOCTYPE declaration must appear at the top of every XHTML document. Here's an example of it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Case Sensitivity
The markup language XHTML is case sensitive. All tags and attributes in XHTML must be expressed in lower case.
<!-- This is not acceptable in XHTML -->
<A Href="/xhtml/xhtml_tut.html">XHTML is here</A>
<!-- This is how you should write in XHTML -->
<a href="/xhtml/xhtml_tut.html">XHTML is here</a>
The example is inaccurate because the Href and anchor tag A are not in lower case.
Closing the tags in XHTML
Every XHTML tag, including empty components, should have an equivalent closing tag. Here's an example of how to use tags correctly and incorrectly.
<!-- This is not acceptable in XHTML -->
<p>This is the wrong way to write paragraph in XHTML.
<!-- This is also not acceptable in XHTML -->
<img src="/img/xhtmlsample.gif" >
The following syntax demonstrates how to write the above tags in XHTML correctly. The difference is that we have appropriately closed both tags here.
<!-- This is acceptable in XHTML -->
<p>This is the wrong way to write a paragraph in XHTML.</p>
<!-- This is also acceptable now -->
<img src="/img/xhtmlsample.gif" />
Attribute Quotes in XHTML
XHTML attribute values must be quoted in their entirety. Otherwise, your XHTML document would be considered invalid. The following is an example of syntax.
<!-- This is not acceptable in XHTML -->
<img src="/img/xhtmlsample.gif" width=220 height=60 />
<!-- This is how you should write it in XHTML. -->
<img src="/img/xhtmlsample.gif" width="220" height="60" />
Attribute minimization in XHTML
Attribute minimization is not possible in XHTML. It implies that the character and its value must be stated explicitly. The following example demonstrates the distinction:
<!-- This is not acceptable in XHTML -->
<option selected>
<!-- This is how you should write it in XHTML. -->
<option selected="selected">
Id attribute in XHTML
The id attribute has taken the place of the name. XHTML likes to use id = "id" instead of name = "name." The following example demonstrates how:
<!-- This is not acceptable in XHTML -->
<img src="/img/xhtmlsample.gif" name="xhtml_pic" />
<!-- This is how you should write it in XHTML. -->
<img src="/img/xhtmlsample.gif" id="xhtml_pic" />
Language attribute in XHTML
The script tag's language attribute has been deprecated. This discrepancy is demonstrated in the following example:
<!-- This is not acceptable in XHTML -->
<script language="JavaScript" type="text/JavaScript">
document.write("XHTML is here!");
</script>
<!-- This is how you should write it in XHTML. -->
<script type="text/JavaScript">
document.write("XHTML is here!");
</script>
Nested tags in XHTML
All of the XHTML tags must be properly nestled. Otherwise, your document will be interpreted as an invalid XHTML document. The syntax is demonstrated in the example below.
<!-- This is not acceptable in XHTML -->
<b><i> Bold and italic statement</b></i>
<!-- This is how you should write it in XHTML. -->
<b><i> Bold and italic statement</i></b>
Prohibitions on Certain Elements
The following elements are not permitted to contain any other elements. This ban is in effect at all levels of nesting. That is to say that it contains all of the descending parts.
Element
Prohibition
<a>
Other <a> elements must not be present.
<pre>
Other <img>, <object>, <big>, <small>, <sub>, or <sup> elements must not be present.
<button>
These <input>, <select>, <textarea>, <label>, <button>, <form>, <fieldset>, <iframe> or <isindex> elements must not be present.
<label>
Other <label> elements must not be present.
<form>
Other <form> elements must not be present.
A bare-bones XHTML document
The sample below displays the minimum content of an XHTML 1.0 document.
<?xml version="1.0" encoding="UTF-8"?>
<!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/TR/xhtml1" xml:lang="en" lang="en">
<head>
<title>A title is required for every document</title>
</head>
<body>
...your content goes here...
</body>
</html>
XHTML DOCTYPES
Three Document Type Definitions(DTDs) are defined in XHTML. The XHTML Transitional document is the most frequent and straightforward.
Three DTDs relate to the XHTML 1.0 document type specifications.
Strict
Transitional
Frameset
A few XHTML elements and attributes are present in one DTD but not in another. As a result, when constructing your XHTML page, you must carefully choose your XHTML components or attributes. On the other hand, the XHTML validator can assist you in distinguishing between valid and invalid components and properties.
Strict
This DTD is recommended if you plan to strictly use Cascading Style Sheets (CSS) and avoid writing the majority of XHTML attributes. A document that follows this DTD is of the highest possible quality.
You must include the following line at the top of your XHTML document if you wish to utilise the XHTML 1.0 Strict DTD.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional
If you want to use a lot of XHTML attributes and a few Cascading Style Sheet properties, this DTD should be used, and your XHTML page should be written accordingly.
You must include the following line at the top of your XHTML document if you wish to utilise the XHTML 1.0 Transitional DTD.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset
This is useful if you wish to divide the browser window into two or more frames using HTML Frames.
You must include the following line at the top of your XHTML document if you wish to use the XHTML 1.0 Frameset DTD.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Whatever DTD you choose to write your XHTML document, if it is a valid XHTML document, it is deemed to be of good quality.
XHTML Attributes
There are a few common XHTML/HTML attributes that are connected with all HTML tags. These characteristics are listed below, along with a brief description.
Core Attributes
The base, head, HTML, meta, param, script, style, and title elements are all invalid.
Attribute
Value
Description
class
class_rule or style_rule
This is the element's class.
Id
id_name
The element's unique identifier.
style
style_definition
The definition of a style inline.
Title
tooltip_text
The text will appear in the mouse tip.
Language Attributes
The lang attribute specifies the language in which the enclosing text is written. The ISO standard language abbreviations are used to identify the language, such as fr for French, en for English, and so on.
Base, br, frame, frameset, hr, iframe, param, and script elements are all invalid.
Attribute
Value
Description
dir
ltr | rtl
This property determines the text's direction.
lang
language_code
This will set the language code.
Microsoft Proprietary Attributes
With Internet Explorer 4 and higher versions, Microsoft added a number of additional proprietary properties.
Attribute
Value
Description
accesskey
character
Sets a keyboard shortcut for gaining access to a specific element.
language
string
This attribute indicates the scripting language that will be used with an associated script connected to the element, which is usually done via an event handler attribute. JavaScript, JScript, VBS, and VBScript are examples of possible values.
tabindex
number
This will set the element's tab order.
contenteditable
boolean
Allows users to make changes to content that has been rendered in Internet Explorer 5.5 or higher. True or false are the two options.
disabled
boolean
If the disabled attribute is set, the element will seem faded and will not respond to user input. True or false are the two options.
hidefocus
on or off
The focus on an element's content is hidden with this proprietary attribute, which was introduced with Internet Explorer 5.5. The tabindex attribute must be used to apply attention to the element.
unselectable
on or off
It is used to prevent the selection of material presented in Internet Explorer 5.5.
XHTML Events
Users interact with a website by clicking on the text, photos, and hyperlinks, hovering over items, and so on. This is what JavaScript refers to as an event.
Our event handlers can be written in JavaScript or VBScript, and we can specify them as a value for the event tag attribute. The XHTML 1.0 specification contains a comparable set of events as the HTML 4.01 specification. We will look upon some of the event types in the complete guide to XHTML.
The <body> and <frameset> Level Events
When an event happens at the document level, only the following two attributes can be used to activate any JavaScript or VBScript code.
Attribute
Value
Description
onload
Script
When an XHTML document is loaded, the script is executed.
onunload
Script
When an XHTML document is unloaded, the script is executed.
The <form> Level Events
When an event happens at the form level, the following six attributes can be utilised to trigger any JavaScript or VBScript code.
Attribute
Value
Description
onchange
Script
When the element changes, the script runs.
onsubmit
Script
When the form is submitted, the script runs.
onreset
Script
When the form is reset, the script runs.
onselect
Script
When the element is chosen, the script runs.
onblur
Script
When the element loses focus, the script runs.
onfocus
Script
When the element receives focus, the script is executed.
The Keyboard Events
The keyboard is responsible for the below three occurrences. The base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements do not support these events.
Attribute
Value
Description
onkeydown
Script
When a key is pressed, the script runs.
onkeypress
Script
When you push and release a key, the script runs.
onkeyup
Script
The script releases the key.
Other Events
When the mouse comes into touch with any HTML tag, the following seven events occur. The base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements do not support these events and are invalid events.
Attribute
Value
Description
onclick
Script
The script is activated by a mouse click.
ondblclick
Script
The script is activated by a double-click on the mouse.
onmousedown
Script
When the mouse button is pressed, the script runs.
onmousemove
Script
When the mouse pointer moves, the script runs.
onmouseout
Script
When the mouse pointer leaves an element, the script runs.
onmouseover
Script
When the mouse pointer passes over an element, the script runs.
onmouseup
Script
When the mouse button is released, the script runs.
Frequently Asked Questions
Why do we use XHTML?
XML is a markup language that requires all documents to be properly formatted (be "well-formed"). XHTML was created to make HTML more extendable and versatile to deal with various data formats (such as XML). Furthermore, browsers ignore HTML page problems and attempt to show the webpage even if the markup contains mistakes. As a result, XHTML has a stricter error handling system.
What are the things we need to keep in mind while writing an XHTML document?
Here are things we need to know about XHTML: <!DOCTYPE> is required. The xmlns attribute in <html> is required, as are <html>, <head>, <title>, and <body>. Elements must be appropriately nested at all times. All elements must be closed at all times. All elements must be written in lowercase. The names of attributes must always be in lowercase. Attribute values must be quoted at all times. Minimization of attributes is prohibited.
What is attribute minimization in XHTML?
Attribute minimization is not possible in XHTML. It implies that the character and its value must be stated explicitly.
What are the important rules while writing a new XHTML document?
Important rules are given below: Add a DOCTYPE declaration (<!DOCTYPE html>) at the top of the XHTML document. All XHTML tags and attributes must be written in lowercase. All XHTML tags should be properly closed. All of the tags should be appropriately nested. All attribute values must be quoted. Minimization of attributes is prohibited. The id attribute should be used instead of the name attribute. The script tag's language attribute should be avoided.
Conclusion
In this article, we came through the complete guide to XHTML. We have understood its attributes, events and its properties. XHTML is an acronym for Extensible Hypertext Markup Language. It is the next step in the internet's evolution. The initial document type in the XHTML family is XHTML 1.0.
If you’re confident about the complete guide to XHTML, you can look at the topic HTML Vs XHTML and see the differences between HTML and XHTML.
117+ registered 