New Features in HTML5

Rumman Ansari   Software Engineer   2023-03-27   7023 Share
☰ Table of Contents

Table of Content:


Other than elements, HTML 5 also introduces additional capabilities to the browser like working in offline mode, multi- threaded JavaScript, etc. Let's go though some of the features.

  • OfflineMode
  • LocalDatabase
  • NativeJSON
  • CrossDocumentMessaging
  • CrossSiteXHR
  • Multi-threadedJavaScript
  • Internationalization
  • Accessibility
  • Tables
  • Style sheets
  • Scripting

OfflineMode

With HTML 5, you can specify what resources your page will require and the browser will cache them so that the user can continue to use the page even if she gets disconnected from the internet. This wasn't a problem before AJAX came into existence as the page could not request for resources after it was loaded. However, today's webpages are designed to be sleek so that they load fast and then the additional resources are fetched asynchronously.

LocalDatabase

HTML 5 has included a local database that will be persistent through your session. The advantage of this is that you can fetch the required data and dump it into the local database. The page there after won't need to query the server to get and update data. It will use the local database. Every now and then, the data from the local database is synced with the server. This reduces the load on the server and speeds up responsiveness of the application.

NativeJSON

JSON, or JavaScript Simple Object Notation is a popular alternative to XML, which was almost the de-facto standard before the existence of JSON. Until HTML 5, you needed to include libraries to encode and decode JSON objects. Now, the JavaScript engine that ships with HTML 5 has built-in support for encoding/decoding JSON objects

CrossDocumentMessaging

Another interesting addition to HTML 5 is the ability to perform messaging between documents of the same site. A good use of this would be in a blogging tool. In one window, you create your post and in another window, you can see what the post would look like without having to refresh the page. When you save the draft of your post, it immediately updates the view window.

CrossSiteXHR

One of the amazing implications of AJAX was to be able to not only fetch data from the server asynchronously, but to be able to get resources from other websites using the XMLHTTP Request. As this wasn't part of HTML4, you needed to include a library to perform such an action. HTML 5 will have XMLHTTP Request support built-in, so you won't need any library.

Multi-threadedJavaScript

A large portion of most web apps is written in JavaScript as it is the only client-side programming language available. One of the HTML 5 promises is that JavaScript will become a multi-threaded language so that it executes more efficiently. However, that only solves one part of the problem. Multithreading will speed up the processing time of JavaScript once it has loaded, but as you increase the number of lines of JavaScript, the pages take longer to load. To solve that problem, they have introduced an attribute called async to the <script> element. It tells the browser that this script is not required when the page loads, so it can be fetched asynchronously even after the page has loaded. The syntax for this is:

	
<script async src="jquery.js"></script>

Internationalization

This version of HTML has been designed with the help of experts in the field of internationalization, so that documents may be written in every language and be transported easily around the world.

One important step has been the adoption of the ISO/IEC:10646 standard as the document character set for HTML. This is the world's most inclusive standard dealing with issues of the representation of international characters, text direction, punctuation, and other world language issues.

HTML now offers greater support for diverse human languages within a document. This allows for more effective indexing of documents for search engines, higher-quality typography, better text-to-speech conversion, better hyphenation, etc.

Accessibility

As the Web community grows and its members diversify in their abilities and skills, it is crucial that the underlying technologies be appropriate to their specific needs. HTML has been designed to make Web pages more accessible to those with physical limitations. HTML 4 developments inspired by concerns for accessibility include:

  • Better distinction between document structure and presentation, thus encouraging the use of style sheets instead of HTML presentation elements and attributes.
  • Better forms, including the addition of access keys, the ability to group form controls semantically, the ability to group SELECT options semantically, and active labels.
  • The ability to markup a text description of an included object (with the OBJECT element).
  • A new client-side image map mechanism (the MAP element) that allows authors to integrate image and text links.
  • The requirement that alternate text accompany images included with the IMG element and image maps included with the AREA element.
  • Support for the title and lang attributes on all elements.
  • Support for the ABBR and ACRONYM elements.
  • >A wider range of target media (tty, Braille, etc.) for use with style sheets.
  • Better tables, including captions, column groups, and mechanisms to facilitate non-visual rendering.
  • Long descriptions of tables, images, frames, etc.

Authors who design pages with accessibility issues in mind will not only receive the blessings of the accessibility community, but will benefit in other ways as well: well-designed HTML documents that distinguish structure and presentation will adapt more easily to new technologies.

Tables

The new table model in HTML is based on [RFC1942]. Authors now have greater control over structure and layout (e.g., column groups). The ability of designers to recommend column widths allows user agents to display table data incrementally (as it arrives) rather than waiting for the entire table before rendering.

Style sheets

Style sheets simplify HTML markup and largely relieve HTML of the responsibilities of presentation. They give both authors and users control over the presentation of documents -- font information, alignment, colors, etc.

Style information can be specified for individual elements or groups of elements. Style information may be specified in an HTML document or in external style sheets.

The mechanisms for associating a style sheet with a document are independent of the style sheet language.

Before the advent of style sheets, authors had limited control over rendering. HTML 3.2 included a number of attributes and elements offering control over alignment, font size, and text color. Authors also exploited tables and images as a means for laying out pages. The relatively long time it takes for users to upgrade their browsers means that these features will continue to be used for some time. However, since style sheets offer more powerful presentation mechanisms, the World Wide Web Consortium will eventually phase out many of HTML's presentation elements and attributes. Throughout the specification elements and attributes at risk are marked as "deprecated". They are accompanied by examples of how to achieve the same effects with other elements or style sheets.

Scripting

Through scripts, authors may create dynamic Web pages (e.g., "smart forms" that react as users fill them out) and use HTML as a means to build networked applications.

The mechanisms provided to include scripts in an HTML document are independent of the scripting language.