Write HTML, the HTML Way (Not the XHTML Way)

Though XHTML is obsolete, its influence on HTML coding persists. Many developers unknowingly adhere to XHTML practices when writing HTML. This article clarifies the distinctions between the two approaches.

HTML, XHTML, and the Shift Back

The evolution is straightforward: HTML dominated the 1990s, XHTML the 2000s, and we've returned to HTML in the 2010s. This is reflected in the release dates of the specifications: HTML 1 (1992), HTML 2.0 (1995), HTML 3.2 (1997), HTML 4.01 (1999); XHTML 1.0 (2000), XHTML 1.1 (2001); HTML5 (2007).

XHTML's rise coincided with the widespread belief in XML's dominance. This led to the adoption of XHTML-style HTML coding.

The Lingering Shadow of XHTML

XHTML 1.0's "Differences with HTML 4" section details its key distinctions:

• Well-formed Documents: XHTML demands well-formed documents.
• Lowercase Element and Attribute Names: Element and attribute names must be lowercase.
• Required End Tags: Non-empty elements require end tags.
• Mandatory Quotation of Attribute Values: Attribute values must always be quoted.
• No Attribute Minimization: Attribute minimization isn't supported.
• Closed Empty Elements: Empty elements need closing tags.
• XML-compliant Whitespace Handling: Whitespace in attribute values follows XML rules.
• CDATA Sections for Script and Style: Script and style elements require CDATA sections.
• No SGML Exclusions: SGML exclusions aren't permitted.
• id Attribute Preference: Elements with id and name attributes should primarily use id.
• Case-sensitive Attributes: Attributes with predefined value sets are case-sensitive.
• Lowercase Hexadecimal Entity References: Hexadecimal entity references must be lowercase.

Many developers, unknowingly, still follow most of these rules, even though XHTML is outdated. Some have even become perceived "best practices" for HTML.

Embracing the True Spirit of HTML

To contrast, let's negate the XHTML-imposed rules (excluding SGML-related aspects, as HTML no longer relies on SGML):

• Document Well-formedness: Documents may not be well-formed.
• Case Sensitivity: Element and attribute names can be upper or lowercase.
• Optional End Tags: End tags for non-empty elements are optional.
• Optional Quotation: Attribute values may be unquoted.
• Attribute Minimization: Attribute minimization is allowed.
• Unclosed Empty Elements: Empty elements don't require closing tags.
• Whitespace Handling: Whitespace in attribute values isn't strictly XML-compliant.
• CDATA Sections: CDATA sections for script and style are optional.
• id/name Attributes: The use of id and name attributes is not restricted.
• Case Sensitivity of Attributes: Attributes with predefined value sets are not case-sensitive.
• Hexadecimal Entity References: Case of hexadecimal entity references is not restricted.

Simplifying, focusing on the most relevant aspects:

• Optional Tags: Start and end tags are optional.
• Unclosed Empty Elements: Empty elements don't need closing tags.
• Case of Names: Element and attribute names can be upper or lowercase.
• Optional Quotes: Attribute values may be unquoted.
• Attribute Minimization: Attribute minimization is supported.

While HTML's resilience allows for invalid code, best practices emphasize valid, well-formed HTML. Therefore, the "documents may not be well-formed" point is disregarded. The essence of the HTML way becomes:

• Optional Tags: Start and end tags are not always required.
• Unclosed Empty Elements: Empty elements don't need to be closed.
• Case-Insensitive Names: Element and attribute names can be lowercase or uppercase.
• Optional Quotes: Attribute values may not always be quoted.
• Attribute Minimization: Attribute minimization is supported.

Practical Examples

XHTML vs. HTML:

XHTML:

<p>Example paragraph.</p>

• Item 1
• Item 2

Link

HTML:

<p>Example paragraph.
</p>

• Item 1
• Item 2

Link

HTML allows for uppercase tags and attributes, unquoted attribute values (when safe), and minimized attributes.

The Modern HTML Approach

A modern HTML approach should prioritize:

1. Valid and Semantic HTML: Validate your HTML and ensure semantic correctness.
2. Consistent Coding Style: Choose a consistent style for case (upper or lowercase) and attribute quoting.
3. Minimalism: Use HTML minimally, relying on CSS and JavaScript for presentation and behavior. Leverage optional tags, empty element closure, default attribute values, and attribute minimization where appropriate.

Tools like html-minifier can help optimize HTML. Rediscovering the true nature of HTML, independent of XML's influence, is key to modern web development.

The above is the detailed content of Write HTML, the HTML Way (Not the XHTML Way). For more information, please follow other related articles on the PHP Chinese website!