XHTML (Extensible Hypertext Markup Language) is a markup language that is based on XML. It is a stricter version of HTML that enforces rules for syntax
XHTML Document Structure
Every XHTML document should begin with an XML declaration, which tells the browser that it is an XML document. This declaration should be followed by the XHTML document structure. The following code is a basic example of an XHTML document structure:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is the content of my website.</p>
</body>
</html>
In this code, the XML declaration specifies the XML version and encoding. The <!DOCTYPE> declaration specifies the document type as XHTML 1.0 Strict. The <html> element contains all the other elements of the XHTML document, including the <head> and <body> elements. The xmlns attribute specifies the XML namespace, while the xml:lang and lang attributes specify the language of the document.
Semantic Elements
XHTML provides semantic elements that describe the meaning and purpose of content. These elements help search engines and screen readers understand the structure of the document. Here are some examples:
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section>
<h2>About Us</h2>
<p>We are a company that provides...</p>
</section>
<footer>
<p>© 2023 My Website. All rights reserved.</p>
</footer>
In this code, the <header> element contains the site title and navigation links. The <nav> element contains a list of links. The <section> element contains information about the company. The <footer> element contains copyright information.
Forms
Forms are used to collect user input. They are created using the <form> element and can contain various form elements such as text fields, radio buttons, checkboxes, and more. Here is an example:
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Submit</button>
</form>
In this code, the action attribute specifies the URL of the form handler, while the method attribute specifies the HTTP method to use (GET or POST). The <label> element associates a label with a form control. The required attribute makes a field mandatory. The <button> element creates a submit button.
how xhtml is used with html
XHTML and HTML are two different markup languages, but they share a lot of similarities. In fact, XHTML is essentially a stricter and more consistent version of HTML, which means that it is backward compatible with HTML. This means that you can use XHTML code alongside HTML code within the same document, as long as the XHTML code adheres to the stricter syntax and rules of XHTML.
To use XHTML with HTML, you can include the XHTML code within an HTML document by following these steps:
Add the XHTML doctype declaration at the beginning of the document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This tells the browser that the document is an XHTML document.
Add the namespace attribute to the <html> tag:
less
<html xmlns="http://www.w3.org/1999/xhtml">
This specifies the XML namespace used in the document.
Use XHTML syntax for all markup elements and attributes.
For example, you can use XHTML syntax for creating a hyperlink as follows:
<a href="http://example.com" title="Example">Example link</a>
In XHTML, all attributes must be quoted and end with a forward slash.
XHTML and HTML can be used interchangeably, but if you want to use XHTML, it is important to follow its syntax rules and guidelines. Using XHTML can make your code more consistent and easier for machines to parse and process, which can improve the accessibility and usability of your website.