| Introduction to HTML |
|---|
| Introduction to HTML |
|---|
| HTML Attributes |
|---|
| HTML5 Semantic Elements |
|---|
| HTML Graphics |
|---|
HTML (HyperText Markup Language) is the standard language used to create web pages. Since its inception, HTML has undergone numerous transformations to meet the evolving needs of the web. Here’s a detailed look at the history and evolution of HTML with examples:
Early Days of HTML
HTML 1.0 (1991-1993)
- Creator: Tim Berners-Lee
- Purpose: A simple language to create documents on the early web.
- Features: Basic tags for text formatting (e.g.,
<p>,<h1>,<b>,<i>)
Example
<html>
<head>
<title>Example Page</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<b>This is bold text.</b>
</body>
</html>
HTML 2.0 (1995)
- Standardization: HTML was standardized by the Internet Engineering Task Force (IETF) in RFC 1866.
- New Features: Forms, tables, and basic structure for HTML documents.
Example
<html>
<head>
<title>HTML 2.0 Example</title>
</head>
<body>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</body>
</html>
HTML 3.2 (1997)
- Standardization: W3C took over HTML specifications.
- New Features: Enhanced support for tables, applets, text flow around images.
Example
<html>
<head>
<title>HTML 3.2 Example</title>
</head>
<body>
<img decoding="async" src="image.jpg" align="left">
<p>This is a paragraph with an image aligned to the left.</p>
</body>
</html>
HTML 4.01 (1999)
- Versions: HTML 4.01 introduced strict, transitional, and frameset versions.
- New Features: Improved support for scripting, stylesheets, and accessibility.
Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML 4.01 Example</title>
</head>
<body>
<p>This is a paragraph in HTML 4.01 strict.</p>
</body>
</html>
XHTML 1.0 (2000)
- Purpose: A stricter, XML-based version of HTML.
- Features: Enforced well-formedness rules and made HTML more extensible.
Example
<!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 1.0 Example</title>
</head>
<body>
<p>This is a paragraph in XHTML 1.0 strict.</p>
</body>
</html>
HTML5 (2014)
- Purpose: Modernize HTML, support multimedia, improve error handling, and provide a better environment for web applications.
- New Features: New elements (e.g.,
<article>,<section>,<nav>), multimedia support (<audio>,<video>), canvas for drawing, local storage, and improved forms.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Example</title>
</head>
<body>
<header>
<h1>This is a header</h1>
</header>
<article>
<h2>This is an article</h2>
<p>This is a paragraph inside an article.</p>
</article>
<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
HTML5.1 and Beyond
- HTML5.1 (2016): Incremental updates to HTML5, refining features and introducing new elements like
<picture>,<dialog>, and more. - HTML5.2 (2017): Further improvements in security, privacy, and updates to elements and APIs.
- HTML Living Standard: The current, ongoing standard maintained by the WHATWG, continuously updated with new features and improvements.
Examples of new features:
HTML5.1 Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML5.1 Example</title>
</head>
<body>
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img decoding="async" src="image.jpg" alt="Example Image">
</picture>
</body>
</html>
The evolution of HTML reflects the growing complexity and capabilities of the web. From simple text formatting to rich multimedia and complex applications, HTML has adapted to meet the needs of developers and users alike. The living standard approach ensures that HTML continues to evolve in response to new challenges and opportunities.
