Html5

Features of Html5

Written by admin

Ever since its introduction, HTML has been in continuous evolution. Different features have been introduced at different points of time, some being introduced in specifications while others were introduced in software releases.

Components of HTML5

The design principles of HTML5 have been spelled out in the WHATWG specification as follows:

Compatibility

At the core of HTML5, is the desire to keep everything working smoothly. The motto is evolution, not revolution.

Utility

The HTML5 specification is written based on a one-line priority order – “the user is king.” If any doubt ever arises, the specification values users over authors, over implementers (browsers), over specifies (W3C/WHATWG), and over theoretical purity. All this makes HTML5 overwhelmingly prac- tical, even if it’s imperfect.

Interoperability

HTML5 strives for simplification and avoiding needless complexity. To achieve all this simplicity, the specification has become much bigger and detailed, spanning over 1200 pages. HTML5 is also designed to handle errors, with a variety of error handling plans.

Universal access

This principle aims to make HTML5 independent of the device or platform, support all world languages and even support users with disabilities.

The figure below shows the various classes that make up the complete HTML5 Specification. Let’s examine these briefly. Keep in mind that the complete HTML5 is still a
working draft and is

still being discussed on the HTML Working Group and WHATWG mailing lists

Semantics

Giving meaning to
structure, semantics
are front and center
with HTML5. A richer
set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.

Offline and Storage

Web apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API speci cations.

Device access

Beginning with the Geolocation API, web applications can present rich, device- aware features and experiences. Incredible device access innovations are being developed and implemented from audio/video input access to microphones and cameras to local data such as contacts and events, and even tilt orientation.

Connectivity

More efficient connectivity means more real-time chats, faster games, and better communication. Web sockets and server-sent events are pushing (pun intended) data between client and server more ef ciently than ever before.

Multimedia

Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!

3D, Graphics, and Effects

Between SVG, Canvas, WebGL, and CSS3 3D features, you’re sure to amaze your users with stunning visuals natively rendered in the browser.

Performance and Integration

Make your web apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest

CSS3

CSS3 delivers a wide range of stylisation and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally, Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before.

Changes to document structure

In addition to the above, there have been some changes to the document structure for HTML5:

The document structure of HTML5 is compatible with HTML4 and XHTML1 documents published on the web but isn’t compatible with some of the SGML features of HTML4. HTML5 also denies detailed parsing rules for this syntax, which is largely compatible with popular implementations.

New DOCTYPE

The HTML syntax of HTML5 requires a DOCTYPE to be specified to ensure that the browser renders the page in standards mode. The DOCTYPE has no other purpose and is therefore optional for XML.

In HTML5, the DOCTYPE for web pages has been greatly simpli ed. Compare, for example, the following HTML4 DOCTYPEs:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//

EN” “http://www.w3.org/TR/html4/loose.dtd”>

Impossible to remember, right? HTML5 neatly solves this problem as follows:

• <!DOCTYPE html>
Yes, that’s it! Just two words “DOCTYPE” and “html”. All this is pos-

sible because HTML 5 is no longer part of SGML, but is instead a markup language all by itself.

Character declaration

Like the new DOCTYPE, the character set declaration has also been abbre- viated. It used to be:
• <metahttp-equiv=”Content-Type”content=”text/html; charset=utf-8”>

Now, it uses UTF-8 and you de ne it with just one meta tag:

• <metacharset=”utf-8”>

MathML and SVG

The HTML syntax of HTML5 allows for MathML and SVG elements to be used inside a document. For example, a very simple document using some of the minimal syntax features could look like:

HTML5 – FeaTures 27

• • • • • •

<!doctypehtml> <title>SVGintext/html</title> <p>

A red circle:

<svg> <circle r=”50” cx=”50” cy=”50” ll=”red”/> </svg> </p>

New semantics

HTML 5 recognizes that web pages have a structure, just like books have a structure. In general, web pages have navigation, body content, and sidebar content plus headers, footers, and other features. And HTML 5 has created tags to support those elements of the page.This new markup defined by HTML5 greatly simplifies the design of your HTML pages. The new markup knows as semantics give meaning to the content on your page. Google had analysed millions of pages to discover the common ID names for <div> tags and found a huge amount of repeti- tion. For example, web sites use DIV id=“footer” to mark up footer content, HTML5 provides a sectioning element called <footer> that you can use in modern browsers right now.

  • Ω  <section> – It represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.
  • Ω  <header> – It defines the header of a page or a section of the page.
  • Ω  <footer> – It defines the footer of a page or a section of the page.
  • Ω  <nav> – It represents the navigation on a page.
  • Ω  <article>-Itrepresentsanindependentpieceofcontentofadocument,

    such as a blog entry or newspaper article.

  • Ω  <aside>-Itdefinesextracontentsuchasasidebaronapageandisusedto

    represents a piece of content that is only slightly related to the rest of the page.

  • Apis

    HTML5 introduces a number of APIs that help in creating Web applica- tions. These can be used together with the new elements introduced for application. Some of the most important API’s are:

    • Ω  Geolocation API defines a high-level interface to location information

      associated only with the device hosting the implementation, such as lati- tude and longitude. The API itself is agnostic of the underlying location information sources. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well as user input. No guarantee is given that the API returns the device’s actual location.

    • Ω  IndexedDB API is a W3C draft Web specification for the storage of large amounts of structured data in the browser, using indexes that allow for high performance searches on this data. The IndexedDB API is currently being standardized by the W3C Web Applications Working Group. IndexedDB can be used for browser implemented functions like
    • Ω  <figure> – defines images that annotate an article. You can use <fig-

      caption> as an optional caption.

      Document representation

      Unlike previous versions of HTML and XHTML which are de ned in terms of their syntax, HTML 5 is being de ned in terms of the Document Object Model (DOM). It is inspired by the tree representation, which is used internally by browsers, in order to represent documents. The principal advantage of using DOM is that the language itself can be de ned independently of the syntax. There are primarily two syntaxes that can be used to represent HTML documents: the HTML serialization (known as HTML 5) and the XML serialization (known as XHTML 5).

      New elements

      HTML5 introduces many new markup elements, which it groups into seven different content types.

      Browser support

      An important question to address here is how to identify if your browser supports that HTML5 feature – be it canvas, video or form attributes.

      When your browser renders a web page, it constructs a Document Object Model (DOM), a collection of objects that represent the HTML elements on the page. Every element — every <p>, every <div>, every <span> — is repre- sented in the DOM by a different object.

      All DOM objects share a set of common properties, but some objects have more than others. In browsers that support HTML5 features, certain objects will have unique properties. A quick peek at the DOM will tell you which features are supported.

      There are four basic techniques for detecting whether a browser supports a particular feature. From simplest to most complex:

      1. Check if a certain property exists on a global object (such as window or

        navigator).

      2. Create an element, then check if a certain property exists on that element.
      3. Create an element, check if a certain method exists on that element, then

        call the method and check the value it returns.

      4. Create an element, set a property to a certain value, then check if the

      property has retained its value

      For detection of HTML5 features, your best tool is Modernizer. Modernize is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.

About the author

admin

Leave a Comment