HTML5 APIs and Features

HTML5 introduced many new elements, input types, and powerful APIs to build modern, interactive web applications with ease. Let's explore them step by step.

1. HTML5 Doctype and Rules

HTML5 uses a very simple doctype declaration compared to previous versions.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>HTML5 Example</title>
  </head>
  <body>
    <h1>Welcome to HTML5!</h1>
  </body>
</html>

This declaration tells the browser to render the page in standards-compliant mode using HTML5.

2. HTML5 Input Types

HTML5 added new input types to improve user experience and mobile support.

<form>
  Date: <input type="date" name="dob"><br>
  Color: <input type="color" name="favcolor"><br>
  Range: <input type="range" name="volume" min="0" max="100"><br>
</form>

These input types help in capturing specific types of data with built-in controls.

3. HTML5 Form Validation

HTML5 provides built-in validation without using JavaScript. Fields like email, required, min/max can be validated automatically.

<form>
  Email: <input type="email" required><br>
  Age: <input type="number" min="18" max="99" required><br>
  <input type="submit" value="Submit">
</form>

The form will not submit until all validation rules are satisfied.

4. HTML5 Web Storage

HTML5 provides two types of storage:

localStorage: Data persists even after the browser is closed.
sessionStorage: Data is cleared when the browser/tab is closed.

Example: Set and get localStorage data

<button onclick="storeData()">Save Data</button>
<button onclick="getData()">Get Data</button>

<script>
  function storeData() {
    localStorage.setItem("username", "JohnDoe");
    alert("Data stored!");
  }

  function getData() {
    alert("Hello, " + localStorage.getItem("username"));
  }
</script>

5. HTML5 Geolocation API

This API allows websites to get the geographical location of the user (with their permission).

<button onclick="getLocation()">Get Location</button>
<p id="output"></p>

<script>
  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      document.getElementById("output").innerText = "Geolocation is not supported.";
    }
  }

  function showPosition(position) {
    document.getElementById("output").innerText =
      "Latitude: " + position.coords.latitude +
      " | Longitude: " + position.coords.longitude;
  }
</script>

Note: Geolocation requires HTTPS and user permission.

6. HTML5 Drag and Drop

HTML5 includes a native drag-and-drop API that allows elements to be dragged and dropped.

<div id="dragme" draggable="true" ondragstart="drag(event)" 
     style="width:100px; height:100px; background:red;">
  Drag Me
</div>

<div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)" 
     style="width:200px; height:200px; border:2px dashed #000;">
  Drop Here
</div>

<script>
  function allowDrop(event) {
    event.preventDefault();
  }

  function drag(event) {
    event.dataTransfer.setData("text", event.target.id);
  }

  function drop(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("text");
    event.target.appendChild(document.getElementById(data));
  }
</script>

Conclusion

HTML5 made web development simpler and more powerful by introducing semantic elements, new input types, validation tools, and APIs like Geolocation, Web Storage, and Drag-and-Drop. These features enable richer user experiences with less JavaScript.

If you have any questions, feel free to ask. Thank you for reading!

If you have any query or question, please contact through below form. Our team will be in touch with you soon.

Please provide your valueable feedback or suggession as well.