Skip to content

What Is HTML5?

HTML5 (Hypertext Markup Language version 5) is the fifth major version of the HTML standard used to create and structure content on the web. Today HTML is developed by the WHATWG as a "living standard" (the HTML Living Standard) that is updated continuously, without version numbers. It is a core web technology supported by every major browser, and it brought many new features compared with its predecessors, HTML 4.01 and XHTML 1.0.

  1. Semantic elements: HTML5 introduced semantic elements such as <article>, <section>, <nav>, <header>, <footer>, <aside>, <figure> and <figcaption>. They describe the structure and meaning of the content.
  2. Audio and video: HTML5 supports embedding audio and video natively, without third-party plugins. The <audio> and <video> elements embed media files directly in the page.
    HTMLCode fragment
    <audio controls>
      <source src="sound.mp3" type="audio/mp3" />
      Your browser does not support the audio element.
    </audio>
    <video width="400" height="300" controls>
      <source src="video.mp4" type="video/mp4" />
      Your browser does not support the video element.
    </video>
  3. Canvas: The <canvas> element provides a drawing surface for graphics and animations with JavaScript. It is often used for games, charts and interactive content.
    HTML
    <canvas id="myCanvas" width="320" height="160"></canvas>
    
    <script>
      const canvas = document.getElementById('myCanvas');
      const ctx = canvas.getContext('2d');
    
      // Rectangle
      ctx.fillStyle = '#28e98c';
      ctx.fillRect(20, 20, 120, 80);
    
      // Circle
      ctx.beginPath();
      ctx.arc(230, 60, 40, 0, Math.PI * 2);
      ctx.fillStyle = '#4fc1ff';
      ctx.fill();
    
      // Text
      ctx.fillStyle = '#ffffff';
      ctx.font = '16px sans-serif';
      ctx.fillText('Hello Canvas', 20, 135);
    </script>

    Here getContext('2d') returns the drawing context; fillRect then draws a rectangle, arc a circle and fillText the text.

  4. Local and session storage: HTML5 includes the localStorage and sessionStorage APIs for storing data in the user's browser — a way to keep data between visits.
    JavaScript
    // Save a value in local storage
    localStorage.setItem('key', 'value');
    
    // Read it back
    var value = localStorage.getItem('key');
    console.log(value); // "value"
  5. Geolocation: With the Geolocation API a website can ask for the user's location — useful for location-based services.
    JavaScriptCode fragment
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      console.log('Geolocation is not supported by this browser.');
    }
    
    function showPosition(position) {
      console.log(
        'Latitude: ' +
          position.coords.latitude +
          ', Longitude: ' +
          position.coords.longitude
      );
    }
  6. Web Workers: Web Workers let developers run scripts in the background, independently of the page. Moving heavy work to separate threads keeps the page responsive.
    JavaScriptCode fragment
    // Create a new worker
    var worker = new Worker('worker.js');
    
    // Listen for messages from the worker
    worker.onmessage = function (event) {
      console.log('Message from worker: ' + event.data);
    };
    
    // Send a message to the worker
    worker.postMessage('Hello from the main page!');

These are some of the features introduced in HTML5. As web technologies evolve, HTML remains the basic building block of modern, interactive web applications.

Have a question about this article? Write to me