HTML VS XHTML

-

HTML and XHTML are both markup languages used to create web pages, but they differ in how strictly they enforce syntax and how they're processed.

FeatureHTMLXHTML
Full nameHyperText Markup LanguageExtensible HyperText Markup Language
BasisStandard HTML specificationHTML reformulated as an XML application
Syntax rulesMore forgivingVery strict XML syntax
Case sensitivityTag and attribute names are not case-sensitiveTag and attribute names must be lowercase
Closing tagsSome closing tags can be omittedEvery tag must be closed
NestingBrowsers often correct improper nestingElements must be properly nested
Attribute valuesQuotes are often optionalAll attribute values must be quoted
Empty elements<br> or <img> are allowedMust use self-closing syntax like <br /> and <img /> (in classic XHTML)
Error handlingBrowsers attempt to recover from errorsXML parsers may stop processing if the document contains syntax errors

Example

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
</head>
<body>
  <h1>Hello</h1>
  <br>
  <img src="photo.jpg">
</body>
</html>

XHTML

<!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>Example</title>
</head>
<body>
  <h1>Hello</h1>
  <br />
  <img src="photo.jpg" alt="Photo" />
</body>
</html>

Key Differences

  • HTML is more flexible: Browsers can usually display pages even if the markup contains errors.
  • XHTML is stricter: Documents must follow XML rules exactly.
  • XHTML requires:
    • All tags to be lowercase.
    • Every element to be closed.
    • Proper nesting of elements.
    • Quoted attribute values.
    • A single root element.
  • HTML5 is the modern standard: Most websites today use HTML5 rather than XHTML because it is simpler and well supported by browsers.

Which should you use?

For modern web development, HTML5 is generally the recommended choice. XHTML is mainly encountered in legacy systems or specialized XML-based workflows where strict XML compliance is required.

Comments

Post a Comment

Popular posts from this blog

HTML | HTML INTRODUCTION

-
HTML is the standard markup language for creating Web pages. What is HTML? HTML stands for Hyper Text Markup Language HTML is the standard markup language for creating Web pages HTML describes the structure of a Web page HTML consists of a series of elements HTML elements tell the browser how to display the content HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc. A Simple HTML Document EXAMPLE:- <!DOCTYPE html> < html > < head > < title > Page Title < /title > < /head > < body > < h1 > My First Heading < /h1 > < p > My first paragraph. < /p > < /body > < /html > Example Explained The  <!DOCTYPE html>  declaration defines that this document is an HTML5 document The  <html>  element is the root element of an HTML page The  <head>  element contains meta information about the HTML page The  <titl...
Read more

HTML ELEMENTS

-
An HTML element is defined by a start tag, some content, and an end tag. HTML Elements The HTML  element  is everything from the start tag to the end tag: < tagname > Content goes here... < /tagname > Examples of some HTML elements: < h1 > My First Heading < /h1 > < p > My first paragraph. < /p > Start tag Element content End tag <h1> My First Heading </h1> <p> My first paragraph. </p> <br> Paragraph Break  </br> Note:  Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag! Nested HTML Elements HTML elements can be nested (this means that elements can contain other elements). All HTML documents consist of nested HTML elements. The following example contains four HTML elements ( <html> ,  <body> ,  <h1>  and  <p> ): Example <!DOCTYPE html> < html > ...
Read more

HTML RESPONSIVE WEB DESIGN

-
If you're looking for a basic responsive HTML page , here's a simple example that adapts to mobile, tablet, and desktop screens using CSS. <!DOCTYPE html> <html lang = "en" > <head> <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <title> Responsive Website </title> <style> { margin: 0 ; padding: 0 ; box-sizing: border-box ; font-family: Arial , sans-serif ; } body { background:#f4f4f4; color:#333; } header { background:#0077cc; color:#fff; text-align: center ; padding: 20 px ; } nav { background:#005fa3; display: flex ; justify-content: center ; flex-wrap: wrap ; } nav a { colo...
Read more