HTML5 and its Essentials: Explore New Features!

Exploring New Features in HTML5:

You’ve previously learned that HTML5 is the current major version of HTML. HTML5 and its Essentials add a number of new elements and properties to help you construct interactive websites. Some of these components and attributes are new additions, while others are refinements to existing ones. In the parts that follow, we will learn about HTML5’s upgrades and new features.

New Elements:

HTML5 introduces a number of new elements to improve the semantic structure of web documents and facilitate modern web development processes. For instance, the AUDIO and VIDEO elements are used to embed media files in a Web page. The HEADER and FOOTER elements are used to display the header and footer sections in a Web page. The following are some of the noteworthy new components included in HTML5:

These new components, among many others, help to improve document organization, accessibility, and support for multimedia and interactive content. Developers can use these elements to construct more semantically relevant and feature-rich web pages. Keep in mind that browser support for these elements is generally broad, but it’s always a good idea to test for compatibility based on the intended audience.

New Attributes:

HTML5 included various new features to improve the functionality and flexibility of web programming. These properties extend HTML5’s capabilities, giving developers additional control and customization options for creating interactive and dynamic web applications. When utilizing newer characteristics, remember to consider sufficient browser support. Here are some important new attributes introduced in HTML5:

Link Relations:

In HTML5, the rel attribute defines the relationship between the current content and an external resource, which is generally connected using the <a> (anchor) or <link> elements. The rel attribute describes the type or nature of the link, which frequently determines how the browser handles or interprets the linked resource. It is essential to supply more information to browsers, search engines, and other user agents regarding the relationship between the current document and other resources. The specific values and their meanings may differ, thus consult the HTML5 specification or associated documentation for accurate and up-to-date information.

Microdata:

Microdata is a feature in HTML5 that allows you to add machine-readable data in HTML texts. It defines a standardized syntax that adds semantic information to web content, helping search engines and other applications to understand better and interpret the data. Microdata is commonly used to provide context to web content, including product information, reviews, events, and more. It attaches name-value pairs to HTML elements using HTML attributes. The crucial aspects of microdata are itemscope, itemtype, and itemprop.

Microdata is frequently associated with popular schemas such as Schema.org, which offers diverse types and characteristics for representing entities such as persons, organizations, events, and items. While microdata is one method for providing semantic information, other options include RDFa and JSON-LD. The approach to be used is typically determined by the project’s specific requirements and personal taste. Using microdata can help search engines and other apps find and comprehend your material better.

An example of using the microdata in an HTML document is given in the following code snippet:

<DL itemscope
    itemtype="http://vocab.example.com/book"
    itemid="urn:isbn:0-123-15981-1">
<DT>Title</DT>
<DD itemprop="title">HTML5 Website</DD>
<DT>Author</DT>
<DD itemprop="author">XYZ</DD>
</DL>

In the preceding code snippet, an item gives the information of a particular book.

ARIA Accessibility:

Accessible Rich Internet Applications is a set of features developed by the W3C to improve the accessibility of web content, particularly dynamic and interactive components, for people with impairments. ARIA properties can be added to HTML elements to help assistive devices, such as screen readers, understand and convey the purpose and status of user interface elements. Using ARIA features in conjunction with proper HTML semantics allows developers to design more accessible and useable online applications. It is critical to remember that ARIA should be utilized sparingly and in conjunction with native HTML elements whenever possible to guarantee a strong and consistent user experience. Furthermore, regular testing with assistive technologies is essential for assessing the effectiveness of ARIA implementations.

Web Forms 2.0:

As of my most recent knowledge update in January 2022, there is no distinct HTML version known as “Web Forms 2.0” in the official HTML specifications. However, HTML5 brings substantial changes and enhancements to the way forms are developed and managed on the web. The HTML5 specification included additional form elements, properties, and APIs that help to improve the user experience and functionality of web forms.

It is important to note that HTML and web technology capabilities and specifications are subject to change. Always consult the most recent HTML specifications and browser documentation for the most up-to-date information on HTML and its features.

Newly added attributes of the FORM element: Here are some commonly used form-related attributes that have been part of HTML5:

• autocomplete Attribute: The autocomplete feature lets developers specify whether the browser should automatically finish input values based on the user’s input history.

<input type="text" name="username" autocomplete="on">

• formnovalidate Attribute: The formnovalidate attribute overrides the form’s validation and allows form submission even when the form is invalid.

