Posted At: Jun 26, 2024 - 474 Views
Evolution of HTML
HTML 1.0
- Introduction: The first version, introduced in 1993, was very basic, supporting only simple text and hyperlinks.
Example
<html>
<head>
<title>HTML 1.0 Example</title>
</head>
<body>
<p>Hello, World!</p>
<a href="https://example.com">Visit Example</a>
</body>
</html>
HTML 2.0
- Introduction: Released in 1995, it added support for forms and basic tables.
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
- Introduction: Introduced in 1997, it brought in more complex tables, applets, and text flow around images.
Example
<html>
<head>
<title>HTML 3.2 Example</title>
</head>
<body>
<img src="image.jpg" align="left" alt="Sample Image">
<p>This text flows around the image. HTML 3.2 allowed for more complex layouts and presentation options.</p>
</body>
</html>
HTML 4.0
- Introduction: Released in 1997, this version added support for stylesheets (CSS), scripting (JavaScript), and more semantic tags.
Example
<html>
<head>
<title>HTML 4.0 Example</title>
<style>
body { font-family: Arial, sans-serif; }
.highlight { color: red; }
</style>
<script>
function showAlert() {
alert('Hello, HTML 4.0!');
}
</script>
</head>
<body>
<p class="highlight">This is highlighted text.</p>
<button onclick="showAlert()">Click Me</button>
</body>
</html>
HTML 4.0
- Introduction: Released in 1997, this version added support for stylesheets (CSS), scripting (JavaScript), and more semantic tags.
Example
<html>
<head>
<title>HTML 4.0 Example</title>
<style>
body { font-family: Arial, sans-serif; }
.highlight { color: red; }
</style>
<script>
function showAlert() {
alert('Hello, HTML 4.0!');
}
</script>
</head>
<body>
<p class="highlight">This is highlighted text.</p>
<button onclick="showAlert()">Click Me</button>
</body>
</html>
XHTML
- Introduction: A stricter version of HTML 4.0, which combined HTML 4.0 with XML rules.
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 Example</title>
</head>
<body>
<p>This is XHTML, which is stricter in syntax compared to HTML.</p>
</body>
</html>
HTML5
- Introduction: The latest version, finalized in 2014, includes numerous new features such as:
- Multimedia support: Native elements for audio (
<audio>) and video (<video>). - Semantic elements: New tags like
<article>,<section>,<nav>, and<footer>for better content structure. - Canvas and SVG: Graphics rendering capabilities for dynamic, scriptable graphics.
- APIs: Enhanced support for various APIs like Geolocation, Web Storage, Web Workers, and more.
- Responsive Design: Improved support for creating flexible and adaptive layouts through the
<meta>viewport tag and CSS media queries.
- Multimedia support: Native elements for audio (
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { font-family: Arial, sans-serif; }
.container { max-width: 800px; margin: auto; }
video { width: 100%; }
</style>
</head>
<body>
<div class="container">
<header>
<h1>Welcome to HTML5</h1>
</header>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
</ul>
</nav>
<section id="section1">
<article>
<h2>Introduction to HTML5</h2>
<p>HTML5 introduces many new features for modern web development.</p>
</article>
</section>
<section id="section2">
<h2>Multimedia Support</h2>
<video controls>
<source src="sample.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</section>
<footer>
<p>© 2024 HTML5 Example</p>
</footer>
</div>
</body>
</html>
HTML5 aims to support modern web design practices, including mobile-friendly, responsive, and interactive web applications. It is backward compatible, meaning older HTML code should still function in modern browsers while allowing developers to utilize the latest features and functionalities.
For Enquiry, Click Here for WhatsApp Chat 
Call to Action
How do you think AI will shape the future of technology? Share your thoughts in the comments below. For more insights into the latest tech trends, visit our website PlambIndia and stay updated with our blog.
Follow Us
Stay updated with our latest projects and insights by following us on social media:
- LinkedIn: PlambIndia Software Solutions
We provide custom software solutions for every industry. Please contact us at Plambindia Software Solution.
Become a Client
Explore our diverse range of services and find the perfect solution tailored to your needs. Select a category below to learn more about how we can help transform your business.
Kuldeep Trivedi
plot no 1 / 2 suraj mall compound mal compound
+918766378125
contact@plambindia.com