Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Why do we use XHTML?
2.
Syntax of XHTML
3.
Declaration of DOCTYPE
4.
Case Sensitivity
5.
Closing the tags in XHTML
6.
Attribute Quotes in XHTML
7.
Attribute minimization in XHTML
8.
Id attribute in XHTML
9.
Language attribute in XHTML
10.
Nested tags in XHTML
11.
Prohibitions on Certain Elements
12.
A bare-bones XHTML document
13.
XHTML DOCTYPES
13.1.
Strict
13.2.
Transitional
13.3.
Frameset
14.
XHTML Attributes
14.1.
Core Attributes
14.2.
Language Attributes
14.3.
Microsoft Proprietary Attributes
15.
XHTML Events
15.1.
The <body> and <frameset> Level Events
15.2.
The <form> Level Events
15.3.
The Keyboard Events
15.4.
Other Events
16.
Frequently Asked Questions
16.1.
Why do we use XHTML?
16.2.
What are the things we need to keep in mind while writing an XHTML document?
16.3.
What is attribute minimization in XHTML?
16.4.
What are the important rules while writing a new XHTML document?
17.
Conclusion
Last Updated: Sep 19, 2024

Complete Guide To XHTML

Author Aditya Kumar
0 upvote

 

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.

  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" "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

classclass_rule or style_ruleThis is the element's class.
Idid_nameThe element's unique identifier.
stylestyle_definitionThe definition of a style inline.
Titletooltip_textThe 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

dirltr | rtlThis property determines the text's direction.
langlanguage_codeThis 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

accesskeycharacterSets a keyboard shortcut for gaining access to a specific element.
languagestringThis 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.
tabindexnumberThis will set the element's tab order.
contenteditablebooleanAllows users to make changes to content that has been rendered in Internet Explorer 5.5 or higher. True or false are the two options.
disabledbooleanIf the disabled attribute is set, the element will seem faded and will not respond to user input. True or false are the two options.
hidefocuson or offThe 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.
unselectableon or offIt 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

onloadScriptWhen an XHTML document is loaded, the script is executed.
onunloadScriptWhen 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

onchangeScriptWhen the element changes, the script runs.
onsubmitScriptWhen the form is submitted, the script runs.
onresetScriptWhen the form is reset, the script runs.
onselectScriptWhen the element is chosen, the script runs.
onblurScriptWhen the element loses focus, the script runs.
onfocusScriptWhen 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

onkeydownScriptWhen a key is pressed, the script runs.
onkeypressScriptWhen you push and release a key, the script runs.
onkeyupScriptThe 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

onclickScriptThe script is activated by a mouse click.
ondblclickScriptThe script is activated by a double-click on the mouse.
onmousedownScriptWhen the mouse button is pressed, the script runs.
onmousemoveScriptWhen the mouse pointer moves, the script runs.
onmouseoutScriptWhen the mouse pointer leaves an element, the script runs.
onmouseoverScriptWhen the mouse pointer passes over an element, the script runs.
onmouseupScriptWhen 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.

 

Happy Learning!

Live masterclass