Introduction

HTML (HyperText Markup Language) is the backbone of the web. Just like languages evolve with time, HTML too has gone through multiple stages of development. Each version aimed to fix problems of the past, support new features, and adapt to the growing needs of the internet.

In this tutorial, we’ll learn about the evolution of HTML from HTML4 to XHTML to HTML5, with clear explanations and examples.

HTML4 (1997) – The Foundation of Modern Web

HTML4 was a major leap from earlier versions. It introduced more tags, better forms, and support for multimedia through <object>.

Key Features of HTML4:

Support for CSS (separating style from content).
Better handling of forms and tables.
Multimedia embedding with <object>.
Marked the start of accessibility features.

Example (HTML4 snippet):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>HTML4 Example</title>
</head>
<body>
  <h1>Welcome to HTML4</h1>
  <p>This page is styled with CSS.</p>
</body>
</html>

XHTML (2000) – HTML Meets XML

XHTML was created to make HTML stricter and cleaner by following XML rules.

Key Features of XHTML:

Well-formed syntax (all tags must close).
Lowercase tag names (<p>, not <P>).
Attributes must have values (checked="checked").
Greater consistency across browsers.

Example (XHTML snippet):

<!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 page follows strict XML rules.</p>
</body>
</html>

HTML5 (2014) – The Modern Standard

HTML5 is the version we use today. It brought powerful features for multimedia, interactivity, and mobile-friendly design.

Key Features of HTML5:

New semantic tags: <header>, <footer>, <article>, <section>.
Native audio & video support (<audio>, <video>).
<canvas> for drawing graphics & animations.
Mobile responsive and cross-device compatibility.
Local storage, geolocation, and offline apps.

Example (HTML5 snippet):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Example</title>
</head>
<body>
  <header>
    <h1>Welcome to HTML5</h1>
  </header>
  
  <section>
    <p>This page uses semantic HTML5 tags.</p>
    <video controls width="300">
      <source src="sample.mp4" type="video/mp4">
    </video>
  </section>
</body>
</html>

Comparison Table

Feature	HTML4	XHTML	HTML5
Doctype	Long	Long	Simple (`<!DOCTYPE html>`)
Syntax Rules	Flexible	Strict (XML-based)	Flexible
Multimedia	Limited	Limited	Native `<audio>`, `<video>`, `<canvas>`
Semantics	Few tags	Same as HTML4	Rich semantic tags
Mobile Support	No	No	Yes