<form action="/submit" method="post">
   <input type="text" name="username" required>
   <button type="submit" formnovalidate>Submit</button>
</form>

Newly added attributes of the INPUT element: Here are some of the attributes that were introduced or enhanced for the element in HTML5:

Newly added attributes for the type attribute: The HTML standards for the element did not introduce any new values for the type attribute. The type attribute specifies the type of input control that will be shown, and the allowed values are well-known. While these are the most common and extensively used varieties, it is important to note that HTML requirements might change. New features and characteristics may be included in subsequent HTML versions or updates. Always consult the most recent HTML specifications and browser documentation for the most up-to-date information on HTML characteristics.

Multimedia:

HTML5 added native support for multimedia components, allowing users to incorporate music and video material directly into web pages without relying on third-party plugins such as Flash. HTML5 introduces two main multimedia elements:

Audio Element: The <audio> element embeds audio material in a web page. It supports a variety of audio file types, and you may specify several source components to ensure compatibility across browsers.

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

• The controls attribute provides playback controls (play, pause, volume, etc.).
• Multiple <source> components with various file formats offer fallback alternatives for browser compatibility.

Video Element: The <video> element embeds video information in a web page. Similar to <audio>, it accepts numerous video file formats and allows multiple sources for compatibility.

<video controls width="400" height="300">
   <source src="video.mp4" type="video/mp4">
   <source src="video.webm" type="video/webm">
   Your browser does not support the video element.
</video>

• The controls attribute specifies playback controls.
• The width and height properties determine the proportions of the video player.
• Multiple <source> elements offer backup alternatives.

These elements and characteristics help to integrate multimedia material more seamlessly on the web, and most recent web browsers support them. Always provide numerous source options to ensure compatibility with various browsers and devices.

2D and 3D drawings support HTML5:

HTML5’s <canvas> element enables developers to create dynamic graphics, charts, animations, and more right on a web page. While HTML5 does not have native support for 3D drawing, newer browsers frequently include APIs and technologies that enable 3D graphics.

2D Drawing with Canvas: The <canvas> element and 2D drawing environment enable developers to create shapes, paths, text, and images on a two-dimensional plane. JavaScript is frequently used to interact with the canvas and generate dynamic visualizations. Example of a simple two-dimensional drawing on a canvas:

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

<script>
   var canvas = document.getElementById('myCanvas');
   var ctx = canvas.getContext('2d');

   // Draw a rectangle
   ctx.fillStyle = 'blue';
   ctx.fillRect(50, 50, 100, 50);

   // Draw text
   ctx.font = '20px Arial';
   ctx.fillStyle = 'red';
   ctx.fillText('Hello, Canvas!', 50, 150);
</script>

3D Drawing with WebGL: For 3D graphics, HTML5 itself does not contain a native 3D drawing context. However, WebGL, a JavaScript API based on OpenGL ES, allows for high-performance 3D visuals within the HTML5 canvas element. Most contemporary browsers support WebGL. An example of a simple 3D drawing with WebGL:

<canvas id="myCanvas" width="400" height="300"></canvas>

<script>
   var canvas = document.getElementById('myCanvas');
   var gl = canvas.getContext('webgl');

   if (!gl) {
      console.log('WebGL not supported, falling back on experimental-webgl');
      gl = canvas.getContext('experimental-webgl');
   }

   if (!gl) {
      alert('Your browser does not support WebGL');
   } else {
      console.log('WebGL is supported');
   }

   // WebGL drawing code would go here
</script>

To work with 3D visuals in WebGL, developers often need extra libraries and frameworks such as Three.js, Babylon.js, or A-Frames. These libraries streamline the process of creating and interacting with 3D sceneries in the browser.

Keep in mind that WebGL requires a strong understanding of computer graphics and may have a steeper learning curve than 2D canvas sketching. When deciding between 2D and 3D graphics, always consider browser compatibility and your project’s specific requirements.

Offline Web Applications and Caching:

Offline web apps employ HTML5 cache technologies to improve the user experience when there is no internet connection. Key features include:

• Service Workers: Service workers, a type of JavaScript worker, allow background script execution. They can intercept and process network requests, enabling offline access.
• Application Cache (appCache): HTML5 AppCache allows developers to specify files for offline caching, ensuring that critical resources are accessible even without an internet connection.
• Offline web apps use IndexedDB and Web Storage (e.g., localStorage) to store data on the client side, enabling offline interaction.
• AppCache and Progressive Web Apps (PWAs) use manifest files to cache resources for offline access.

