Home > Web Front-end > CSS Tutorial > HTML vs XHTML: Comparing Two Parsing Modes

HTML vs XHTML: Comparing Two Parsing Modes

Jennifer Aniston
Release: 2025-02-27 08:49:15
Original
933 people have browsed it
<p>Detailed explanation of HTML5 parsing pattern: Differences between HTML and XML

<p>HTML5 provides two parsing modes: HTML and XML. Which mode to choose depends on whether the document uses the Content-type: text/html head or Content-type: application/xml xhtml head to provide services, each mode has its own set of rules.

<p>HTML parsing mode allows for greater flexibility, such as: tags and attributes are case-insensitive, the start and end tags of certain elements are optional, and the attributes are not required for quotes. However, it requires HTML5 DOCTYPE to be included.

<p>XHTML5 parsing mode (also known as HTML5's XML syntax) is more stringent, requiring all elements to have start and end tags, tags and attributes are case sensitive, attribute values ​​must be enclosed in quotes, and empty attributes are not allowed. This schema also needs to include XML namespace attributes and Content-type: application/xml xhtml response headers.

<p>HTML Syntax

<p>Let's look at another HTML5 document:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hi</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <p>
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174061735712724.jpg"  class="lazy" alt="HTML vs XHTML: Comparing Two Parsing Modes " />
    Isn't this a lovely flower?
  </p>
  <p>
    Yes, that is a lovely flower. What kind is it?
  </p>
</body>
</html>
Copy after login
Copy after login
<p>The first line is the DOCTYPE declaration. Like all HTML5 tags, it is case-insensitive.

<p>The next is the <head> element. <head> elements usually contain information about the document, such as a title or character set. In this example, our <head> element contains a <meta> element that defines the character set for this document. Including character sets is optional, but you should always set one, and UTF-8 is recommended.

<p>Our <head> element also contains the document title (<title>Hi</title>). In most browsers, text between the <title> tags appears at the top of the browser window or tab.

<p> Comments in HTML are text fragments that will not be rendered in the browser. They are only visible in source code and are often used to leave comments on documents to yourself or colleagues. Some software programs that generate HTML code may also contain comments. Comments can appear almost anywhere in an HTML document. Each comment must start with <!-- and end with -->.

<p>Document <head> may also contain <link> elements pointing to external resources, as shown below. Resources may include stylesheets, favicon images, or RSS feeds. We use the rel attribute to describe the relationship between the document and the document we linked to. In this example, we link to a cascading stylesheet or CSS file. CSS is a stylesheet language we use to describe the appearance of a document rather than its structure.

<p>We can also include CSS in the file using the <style> element (delimited here by <style> and </style>). However, using the <link> element allows us to share the same stylesheet file across multiple pages.

<p>By the way, <meta> and <link> are examples of empty HTML elements; we can also use /> to self-close them. For example, <meta charset="utf-8"> will become <meta charset="utf-8"/>, but this is not necessary.

<p>"XHTML5": XML syntax for HTML5

<p>HTML5 can also be written in stricter, XML-like syntax. You may remember that XHTML 1.0 in Chapter 1 was "HTML 4 as an overwrite of XML 1.0 applications." This is not entirely true for what is sometimes called "XHTML5". "XHTML5" is best understood as writing and parsing using the syntax rules of XML and responding to HTML5 provided in the header using Content-type: application/xml xhtml.

<p>The following rules apply to "XHTML5":

    <li>All elements must have a starting tag. <li> Non-empty elements with start tags must have end tags (e.g. <p> and <li>). <li>Any element can be used /> self-closing. <li> Labels and attributes are case sensitive and are usually lower case. <li>Attribute values ​​must be enclosed in quotes. <li>Unit attributes are prohibited (checked must be changed to checked="checked" or checked="true"). <li>Special characters must be escaped using character entity.
<p>Our <html> start tag also requires a xmlns (XML namespace) attribute. If we rewrite the above document to use XML syntax, it will look like this:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hi</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <p>
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174061735712724.jpg"  class="lazy" alt="HTML vs XHTML: Comparing Two Parsing Modes " />
    Isn't this a lovely flower?
  </p>
  <p>
    Yes, that is a lovely flower. What kind is it?
  </p>
</body>
</html>
Copy after login
Copy after login
<p>Here, we added an XML namespace using the xmlns property to inform the browser that we are using a stricter syntax. We also self-closed the tags for our empty elements <meta> and <img alt="HTML vs XHTML: Comparing Two Parsing Modes" >. According to XML and XHTML rules, all elements must be closed with the end tag, or self-closed with spaces, slashes and right-pointed angle brackets (/>).

<p>In this example, we also self-closed our <code>application/xml xhtml. If you provide a page as

, you can also use self-closing syntax. <p> Content-type: application/xml xhtmlDon't forget: In order for the browser to parse this document according to XML/XHTML rules, our document must send a document with a

response header from the server. In fact, even if DOCTYPE is missing, including this header will trigger XHTML5 parsing in a standard-compliant browser. <p> text/htmlYou may have realized that XML parsing rules are stricter. It is much easier to use the

MIME type and its looser HTML syntax. <p>

HTML and XHTML FAQ (FAQ)<p>

(The FAQ part is omitted here because the article is too long and does not match the pseudo-original goal. The FAQ part can be added or modified as needed.) <script> 标签。我们也可以使用普通的 <code><script> 标签,就像我们对其他元素所做的那样。<code><script> 元素有点奇怪。您可以通过将脚本放在 <code><script> 起始和结束标签之间来将脚本嵌入到您的文档中。当您这样做时,您<em>必须包含结束标签。 &lt;p&gt;但是,您也可以使用 <code><script> 标签和 <code>src 属性链接到外部脚本文件。如果您这样做,并且将页面作为 <code>text/html 提供服务,则必须使用结束标签 <code></script>

The above is the detailed content of HTML vs XHTML: Comparing Two Parsing Modes. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template