Differences Between HTML4 And HTML5

By: Rajesh P.S.

HTML (Hypertext Markup Language) is the standard language used to create and structure content on the web. HTML4 and HTML5 are two different versions of HTML, each with its own set of features, improvements, and capabilities. Let's explore the main differences between HTML4 and HTML5 in detail, along with examples:

Doctype Declaration

HTML4: In HTML4, the doctype declaration is specified as follows:

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

HTML5: In HTML5, the doctype declaration is simpler and more concise:

<!DOCTYPE html>

The HTML5 doctype declaration is more straightforward and does not require specifying the version or DTD (Document Type Definition).

Semantic Elements

Continue Reading...

HTML4: HTML4 lacks many semantic elements, which are elements that carry meaning about the structure and purpose of the content.
HTML5: HTML5 introduces several new semantic elements that provide better structure and meaning to the content, making it more accessible and SEO-friendly. Some examples of HTML5 semantic elements include <header>, <nav>, <main>, <article>, <section>, <footer>, and <aside>.

<!DOCTYPE html> <html> <head> <title>HTML5 Semantic Elements Example</title> </head> <body> <header> <h1>Welcome to my website</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <main> <section> <h2>About Me</h2> <p>I am a web developer passionate about HTML5.</p> </section> <section> <h2>Contact Information</h2> <p>Email: example@example.com</p> <p>Phone: 123-456-7890</p> </section> </main> <footer> <p>© My Website. All rights reserved.</p> </footer> </body> </html>

Audio and Video Support

HTML4: In HTML4, multimedia elements like audio and video required third-party plugins like Flash or QuickTime to play.
HTML5: HTML5 introduces native support for audio and video elements, making it easier to embed multimedia content directly into web pages without relying on external plugins. This improves compatibility and reduces reliance on third-party software.

<!DOCTYPE html> <html> <head> <title>HTML5 Audio and Video Example</title> </head> <body> <h1>HTML5 Audio and Video Example</h1> <audio controls> <source src="audio/music.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <video controls width="640" height="360"> <source src="video/video.mp4" type="video/mp4"> Your browser does not support the video element. </video> </body> </html>

Form Validation

HTML4: HTML4 relies on JavaScript or server-side validation for form validation.
HTML5: HTML5 introduces built-in form validation, allowing developers to specify input validation rules and error messages without the need for custom scripts. The required, pattern, type, and min/max attributes are some examples of form validation features in HTML5.

<!DOCTYPE html> <html> <head> <title>HTML5 Form Validation Example</title> </head> <body> <h1>HTML5 Form Validation Example</h1> <form> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <br> <label for="password">Password:</label> <input type="password" id="password" name="password" pattern=".{8,}" title="Password must be at least 8 characters long" required> <br> <input type="submit" value="Submit"> </form> </body> </html>

Canvas and SVG Support

HTML4: HTML4 lacks support for graphics and animations without relying on external plugins or technologies.
HTML5: HTML5 introduces the <canvas> element for 2D graphics and animations, and the <svg> element for scalable vector graphics, eliminating the need for third-party plugins and providing more possibilities for creating interactive visual elements directly within web pages.

<!DOCTYPE html> <html> <head> <title>HTML5 Canvas and SVG Example</title> </head> <body> <h1>HTML5 Canvas and SVG Example</h1> <canvas id="myCanvas" width="200" height="100" style="border:1px solid black;"></canvas> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg> <script> // Canvas var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "blue"; ctx.fillRect(10, 10, 150, 80); // SVG var svg = document.getElementsByTagName("svg")[0]; svg.addEventListener("click", function () { alert("SVG Clicked!"); }); </script> </body> </html>

Conclusion

These are some of the key differences between HTML4 and HTML5. HTML5 provides enhanced capabilities, improved semantics, and better support for multimedia and interactive elements, making it the preferred choice for modern web development.

Next > How to choose the best antivirus software

Related Topics

More Related Topics.....