<!-- Inside an HTML file -->
<!DOCTYPE html>
<html manifest="offline.appcache">
  <!-- ... -->
</html>

The Cache API enables developers to programmatically manage caches, providing precise control over resource caching and retrieval.

Using these HTML5 technologies, developers may construct online applications that are functional and responsive in offline settings, increasing user engagement and pleasure. Always evaluate your application’s specific requirements and consult the most recent documentation for the most up-to-date information.

CSS enhancements:

CSS (Cascading Style Sheets) is a different technology from HTML, yet it works in tandem with HTML to style and format web pages. HTML provides a webpage’s structure and information, whereas CSS is responsible for display and styling. Here are some CSS enhancements and features that contribute to better styling and design in HTML.

CSS Selectors: CSS selectors let you target and style certain HTML components. They can be based on element names, classes, IDs, properties, and so on.

h1 {
  color: blue;
}

.my-class {
  font-size: 16px;
}

New Fonts: Google Fonts: Use Google Fonts by including a link in your HTML file. Example:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap">

Font Family: Apply the new font to an element in your CSS. Example:

body {
  font-family: 'Open Sans', sans-serif;
}

Text Wrapping: Text wrapping describes how text flows around an element, such as an image or a floating container. It ensures that the text does not overrun the given element. In CSS, the float property is often used for text wrapping.

img {
  float: left;
  margin-right: 10px; /* Add margin to create space between image and text */
}

In this example, the float: left; property causes the image to float to the left, and the text wraps around it.

Text Stroke: Text stroke involves adding an outline or border to the text letters, resulting in a visual effect comparable to a stroke in graphics software. The text-stroke feature is not widely supported, thus text-shadow is frequently used instead.

h1 {
  color: white; /* Set text color */
  -webkit-text-stroke: 2px black; /* For Webkit browsers (Safari, Chrome) */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Fallback with text-shadow for other browsers */
}

In this example, -webkit-text-stroke is utilised for Webkit browsers, with text-shadow serving as a fallback for other browsers. The text-shadow property produces a similar visual effect by casting a shadow on the text.

Multi-column Layout: The column-count and column-width properties allow you to create multi-column layouts for text content.

.multi-column-layout {
  column-count: 3;
}

Opacity: Opacity refers to an element’s transparency. In CSS, the opacity property is used to manage the transparency of an element, where a value of 0 implies totally transparent, and 1 means wholly opaque.

.transparent-box {
  opacity: 0.5; /* Set the opacity to 50% */
}

In this example, the .transparent-box class is used to make an element semi-transparent with an opacity of 0.5.

Hue/Saturation/Luminance (HSL) Color Model: The HSL color model divides colors into three components: hue, saturation, and luminance. It offers a more natural approach to specify colors than other models, such as RGB. Hue (0–360 degrees): Represents the color itself. Saturation (0–100%): Indicates the strength or purity of the color. Luminance (0% to 100%): Indicates the brightness of a color.

.colorful-text {
  color: hsl(120, 100%, 50%); /* Green color with full saturation and 50% luminance */
}

In this example, the .colorful-text class is applied to text, setting its color to a green shade using the HSL color model. The values (120, 100%, 50%) represent a green hue with full saturation and 50% brightness. You can experiment with different values for hue, saturation, and brightness to achieve a wide spectrum of colors using the HSL color model.

Rounded Corners: Rounded edges provide a gentle and visually attractive touch to items. CSS’s border-radius attribute controls the curvature of an element’s corners.

.rounded-box {
  border-radius: 10px; /* Set a border-radius of 10 pixels */
}

In this example, the .rounded-box class is applied to an element, resulting in rounded corners with a radius of 10 pixels.

Color Gradients: Colour gradients enable you to make smooth transitions between different colours. CSS’s linear-gradient feature is widely used to apply colour gradients.

