What are the new features in HTML 5?

HTML is the HyperText Markup Language, is the language common to every website.

HTML5 => 5th version of HTML

If you want to build a website or web application, you will need to understand HTML

HTML5 introduced numerous features that greatly enhanced the web experience, both for developers and users. These new features provide a more efficient, flexible, and inbuilt way to create content, improving compatibility across devices and browsers, and supporting multimedia, graphics, and responsive design elements.

Let’s dive into the key new features in HTML5 and explore how they are changing the landscape of web development.

There are new features introduced to make HTML5 better than HTML:

Html5 interview questions for experienced professionals also freshers

Audio & Video

Before HTML5, embedding audio and video on websites required third-party plugins like Flash, which was cumbersome and often incompatible with mobile devices. HTML5 introduced the `<audio>` and `<video>` elements, allowing developers to natively embed media files directly in the browser without the need for external plugins. These elements are versatile, supporting multiple formats (such as MP4, WebM, and Ogg), and include attributes for controlling playback, volume, and more.

These tags are the major addition in HTML5. We can embed audio or video tag to the website directly.

HTML5 video can use CSS3 directly to style the video tag also you can change the border, gradients, opacity, transitions, transformations, and animations.

Audio Tag Example code:

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

Video Tag Example code:

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

Figure & Fig Caption

Use a <figure> element to show a picture in a website, and a <figcaption> element to define a description for the picture

<figure> & <figcaption> Example code:

<figure> 
    <img src="baby.jpg" alt="Cute Baby" width="400" heigh="400" title="Cute 6 months born baby" />         

    <figcaption> 
           She looks adorable. she looks healthy. she is so cute or sweet. 
    </figcaption> 
</figure>

Canvas and SVG – Graphics and Animations

This HTML5 <canvas> element is used to draw graphics in a web page.

Creating complex graphics and animations was previously possible only through technologies like Flash or JavaScript libraries. HTML5 introduced the `<canvas>` element, which allows for drawing 2D graphics on the fly using JavaScript. The canvas can be used for dynamic, interactive graphics such as game graphics, charts, or animations.

Canvas example code

Example 1:

<canvas id="myCanvas" width="200" height="100" style="border:5px solid green;">
Your browser does not support the HTML canvas tag.
</canvas>

Example 2:

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  context.fillStyle = 'green';
  context.fillRect(10, 10, 150, 80);
</script>

Semantic HTML5 Tags

Semantic elements clearly defines the content. It’s meaningful to the browser.

Non Semantic => <span>, <div> => here we don’t know what contains in both span & div

Semantic => <table>, <form> => In this example, we clearly know one contain table other one contain form.

This is why semantic tags introduced to meaningful to the browser also SEO can understand what it is.

Semantic example code

When SEO see this, at a glance it knows what it is

One of the biggest improvements in HTML5 is its focus on semantics. Previously, developers relied heavily on generic tags like `<div>` and `<span>` for most of the structural elements of a web page. HTML5 introduced new semantic elements that provide more meaning to the document’s structure. These include:

<header>: Defines the header section of a webpage or a section.

<footer>: Represents the footer section, typically containing copyright info, links, or navigation elements.

<article>: Designed for standalone content that can be reused independently, such as blog posts or news articles.

<section>: Represents a thematic grouping of content, often used to break up a webpage into distinct sections.

<aside>: Typically used for content related to the main content, like sidebars or callout boxes.

<nav>: Contains navigation links, helping search engines understand which parts of the site are for navigation.

These semantic elements make the HTML code easier to read and maintain, and help search engines understand the structure of the content better, improving SEO.

HTML 5 Input Types

HTML5 also brings significant improvements to web forms, making it easier to create interactive forms with built-in validation. New input types like `email`, `date`, `number`, and `range` provide more options for collecting specific types of data and come with native validation, improving user experience and reducing reliance on JavaScript for validation.

There are many HTML5 tags introduced, In early days we used <input type=”text”> every time.

Now a days we have a specific tags for email, color, number, url, search, etc

few of them below:

<input type="search" />
<input type="tel" />
<input type="url" />
<input type="number" />
<input type="range" />
<input type="datetime-local" />
<input type="month" />
<input type="week" />
<input type="time" />
<input type="color" />

Form Example:
<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
  
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

These are the new features in HTML 5, In HTML interview, this is the most popular question asked frequently.

Geolocation API – Location-Based Services

HTML5’s Geolocation API allows websites to request the user’s location information, which can be used for location-based services like mapping, navigation, or recommendations based on proximity. This is particularly useful for mobile web applications, where location data can enhance the functionality of apps like restaurant finders, social networks, or travel guides.

Here’s an example of using the Geolocation API:

<script>
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      console.log("Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude);
    });
  } else {
    console.log("Geolocation is not supported by this browser.");
  }
</script>

With the Geolocation API, web developers can create more personalised and interactive experiences by tailoring content based on the user’s current location.

Offline Web Applications – Application Cache and Service Workers

HTML5 allows developers to create offline web applications that work without an internet connection, thanks to the Application Cache and Service Workers. This feature enables a website to store assets locally, so users can continue to interact with it even if they lose connection. Applications such as email clients, note-taking apps, or simple games can benefit from this functionality.
For instance, by defining a manifest file, you can tell the browser which files to cache:

CACHE MANIFEST
# Cache manifest version 1.0

CACHE:
index.html
style.css
app.js

Web Storage – Local Storage and Session Storage

HTML5 introduced two new storage options: Local Storage and Session Storage, both of which provide a more secure and efficient way to store data in the browser compared to traditional cookies.

Local Storage you can store data that persists even after the browser is closed.

// Store data in Local Storage
localStorage.setItem("username", "Nirmal");

// Retrieve data
var name = localStorage.getItem("username");
console.log(name);  // Outputs: Nirmal

Session Storage stores data only for the duration of the page session.

Web Storage is particularly useful for saving user preferences, caching data, or managing login sessions without the need for server-side processing.

Web Workers – Background Scripts

To improve performance, HTML5 introduced Web Workers, allowing developers to run scripts in the background without affecting the user interface. Web Workers are especially helpful for running heavy computations, image processing, or any task that could slow down the user interface if performed on the main thread.

Here’s an example of using a Web Worker:

var worker = new Worker('worker.js');
worker.onmessage = function(event) {
  console.log(event.data);
};
worker.postMessage('Begin work');

By offloading tasks to Web Workers, developers can create more responsive and efficient web applications, especially in resource-intensive scenarios.

Conclusion:

Don’t brief shortly like below,

Say with few example, so that interviewer may not ask about in details. Bookmark this website for more html5 interview questions and answers

Happy Coding 🙂

Good Luck!