History and Evolution of HTML

HTML was first created by Tim Berners-Lee in 1991. HTML has continued to evolve until it became HTML5, which we use today.

HTML Timeline

HTML 1.0 (1991)

• First version of HTML
• Basic tags: <html>, <head>, <body>, <p>, <a>, <img>

HTML 2.0 (1995)

• First standard published by IETF
• Added form functionality

HTML 3.2 (1997)

• Added tables, applets, and text flow

HTML 4.01 (1999)

• Separation of presentation and content
• CSS recommended for styling

XHTML (2000)

• XML-based HTML
• Stricter syntax

HTML5 (2014)

• Latest standard
• New APIs: Canvas, Video, Audio, Geolocation
• Semantic elements

Version Comparison

Doctype Examples

HTML 4.01

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

XHTML

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

HTML5

<!DOCTYPE html>

Case Study: Evolution of a Campus Website

HTML 4.01 Era (2000s)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Campus Website</title>
</head>
<body>
    <table width="800" border="0" align="center">
        <tr>
            <td>
                <h1>Technology University</h1>
            </td>
        </tr>
    </table>
</body>
</html>

HTML5 Era (Today)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Campus Website</title>
</head>
<body>
    <header>
        <h1>Technology University</h1>
        <nav>
            <ul>
                <li><a href="beranda.html">Home</a></li>
                <li><a href="academic.html">Academic</a></li>
                <li><a href="kontak.html">Kontak</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

Everyday Case Study

Case: A developer needs to migrate a campus website from HTML4 to HTML5.

<!-- Before (HTML 4.01) -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
    <div id="header">
        <h1>Title</h1>
    </div>
    <div id="content">
        <p>Content</p>
    </div>
</body>
</html>

<!-- After (HTML5) -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <header>
        <h1>Title</h1>
    </header>
    <main>
        <p>Content</p>
    </main>
</body>
</html>

Modern Best Practices

1. Use HTML5: Always use the HTML5 doctype
2. Semantic elements: Use <header>, <main>, <footer>
3. Character encoding: Always specify UTF-8
4. Viewport meta: For responsive design
5. Validation: Use the W3C validator

Summary

HTML has continued to evolve from version to version. HTML5 provides more complete and modern features. For a campus website, use HTML5 with semantic elements.