HTML Versions

📚 HTML Evolution

HTML has evolved through several versions since 1991, each adding new features and capabilities. Understanding these versions helps you write better, more compatible code.


<!-- HTML5 (Current Standard) -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Modern HTML5 Page</title>
</head>
<body>
    <header>Page Header</header>
    <main>Main Content</main>
    <footer>Page Footer</footer>
</body>
</html>

HTML Versions Timeline

1️⃣

HTML 1.0 (1991)

The first version with basic elements

<!-- Very basic HTML -->
<HTML>
<HEAD>
<TITLE>First HTML Page</TITLE>
</HEAD>
<BODY>
<H1>Welcome</H1>
<P>This is a paragraph.
</BODY>
</HTML>

Features: Basic tags, headings, paragraphs, links

2️⃣

HTML 2.0 (1995)

First official standard

<!-- Added forms and tables -->
<FORM ACTION="/submit" METHOD="POST">
  <INPUT TYPE="text" NAME="username">
  <INPUT TYPE="submit" VALUE="Submit">
</FORM>

<TABLE>
  <TR><TD>Cell 1</TD><TD>Cell 2</TD></TR>
</TABLE>

New: Forms, tables, image maps

4️⃣

HTML 4.01 (1999)

Stable version with CSS support

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>HTML 4.01 Page</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Styled Content</h1>
  </div>
</body>
</html>

New: CSS support, accessibility features, internationalization

5️⃣

HTML5 (2014)

Modern standard with semantic elements

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5 Page</title>
</head>
<body>
  <header><nav>Navigation</nav></header>
  <main>
    <article><h1>Article Title</h1></article>
    <aside>Sidebar</aside>
  </main>
  <footer>Footer</footer>
</body>
</html>

New: Semantic elements, multimedia, APIs, mobile support

🔹 HTML5 New Features

HTML5 introduced many powerful new features:

🔸 Semantic Elements

<!-- HTML5 semantic structure -->
<header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>
    <article>
      <h1>Article Title</h1>
      <p>Article content...</p>
    </article>
  </section>
  <aside>
    <h2>Related Links</h2>
  </aside>
</main>

<footer>
  <p>© 2024 My Website</p>
</footer>

🔸 New Input Types

<!-- HTML5 form inputs -->
<form>
  <input type="email" placeholder="Enter email" required>
  <input type="date" value="2024-01-01">
  <input type="range" min="0" max="100" value="50">
  <input type="color" value="#ff0000">
  <input type="number" min="1" max="10">
</form>

Output:

🔸 Multimedia Elements

<!-- HTML5 multimedia -->
<video controls width="400">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser doesn't support video.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser doesn't support audio.
</audio>

🔹 Version Comparison

Key Differences:

Feature	HTML 4.01	HTML5
DOCTYPE	Long and complex	Simple: <!DOCTYPE html>
Semantic Elements	Only <div> and <span>	<header>, <nav>, <main>, etc.
Multimedia	Plugins required	Native <video> and <audio>
Form Controls	Basic input types	Email, date, range, color, etc.