XHTML complete guide
Introduction
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 are compatible with it.
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"
"[Link]
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/[Link]" >
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 paragraph in XHTML.</p>
<!-- This is also acceptable now -->
<img src="/img/[Link]" />
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/[Link]" width=220 height=60 />
<!-- This is how you should write it in XHTML. -->
<img src="/img/[Link]" 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/[Link]" name="xhtml_pic" />
<!-- This is how you should write it in XHTML. -->
<img src="/img/[Link]" 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">
[Link]("XHTML is here!");
</script>
<!-- This is how you should write it in XHTML. -->
<script type="text/JavaScript">
[Link]("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; 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"
"[Link]
<html xmlns="[Link] 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 are defined in the XHTML standard (DTDs). The
XHTML Transitional document is the most frequent and straightforward.
Three DTDs relate to the XHTML 1.0 document type specifications.
1. Strict
2. Transitional
3. 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"
"[Link]
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"
"[Link]
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"
"[Link]
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/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.
The <body> and <frameset> Level Events
When an event happens at the document level, only 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 <forms> 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.
Keyboards Events
The keyboard is responsible for the next 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.
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
1. What is XHTML?
Extensible Hypertext Markup Language (XHTML) is an acronym for EXtensible
HyperText Markup Language. XHTML is a more XML-based, stricter version of HTML.
HTML that is defined as an XML application is known as XHTML. All of the major
browsers support XHTML.
2. 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 a variety of different 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.
3. What are the things we need to keep in mind while writing an XHTML
document?
Here are some differences are given below:
● <!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.
4. 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.
5. What are the important rules while writing a new XHTML document?
Important rules are given below:
● 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.
Key Takeaways
In this article, we have discussed XHTML. We have understood its attributes, events
and its properties. Extensible Hypertext Markup Language (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.