XHTML (Extensible Hypertext Markup Language).
XHTML is a more stringent version of HTML, which is based on XML (Extensible Markup Language). Unlike HTML, which allows some flexibility in how tags are written, XHTML has stricter syntax rules that make it more compatible with modern web technologies and XML-based tools.
Key Features of XHTML
- XML Compliance: XHTML is based on XML, meaning it follows stricter rules and is case-sensitive. Every tag and attribute in XHTML must be written in lowercase, and all elements must be properly closed.
- Well-formed Structure: In XHTML, all tags must be properly nested and closed. For example, <br /> (line break) must always be self-closing, unlike HTML where <br> is acceptable without the /.
- Document Structure: XHTML follows a stricter, well-formed structure, where you need to properly define the DOCTYPE declaration at the beginning and always close your tags properly.
- Use of Attributes: In XHTML, all attributes must have values enclosed in double quotes (" "). For example, in HTML, you might write <img src=“image.jpg”>; however, in XHTML, this should be written as <img src="image.jpg" />.
- Error Handling: Since XHTML is stricter, it is less forgiving of mistakes. If you miss a tag or do not close an element properly, the entire document may not display correctly.
Basic Structure of an XHTML Document
An XHTML document follows a very similar structure to HTML, with a few key differences due to XML compliance. Below is an example of a simple XHTML document:
<?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">
<head>
<title>XHTML Example</title>
</head>
<body>
<h1>Welcome to XHTML</h1>
<p>This is an example of an XHTML document.</p>
<a href="https://www.example.com">Visit Example</a>
<br />
<img src="image.jpg" alt="Sample Image" />
</body>
</html>
Breakdown of the Code
- XML Declaration:The <?xml version="1.0" encoding="UTF-8" ?> declaration is used at the top of the document to specify that the document is written in XML and uses the UTF-8 encoding.
- DOCTYPE Declaration:The <!DOCTYPE html> declaration specifies that this document uses XHTML 1.0 Strict, which is one of the three DTDs (Document Type Definitions) in XHTML (Strict, Transitional, and Frameset).
- Root <html> Element:The <html> tag has the xmlns attribute, which stands for XML Namespace. This tells the browser that the content is written in XHTML, distinguishing it from regular HTML.
- Head and Body Tags:The <head> contains metadata about the document, like the title.
- The <body> contains the content that is displayed on the page.
- Tags:In XHTML, every tag must be properly nested and closed. The <img> tag is self-closing (<img src="image.jpg" alt="Sample Image" />), unlike HTML where it could be written as <img src="image.jpg" alt="Sample Image">.
- The <a> (anchor) tag and other tags need to have properly closed elements.
- Self-Closing Tags:In XHTML, tags like <br />, <img />, <hr /> must be self-closed with a / at the end. This is a key difference from HTML, where they can be written without the /.
- Tag Case Sensitivity: Tags must be written in lowercase, e.g., <html>, <head>, and <body>.
- Closing All Tags: All tags must be closed, including empty elements like <img />, <br />, and <hr />.
- Attribute Quotation: All attribute values must be enclosed in quotes, e.g., <img src="image.jpg" alt="Sample Image" />.
- Nesting Tags Properly: Tags must be correctly nested and properly closed. For instance, <div><p></div></p> would be incorrect because the </p> should come before </div>.
Why Use XHTML?
- Better Error Handling: Because of the strict rules, XHTML helps developers avoid common mistakes.
- Compatibility with XML: Since XHTML is based on XML, it is easier to integrate with other XML-based technologies, such as web services and data interchange formats.
- Standardization: XHTML is considered more standardized than HTML, which makes it easier for developers to maintain and debug.
XHTML is a more rigid version of HTML, making it suitable for developers who want more consistency and error-free code in their web projects. By adhering to XML standards, XHTML ensures better compatibility with modern web technologies.
Example:
<?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">
<head>
<title>Welcome to My XHTML Page</title>
</head>
<body>
<h1>XHTML Example Page</h1>
<p>This is a simple XHTML page that demonstrates the basic structure and syntax rules of XHTML.</p>
<h2>About XHTML</h2>
<p>XHTML stands for <strong>Extensible Hypertext Markup Language</strong> and follows strict XML syntax rules.</p>
<h2>Features of XHTML</h2>
<ul>
<li>All tags must be lowercase.</li>
<li>All tags must be properly nested.</li>
<li>All tags must be closed.</li>
<li>Attributes must be quoted.</li>
</ul>
<p>Here is an example image:</p>
<img src="example.jpg" alt="Example image" width="200" height="100" />
<p>Visit the <a href="https://www.example.com">Example website</a> for more information.</p>
<br />
<p>Thank you for visiting my XHTML example page!</p>
</body>
</html>
Explanation of the Code
- XML Declaration: <?xml version="1.0" encoding="UTF-8" ?> specifies the XML version and encoding used.
- DOCTYPE Declaration: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> tells the browser that the document conforms to the XHTML 1.0 Strict standard.
- Namespace Declaration: <html xmlns="http://www.w3.org/1999/xhtml"> specifies that the HTML document is XHTML and should be parsed accordingly.
- Proper Nesting and Lowercase Tags: All tags (<html>, <head>, <title>, etc.) are written in lowercase and are properly nested.
- Closed Tags: All tags are closed, including the self-closing <img /> and <br /> tags.
This example page covers all the main XHTML syntax rules. Try opening this file in a browser to see how it renders as a webpage. Remember, if there are any syntax errors, the XHTML document may not display correctly!
Comments
Post a Comment