XHTML | Introduction

04 Jul, 2022
XHTML stands for EXtensible HyperText Markup Language. It is the next step to evolution of internet. The XHTML was developed by World Wide Web Consortium (W3C). It helps web developers to make the transition from HTML to XML. Using XHTML, developers can enter the XML world with all the features of it, and they can still remain confident about the backward and future compatibility of the content. The XHTML 1.0 is the first document type in the XHTML family and it is Recommended by W3C in 26 January 2000. The XHTML 1.1 is Recommended by W3c in 31 May 2001. The XHTML5 is a standard and is used to develop an XML adaptation of the HTML5 specification. The XHTML documents contains three parts, which are discussed below:
DOCTYPE: It is used to declare a DTD
head: The head section is used to declare the title and other attributes.
body: The body tag contains the content of web pages. It consists many tags.
Creating a XHTML web page, it is necessary to include DTD (Document Type Definition) declaration. There are three types of DTD which are discussed below:
Transitional DTD
Strict DTD
Frameset DTD
Transitional DTD: It is supported by the older browsers which does not have inbuilt cascading style sheets supports. There are several attributes enclosing the body tag which are not allowed in strict DTD. 
Syntax:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Example: 
html
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">    <head>        <title>Transitional DTD XHTML</title>    </head>    <body bgcolor="#dae1ed">        <div style="color:#090;font-size:40px;                font-weight:bold;text-align:center;                margin-bottom:-25px;">GeeksforGeeks</div>        <p style="text-align:center;font-size:20px;">                A computer science portal</p>        <p style="text-align:center;font-size:20px;">        Option to choose month:        <select name="month">            <option selected="selected">January</option>            <option>February</option>            <option>March</option>            <option>April</option>            <option>May</option>            <option>June</option>            <option>July</option>            <option>Augusy</option>            <option>September</option>            <option>October</option>            <option>November</option>            <option>December</option>        </select>        </p>    </body></html>
Output:
  
Strict DTD: Strict DTD is used when XHTML page contains only markup language. Strict DTD is used together with cascading style sheets, because this attribute does not allow CSS property in body tag. 
Syntax:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Example: 
html
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">    <head>        <title>Strict DTD XHTML</title>    </head>    <body>        <div style="color:#090;font-size:40px;                font-weight:bold;text-align:center;                margin-bottom:-25px;">GeeksforGeeks</div>        <p style="text-align:center;font-size:20px;">                A computer science portal</p>        <p style="text-align:center;font-size:20px;">        Option to choose month:        <select name="month">            <option selected="selected">January</option>            <option>February</option>            <option>March</option>            <option>April</option>            <option>May</option>            <option>June</option>            <option>July</option>            <option>Augusy</option>            <option>September</option>            <option>October</option>            <option>November</option>            <option>December</option>        </select>        </p>    </body></html>
Output:
  
Frameset DTD: The frameset DTD is used when XHTML page contains frames. 
Syntax:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Example: 
html
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Frameset DTD XHTML</title></head><frameset cols="30%, 20%, *">   <frameset rows="40%, 30%, *">      <frame src="gfg.html" />      <frame src="gfg1.html" />      <frame src="geeks.html" />   </frameset>   <frameset rows="40%, 60%">      <frame src="g4g.html" />      <frame src="g4g1.html" />   </frameset>   <frameset rows="20%, 20%, 30%, *">      <frame src="geeksforgeeks.html" />      <frame src="geeksforgeeks1.html" />      <frame src="geeksforgeeks2.html" />      <frame src="geeksforgeeks3.html" />   </frameset></frameset></html>
Output:
  
Why use XHTML?
XHTML documents are validated with standard XML tools.
It is easily to maintain, convert, edit document in the long run.
It is used to define the quality standard of web pages.
XHTML is an official standard of the W3C, your website becomes more compatible and accurate with many browsers.
Benefits of XHTML:
All XHTML tags must have closing tags and are nested correctly. This generates cleaner code.
XHTML documents are lean which means they use less bandwidth. This reduces cost particularly if your web site has 1000s of pages.
XHTML documents are well formatted well–formed and can easily be transported to wireless devices, Braille readers and other specialized web environments.
All new developments will be in XML (of which XHTML is an application).
XHTML works in association with CSS to create web pages that can easily be updated.
Difference Between HTML and XHTML:
sweetyty
HTML and XML
Picked
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Remove elements from a JavaScript Array
Types of CSS (Cascading Style Sheet)
How to get character array from string in JavaScript?
How to set space between the flexbox ?
What is web socket and how it is different from the HTTP?