Exploring Some Features of HTML5

Table of contents
Introduction
What is HTML5?
Some Features of HTML5
HTML vs HTML5
How to Create HTML5 Files
HTML5 Looking Forward

Introduction

HTML has come a long way since its establishment in 1989 and has since served as the core language of the World Wide Web. From static and simple webpages to dynamic web applications, the web is constantly changing and the introduction of HTML5 represents a significant leap in the world of web development.

This article aims to explore the key features of HTML5, from the semantic elements to its multimedia features, HTML5 has helped restructure how the internet is accessed.

The primary focus of this article is on the 5th version of HTML, so if you want to learn more about the concept of HTML itself, go here.

What is HTML5?

Introduced on the 22nd of January 2008 with goals such as improving the language by adding the latest multimedia support, and keeping the language(HTML) readable and consistently understood by both humans and devices, it aimed to solve the problems of a new era.

A sequel to HTML4, HTML5 is the latest specification of the HTML language. It is a markup language used for structuring and presenting hypertext documents on the web.

It was finally released as a World Wide Web Consortium (W3C) recommendation in 2014.

HTML5 created a shift in web development and offers features that enable developers to create interactive and dynamic web applications and the ultimate user experience for visitors.

Some Features of HTML5

Features introduced to HTML by HTML5 include:

1.Semantic Elements: This is the foundation of modern web development. Semantic elements like <header>, <footer>, <section> tags and more were introduced by HTML5. These elements help to provide structure and clarity to an HTML document and help in code readability.

Using certain elements helps the browser know how to display your code. For example, the <header> element tells the browser that the content in <header> should be loaded first.

On the other hand, a <footer> element tells the browser that the content in <footer> should be loaded last.

<header>
   <h1>My first header element</h1>
 </header>
 <section>
   <h2>My first section element</h2>
   <p>your content</p>
 <!--Before adding any new content, the section element can be
 used to separate existing content from future content -->
 </section>
 <footer>
   <p>All rights reserved</p>
   <!--The footer element can contain copyright information,
 back-to-top links, and so on -->
   <!--It is a structural element used to identify the footer
 of a page, document, article or section -->
 </footer>

The above code block depicts some semantic elements with content they may contain.

What should be remembered is that semantic elements are those elements that accurately reflect the content they contain and are helpful for code readability and leveraging search engine optimization (SEO).

2.Figure and Figcaption: HTML5 allows you to use <figure> and <figcaption> elements to mark up and define photos. The <figure> element represents "self-contained" content and allows you to associate an image with a caption.

As for <figcaption>, it allows you to add a caption to a particular content nested within a <figure> element. For image elements, the <figcaption> is placed just above the closing tag of the <figure>, after the image<img> element.

Thus to add a caption to an image of a cat, you can code:

 <figure>
   <img src="cat.jpg" alt="cat sleeping on tree">
   <figcaption> What breed of cat do you have?</figcaption>
 </figure>

The output looks like this:

3.Form Enhancements: HTML5 introduces new input types for the existing <form> element in HTML. For example (<input type="email">,<input type="password">), and validation attributes like ('required', 'minlength', 'maxlength') which help to streamline form development for the best user experience.

Validation attributes are special attributes that can be added to form elements to provide validation rules and constraints for user input. These attributes improve user experience by providing instant feedback on input errors.

This means that if the data entered by the user/visitor does not meet specific criteria, it will not be submitted to the server.

 <input type="password" minlength="8">

 <!--By adding a 'minlength' validation attribute with a value of '8',
  it tells the browser that the user must type
  in not less than 8 characters when setting their password-->

 <input type="password" pattern="[a-z0-5]{8,}">

 <!--The pattern attribute defines an expression that the
 password must match to be considered valid-->
 <!-- This particular value means that the user can input 8 
 or more lowercase alphabets, or the digits 0-5 -->

These enhancements simplify data input and facilitate user input validation, without relying on javascript.

4.Multimedia Additions: Multimedia support with the use of <audio>, <video> and <canvas> elements allow the integration of audio and video files on your website, and the dynamic rendering of graphics directly within your browser using a scripting language(Javascript, PHP, and so on).

Unlike the former iterations, HTML5 does away with the reliance on third-party plugins like Adobe Flash for multimedia content, improving performance and simplifying multimedia integration.

5.Application Programming Interfaces(API): HTML5 introduced a range of APIs that help developers create more interactive web applications.

• The Geolocation API allows websites to access the user's/visitor's geographical location, and in turn, enables location-based services. Here, the user sends their longitude and latitude and this data is sent to the backend server.

The data can then be used to create fancy applications like fitness tracking apps, transportation apps, and so on. However, the geographical position of a user is not accessed unless they approve of it.

• The Drag and Drop API simplifies the implementation of the drag-and-drop functionality. In HTML, any element can be dragged and dropped. It allows you to drag any element in the DOM and drop it to another location.

In HTML, apart from the default behaviour for images, links, and selections, no other elements are draggable by default. To make other HTML elements draggable, provide a "draggable" attribute for the element you wish to make draggable and set its value to "true", then add a listener for the 'dragstart' event.

<div id="dragElement" draggable="true">Drag me!</div>
    <div id="dropzone">Drop here!</div>

    <script>
      const dragElement = document.getElementById('dragElement');
      const dropzone = document.getElementById('dropzone');

      dragElement.addEventListener('dragstart', function(e) {
        e.dataTransfer.setData('text/plain', 'Dragged text');
      });

      dropzone.addEventListener('dragover', function(e) {
        e.preventDefault();
      });

      dropzone.addEventListener('drop', function(e) {
        e.preventDefault();
        const data = e.dataTransfer.getData('text/plain');
        dropzone.innerHTML = `Dropped text: ${data}`;
      });
    </script>

This code creates a simple drop zone area where you can drag and drop files.

• The WebStorage API provides for easy storage of data on the client's device. This feature helps to reduce transactions between the application and the backend server, to create a fast application.

• The WebSocket API facilitates real-time communication between clients and servers, unlike the previous versions where the server responds after the client sends a request.

The introduction of these features among many others enables developers to unlock the full potential of the web, providing usefulness to HTML pages and contributing to more dynamic web applications.

HTML vs HTML5

The latest iteration of HTML, HTML5, builds upon HTML while introducing several new features, as listed above.

Other than the fact that HTML5 is simply the current version of the markup language, reasons such as it being easier to write, and maintain, better for accessibility and SEO, makes it superior.

You should note that HTML5 is not a replacement for HTML but rather an improvement. However, using outdated HTML versions is not preferred.

How to Create HTML5 Files

If you're reading this, I assume you already know how to create HTML documents as the language basics are the same. However, if you don't know how to create a standard HTML5 document, refer to my previous article here.

You can find it under the subheading "Creating Your First HTML File".

HTML5 Looking Forward

Certain features of HTML5 have been covered in this article, from utilising semantic elements to making responsive web images using HTML5. In addition to modernizing web development, these features give HTML pages more strength and dynamism.

By adhering to best practices for writing clean and maintainable code, developers can leverage the full potential of the web.

Happy coding besties!