HTML History

📚 The Story of HTML

HTML was created in 1990 by Tim Berners-Lee at CERN. It started as a simple way to share documents and has evolved into the foundation of the modern web.


<!-- HTML in 1991 was very simple -->
<TITLE>The World Wide Web project</TITLE>
<H1>World Wide Web</H1>
<P>The project started in 1989...</P>

HTML Timeline

🌱

1990 - Birth

Tim Berners-Lee creates HTML

<TITLE>First webpage</TITLE>
<H1>Hello World</H1>

📝

1995 - HTML 2.0

First official standard

<FORM>
  <INPUT TYPE="text">
  <INPUT TYPE="submit">
</FORM>

🎨

1997 - HTML 4.0

Added CSS support

<div class="header">
  <h1 style="color: blue;">Title</h1>
</div>

🚀

2014 - HTML5

Modern web standard

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

🔹 HTML Versions Comparison

See how HTML evolved over time:

🔸 HTML 1.0 (1991)

<!-- Very basic structure -->
<TITLE>My Page</TITLE>
<H1>Welcome</H1>
<P>This is a paragraph.
<P>Another paragraph.
<A HREF="page2.html">Link to page 2</A>

🔸 HTML 4.01 (1999)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <title>My Page</title>
    <style>
        body { font-family: Arial; }
    </style>
</head>
<body>
    <h1>Welcome</h1>
    <p>This is a paragraph.</p>
</body>
</html>

🔸 HTML5 (2014)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Modern Page</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h1>Welcome to HTML5</h1>
            <p>Modern semantic markup.</p>
        </article>
    </main>
    <footer>
        <p>© 2024 My Website</p>
    </footer>
</body>
</html>

🔹 Key Milestones

Important HTML Developments:

1990: First HTML tags created
1993: First web browser with images
1995: Tables and forms introduced
1996: CSS separates style from content
1997: Frames and internationalization
2000: XHTML - stricter syntax rules
2014: HTML5 - multimedia and semantic elements
2021: HTML Living Standard - continuous updates

🔹 HTML5 New Features

HTML5 brought many exciting new capabilities:

<!-- Semantic Elements -->
<header>Page header</header>
<nav>Navigation menu</nav>
<main>Main content</main>
<article>Article content</article>
<section>Section content</section>
<aside>Sidebar content</aside>
<footer>Page footer</footer>

<!-- Multimedia -->
<video controls width="300">
    <source src="video.mp4" type="video/mp4">
    Your browser doesn't support video.
</video>

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

<!-- Graphics -->
<canvas id="myCanvas" width="200" height="100"></canvas>
<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="red"></circle>
</svg>

<!-- Form Enhancements -->
<input type="email" placeholder="Enter email">
<input type="date">
<input type="range" min="0" max="100">