MSDN Documentation

Microsoft Developer Network

Introduction to HTML5

HTML5 is the latest major version of the HyperText Markup Language (HTML), the standard markup language for documents designed to display in a web browser. It is the fifth major revision of the HTML standard since its initial release by the World Wide Web Consortium (W3C) in 1999. It was published as a W3C Recommendation on 28 October 2014.

HTML5 aims to be a direct successor to HTML 4.01, while also incorporating features that have become established as part of the Web Application technologies. It is designed to be compatible with new and existing web browsers. One of the most significant improvements in HTML5 is the introduction of new semantic elements that help structure web content more effectively, making it more accessible to both developers and machines (like search engines and assistive technologies).

Key Features of HTML5

HTML5 introduces a wide range of new elements and APIs that enhance web development capabilities. Some of the most notable features include:

Semantic Elements

These elements provide more meaning to your markup:

  • <article>: Defines self-contained content.
  • <aside>: Defines content that is related to the content around it, but could be viewed as separate.
  • <details>: Defines additional details that the user can view or hide on demand.
  • <figcaption>: Used with <figure> to represent a caption.
  • <figure>: Specifies self-contained content, like illustrations, diagrams, photos, etc.
  • <footer>: Defines a footer for a document or a section.
  • <header>: Defines a header for a document or a section.
  • <main>: Specifies the main content of a document.
  • <mark>: Defines marked or highlighted text.
  • <nav>: Defines navigation links.
  • <section>: Defines a section in a document.
  • <summary>: Provides a visible heading for the <details> element.
  • <time>: Defines a specific time or date.

Multimedia Elements

HTML5 offers native support for video and audio:

  • <audio>: Embeds sound content.
  • <video>: Embeds video content.

Example of audio embedding:

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

Canvas and SVG

HTML5 includes the <canvas> element for drawing graphics with JavaScript and native support for Scalable Vector Graphics (SVG).

Example of canvas usage:

<canvas id="myCanvas" width="200" height="100"></canvas>

<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 150, 75); // Draw a red rectangle
</script>

Form Enhancements

New input types and attributes improve form usability and validation:

  • New input types: email, url, number, date, time, color, range, etc.
  • Attributes: required, placeholder, autofocus, multiple.

Web APIs

HTML5 introduces powerful client-side APIs for advanced web applications:

  • Geolocation API: Allows web applications to request the user's location.
  • Drag and Drop API: Enables dragging and dropping elements on the page.
  • Local Storage API: Provides a way to store data locally in the browser.
  • Web Workers API: Allows JavaScript to run in the background.
  • Application Cache: Enables offline web applications.

Browser Support

Modern web browsers have excellent support for HTML5. However, for older browsers, polyfills and fallbacks are often used to ensure a consistent experience. You can always check the latest browser compatibility information on resources like caniuse.com.