HTML4 vs. HTML5⚔️

What is HTML? 🖥️

HTML (HyperText Markup Language) is the standard language used to create web pages.

HTML4 was introduced in 1997, and HTML5 was introduced in 2014 as its successor, with many new features and improvements.

HTML5 Doctype and Character Encoding📝

HTML4 Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

HTML5 Example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

Media Elements in HTML5 🎥🎵

Adding Video in HTML5:🎥

<video controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Adding Audio in HTML5:🎵

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
  Your browser does not support the audio tag.
</audio>

New Form Elements in HTML5📝

Example of New Input Types:

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
  <label for="rating">Rating (1-10):</label>
  <input type="range" id="rating" name="rating" min="1" max="10">
  <input type="submit" value="Submit">
</form>

Semantic Elements in HTML5 🏛️

HTML4 Structure (Using <div>):

<div id="header">Header Content</div>
<div id="nav">Navigation Links</div>
<div id="content">Main Content</div>
<div id="footer">Footer Content</div>

HTML5 Structure (Using Semantic Elements):

<header>Header Content</header>
<nav>Navigation Links</nav>
<article>Main Content</article>
<footer>Footer Content</footer>

HTML