Your.Code.Web

HTML Course 1.5 Evolution and versions of HTML (HTML4, XHTML, HTML5)

1.5 Evolution and versions of HTML

Introduction

HTML (HyperText Markup Language) has undergone significant changes since its inception. Each major version introduced new features, stricter rules, and broader device support. The three pivotal versions are HTML4, XHTML 1.x, and HTML5. Below is an in-depth look at each.

HTML4

Released in 1997, HTML4 standardized document structure and presentation separation. It introduced three DTDs (Document Type Definitions): Strict, Transitional, and Frameset.

  • Strict: No presentational elements (e.g., <font>, <center>).
  • Transitional: Allowed some deprecated tags for backward compatibility.
  • Frameset: Used to divide the browser window into multiple frames.

Key features:

  • Style sheets via <style> and external CSS.
  • Enhanced form controls.
  • Internationalization support.

Example of an HTML4 Transitional document:




  
  HTML4 Transitional Example
  


  
Welcome to HTML4 Transitional

  
This text is blue using a deprecated tag.

XHTML 1.x

XHTML (eXtensible HyperText Markup Language) reformulated HTML4 as an XML application. First published in 2000, it enforces strict XML syntax rules:

  1. All elements must be properly closed.
  2. Tags and attributes are case-sensitive (lowercase recommended).
  3. Attribute values must be quoted.
  4. Elements must be properly nested.

XHTML 1.0 had the same three DTD flavors: Strict, Transitional, Frameset. XHTML 1.1 simplified the DTD by removing deprecated features (no Transitional or Frameset).




  XHTML 1.0 Strict Example


  
Valid XHTML Document

  
  
This is a paragraph.

  Example

HTML5

Published as a W3C Recommendation in 2014, HTML5 overhauled the language to meet modern web demands. It dropped the need for DTDs and XML syntax, supporting both HTML and an optional XML serialization (XHTML5).

Main enhancements:

  • New semantic elements: <header>, <nav>, <section>, <article>, <footer>.
  • Multimedia elements: <video>, <audio>, <canvas>.
  • Form controls: <input type=’date’>, <datalist>, <output>.
  • APIs: Geolocation, Web Storage, Web Workers, WebSocket.
  • Flexible parsing rules, backward-compatible.



  
  HTML5 Example


  

    
HTML5 Features Demo

  

  
  

    
Embedded Video

    
  

  

    
Canvas Drawing

    
      Your browser does not support canvas.
    
    
  

  

    
© 2024 HTML Evolution Course

Version Comparison

Feature HTML4 XHTML 1.x HTML5
Syntax SGML-based, forgiving XML-based, strict HTML syntax (forgiving) + optional XML
Doctype Complex DTD declarations Complex DTD declarations Simple: <!DOCTYPE html>
Semantic Tags Limited (<div>, <span>) Same as HTML4 Rich set (header, nav, article, aside, etc.)
Multimedia Embed via plugins (<object>)  Same as HTML4 Native <video> and <audio>
APIs None None Canvas, Geolocation, Web Storage, WebSockets, etc.

Posted

in

by

5my9z

Tags:

Comments

Leave a Reply