HTML5

HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts:

It is a new version of the language HTML, with new elements, attributes, and behaviors.
It is a larger set of technologies that allows the building of more diverse and powerful Web sites and applications.

1. New Semantic Elements

HTML5 introduced semantic elements to clearly define different parts of a web page:

<header>: Defines a header for a document or a section.
<nav>: Defines a set of navigation links.
<section>: Defines a section in a document.
<article>: Defines an independent, self-contained content.
<aside>: Defines content aside from the page content (like a sidebar).
<footer>: Defines a footer for a document or a section.
<main>: Specifies the main content of a document.
<figure> and <figcaption>: Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

<article>
  <header>
    <h1>Article Title</h1>
    <p>Posted by John Doe</p>
  </header>
  <p>Article content...</p>
  <footer>
    <p>Comments (3)</p>
  </footer>
</article>

2. Forms 2.0

HTML5 introduced many new input types and attributes to make form validation easier and improve user experience on mobile devices.

New Input Types

email
url
tel
number
date, time, datetime-local, month, week
range
color
search

New Attributes

placeholder: Specifies a short hint that describes the expected value.
required: Specifies that an input field must be filled out.
autofocus: Specifies that an input field should automatically get focus when the page loads.
pattern: Specifies a regular expression that the input field's value is checked against.
min / max / step: For numeric inputs.

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required placeholder="john@example.com">

  <label for="quantity">Quantity (1-5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">

  <input type="submit">
</form>

3. Graphics and Multimedia

HTML5 brought native support for graphics and media, reducing the need for plugins like Flash.

<canvas>: Used to draw graphics, on the fly, via scripting (usually JavaScript).
<svg>: Scalable Vector Graphics.
<audio>: Defines sound content.
<video>: Defines video or movie content.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

4. New APIs

HTML5 is often associated with a suite of JavaScript APIs that extend the capabilities of the web.

Geolocation API: To get the geographical position of a user.
Drag and Drop API: To make elements draggable.
Web Storage (localStorage / sessionStorage): A better alternative to cookies for storing data on the client.
Web Workers: For running scripts in the background.
Server-Sent Events (SSE): For one-way updates from the server.

5. Removed Elements

Some elements from HTML 4.01 were removed or deprecated in HTML5 because their functionality is better handled by CSS:

<center>
<font>
<strike>
<big>
<frame>, <frameset>, <noframes>

programming/HTML/html

Created: March 17, 2026 • Last Modified: February 1, 2026

Docs Login