The main differences between HTML5 and XHTML, HTML4

Author：Chuan Chen 阅读数：29192人阅读分类： HTML

HTML5, as the latest HTML standard, has significant differences in syntax, functionality, and compatibility compared to XHTML and HTML4. Below is a detailed comparison across multiple dimensions.

Syntax Specification Differences

HTML5 adopts more lenient syntax rules, while XHTML requires strict XML formatting. For example:

<!-- HTML4/XHTML must declare DOCTYPE -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>XHTML Example</title>
</head>

<!-- HTML5 simplified DOCTYPE -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5 Example</title>

XHTML requires all tags to be closed and attributes to be quoted:

<img src="image.jpg" alt="Example" />
<br />
<input type="text" disabled="disabled" />

HTML5 allows omitting certain closing tags and quotes:

<img src=image.jpg alt=Example>
<br>
<input type="text" disabled>

New Semantic Tags

HTML5 introduces numerous semantic elements, which are absent in HTML4/XHTML:

<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
    </ul>
  </nav>
</header>

<article>
  <section>
    <h1>Main Title</h1>
    <p>Content paragraph...</p>
  </section>
</article>

<aside>Sidebar content</aside>

<footer>Footer information</footer>

New multimedia elements for embedding audio and video directly:

<video controls width="640">
  <source src="movie.mp4" type="video/mp4">
</video>

<audio controls>
  <source src="audio.ogg" type="audio/ogg">
</audio>

Enhanced Form Features

HTML5 forms introduce new input types and attributes:

<input type="email" required placeholder="Enter email">
<input type="date" min="2020-01-01">
<input type="range" min="0" max="100" step="5">
<input type="color" value="#ff0000">
<input type="search" autocomplete="on">

New form validation functionality:

<form>
  <input type="text" pattern="[A-Za-z]{3}" title="Three letters">
  <input type="submit">
</form>

API Extensions

HTML5 provides rich JavaScript APIs:

Canvas drawing example:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);

Geolocation API:

navigator.geolocation.getCurrentPosition(position => {
  console.log(position.coords.latitude, position.coords.longitude);
});

Local storage solutions:

localStorage.setItem('username', 'John');
sessionStorage.setItem('token', 'abc123');

Compatibility Handling

HTML5 achieves progressive enhancement through feature detection:

if ('geolocation' in navigator) {
  // Geolocation supported
} else {
  // Fallback solution
}

if (typeof(Storage) !== 'undefined') {
  // Web Storage supported
}

Document Type Declarations

Comparison of DOCTYPE declarations across the three standards:

<!-- HTML4 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- HTML5 -->
<!DOCTYPE html>

Meta Character Encoding Declarations

HTML5 simplifies character encoding settings:

<!-- HTML4/XHTML -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- HTML5 -->
<meta charset="UTF-8">

Deprecated Elements and Attributes

HTML5 phases out some presentational elements:

<!-- No longer used -->
<font face="Arial" size="4"></font>
<center>Content</center>
<strike>Strikethrough</strike>

<!-- Alternatives -->
<span style="font-family: Arial; font-size: 1.2em"></span>
<div style="text-align: center"></div>
<del>Strikethrough</del>

Script and Style Handling

HTML5 omits the type attribute:

<!-- HTML4/XHTML must specify type -->
<script type="text/javascript" src="app.js"></script>
<style type="text/css">body { margin:0; }</style>

<!-- HTML5 defaults -->
<script src="app.js"></script>
<style>body { margin:0; }</style>

Error Handling Mechanism

HTML5 defines standard error recovery rules, while XHTML stops parsing upon encountering errors. For example, the following code can still render partially in HTML5:

<div>
  <p>Correct paragraph
  <img src="image.png" alt="Image
</div>

Mobile Optimization

HTML5's new viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Touch event support:

element.addEventListener('touchstart', handleTouch);

Web Component Support

HTML5 natively supports custom elements:

class MyElement extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<h2>Custom element content</h2>`;
  }
}
customElements.define('my-element', MyElement);

Usage:

<my-element></my-element>

Performance Optimization Features

New preload and prefetch:

<link rel="preload" href="critical.css" as="style">
<link rel="prefetch" href="next-page.html">

Asynchronous script loading:

<script async src="analytics.js"></script>
<script defer src="app.js"></script>

Accessibility Improvements

HTML5's new ARIA attribute support:

<nav aria-label="Main navigation">
  <ul role="menubar">
    <li role="menuitem">Home</li>
  </ul>
</nav>

Responsive Images

HTML5's new picture and srcset:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Responsive image">
</picture>

Web Workers

HTML5's multithreading technology:

// main.js
const worker = new Worker('worker.js');
worker.postMessage('Start calculation');

// worker.js
self.onmessage = function(e) {
  const result = heavyCalculation();
  self.postMessage(result);
};

Real-Time Communication

WebSocket API example:

const socket = new WebSocket('ws://example.com');
socket.onopen = () => {
  socket.send('Hello Server!');
};
socket.onmessage = (event) => {
  console.log(event.data);
};

做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：HTML5的定义与发展历程

下一篇：HTML5的设计目标和核心理念