.gradient-background {
  background: linear-gradient(to right, #ffcc00, #ff6666); /* Create a horizontal gradient from yellow to red */
}

In this example, the .gradient-background class is applied to an element to create a horizontal color gradient background ranging from yellow (#ffcc00) to red (#ff6666). The linear gradient property allows you to change the colors, direction, and placements to create a variety of gradient effects.

Shadows: Shadows provide depth and substance to things on a webpage. CSS has attributes for producing box shadows and text shadows.

.box-with-shadow {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* Apply a box shadow with a horizontal and vertical offset, blur radius, and color */
}

In this example, the .box-with-shadow class is applied to an element, resulting in a box shadow with a horizontal offset of 5 pixels, a vertical offset of 5 pixels, a blur radius of 10 pixels, and a semi-transparent black color.

.text-with-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Apply a text shadow with a horizontal and vertical offset, blur radius, and color */
}

In this example, the .text-with-shadow class is applied to text, resulting in a text shadow with a horizontal offset of 2 pixels, a vertical offset of 2 pixels, a blur radius of 4 pixels, and a semi-transparent black color.

Background Enhancements: Enhancing backgrounds entails using characteristics such as gradients, graphics, and other aspects to increase the visual attractiveness of the background.

.gradient-background {
  background: linear-gradient(to right, #ffcc00, #ff6666); /* Create a horizontal gradient background from yellow to red */
}

In this example, the .gradient-background class is used as an element to create a horizontal gradient background ranging from yellow (#ffcc00) to red (#ff6666).

.background-with-image {
  background-image: url('background-image.jpg'); /* Set a background image */
  background-size: cover; /* Ensure the background image covers the entire element */
  background-position: center; /* Center the background image */
}

In this example, the .background-with-image class is applied to an element, which creates a backdrop picture with additional parameters like size and position.

Enhanced Box Model: Box Sizing: Use box-sizing property for a more predictable box model.

* {
  box-sizing: border-box;
}

Margins and padding: Use the margin and padding properties to adjust the spacing.

.box {
  margin: 10px;
  padding: 20px;
}

Transitions and Animations: CSS transitions and animations make it possible to create dynamic, interactive animations as well as smooth transitions between states.

.button {
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #3498db;
}

Transforms: CSS transforms (transform, rotate, scale, and translate) allow you to apply 2D and 3D transformations to elements.

.rotate {
  transform: rotate(45deg);
}

These CSS enhancements improve web developers’ styling powers, allowing them to construct more responsive, dynamic, and visually appealing designs. They supplement the structural features introduced in HTML5, resulting in a more contemporary and adaptable web development experience.

Client Side Storage:

Client-side storage in HTML5 refers to web browsers’ ability to save data locally on the user’s device. HTML5 has two key techniques for client-side storage: localStorage and sessionStorage.

localStorage:

• Persistent Storage: Data is saved between browser sessions and even when closed and reopened.
• Storage Limit: Browsers often enable several megabytes of storage per domain.
• Scope: Applied to all windows/tabs with the same origin.

// Store data in localStorage
localStorage.setItem('username', 'JohnDoe');

// Retrieve data from localStorage
const storedUsername = localStorage.getItem('username');

sessionStorage:

• Session-based storage means data is only available for the duration of a page session. It is cleared when the session ends (when the browser or tab is closed).
• Storage Limit: Like localStorage, but limited to the current session.
• Scope: Applies to a certain window/tab.

// Store data in sessionStorage
sessionStorage.setItem('theme', 'light');

// Retrieve data from sessionStorage
const storedTheme = sessionStorage.getItem('theme');

These storage techniques provide a simple key-value storage system on the client side, allowing web applications to store and retrieve data without requiring server-side databases for every interaction. Always be mindful of the data you store and the security consequences, particularly when working with sensitive information. Additionally, ensure that these functionalities are compatible with your browser.

WebSockets:

WebSockets provide full-duplex communication via a single, long-lived connection. They provide real-time communication between a web browser and a server, allowing data to be delivered and received in both directions without the need for further HTTP requests. Key Features:

• Real-time communication allows for real-time data sharing between clients and servers.
• Efficiency: Lower latency and overhead than typical HTTP polling.
• Bi-directional communication allows for data transfer from the client to the server and vice versa.
• Use the WebSocket API in JavaScript to create and manage WebSocket connections.

// Establish a WebSocket connection
const socket = new WebSocket('wss://example.com');

// Event handlers
socket.onopen = (event) => {
  console.log('WebSocket connection opened:', event);
};

socket.onmessage = (event) => {
  console.log('Received message:', event.data);
};

socket.onclose = (event) => {
  console.log('WebSocket connection closed:', event);
};

// Send data
socket.send('Hello, server!');

Web Workers:

Web Workers enable developers to run scripts in the background, independent of the main thread of the web page. This allows for parallel task execution while maintaining the responsiveness of the user interface. Key Features:

• Concurrent execution allows tasks to run concurrently without stopping the main thread.
• Background processing is useful for long-running, computationally heavy processes.
• Web Workers cannot access the DOM or the main thread’s JavaScript as they run in a different thread.
• There are two types of workers: dedicated and shared. Dedicated workers belong to the script that created them, while shared workers can be used by various scripts.

// Create a new Web Worker
const worker = new Worker('worker.js');

// Event handler for receiving messages from the worker
worker.onmessage = (event) => {
  console.log('Message from Web Worker:', event.data);
};

// Post a message to the worker
worker.postMessage('Start processing!');

In the example above, worker.js is a separate JavaScript file containing the code that will be run by the Web Worker.

Notifications:

Notifications enable web applications to display system-level notifications to users, giving a means of communicating vital information or events even when the programme is not in focus. Key Features:

• Modern web browsers provide cross-browser support.
• Notifications can have customisable content, including a title, body, and icon.
• Permission-Based: Before displaying notifications, the user must first grant authorization.
• Event Handling: Enables event handlers for user interaction with notifications.

// Request permission to show notifications
Notification.requestPermission().then((permission) => {
  if (permission === 'granted') {
    // Create a notification
    const notification = new Notification('Hello, World!', {
      body: 'This is a notification example.',
      icon: 'icon.png',
    });

    // Event handler for user interaction with the notification
    notification.onclick = () => {
      console.log('Notification clicked!');
    };
  }
});

Drag and Drop API:

The Drag and Drop API enables users to drag and drop components on a web page. It facilitates the implementation of drag-and-drop capability in interactive user interfaces. Key Features:

• The event-based approach relies on drag-and-drop events such as dragstart, dragenter, dragover, and drop.
• Customisable Data Transfer: Enables data customisation during drag-and-drop operations.
• Visual feedback is provided during drag operations, including a draggable ghost picture.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .draggable {
      width: 100px;
      height: 50px;
      background-color: lightblue;
      margin: 20px;
      cursor: grab;
    }
  </style>
</head>
<body>

  <div class="draggable" draggable="true" ondragstart="dragStart(event)">Drag me!</div>

  <script>
    function dragStart(event) {
      // Customize data being transferred
      event.dataTransfer.setData('text/plain', 'Dragged Element');

      // Add visual feedback during drag
      event.dataTransfer.setDragImage(new Image(), 0, 0);
    }
  </script>

</body>
</html>

In this example, the .draggable element is made draggable, and the dragStart function is invoked when the drag action begins. The event.dataTransfer object is used to modify the data being sent.

Geolocation API:

The Geolocation API in HTML5 enables web applications to obtain the user’s geographical location. It gives latitude, longitude, altitude, and precision, allowing developers to create location-aware apps. Key Features:

• To get location information, users must provide their consent.
• Asynchronous operation involves providing location data via callback routines.
• High Accuracy: Provides precise location information when available.

// Check if Geolocation is supported
if (navigator.geolocation) {
  // Get current location
  navigator.geolocation.getCurrentPosition(
    (position) => {
      console.log('Latitude:', position.coords.latitude);
      console.log('Longitude:', position.coords.longitude);
    },
    (error) => {
      console.error('Error getting location:', error.message);
    }
  );
} else {
  console.log('Geolocation is not supported in this browser.');
}

Modernizr:

Modernizr is not an HTML5 feature, but rather a JavaScript package that recognises HTML5 and CSS3 elements in a user’s browser. It enables developers to include conditional statements in their code based on the existence or absence of specific features, resulting in improved cross-browser compatibility. Key Features:

• Detects available HTML5 and CSS3 features.
• Conditional Loading enables script or stylesheet loading based on detected features.
• Cross-browser compatibility provides a uniform experience across several browsers.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Include Modernizr script -->
  <script src="modernizr.js"></script>
</head>
<body>

  <script>
    // Check if Geolocation is supported
    if (Modernizr.geolocation) {
      // Geolocation is supported, handle accordingly
      navigator.geolocation.getCurrentPosition(
        (position) => {
          console.log('Latitude:', position.coords.latitude);
          console.log('Longitude:', position.coords.longitude);
        },
        (error) => {
          console.error('Error getting location:', error.message);
        }
      );
    } else {
      console.log('Geolocation is not supported in this browser.');
    }
  </script>

</body>
</html>

In this example, Modernizr is used to check if the browser supports the Geolocation API before attempting to utilize it.