HTML 5 – WA and SEO Implications

Introduction

HTML5 is being developed as the next major revision of HTML (HyperText Markup Language), the core markup language of the World Wide Web. The Web Hypertext Application Technology Working Group (WHATWG) started work on the specification in June 2004 under the name Web Applications 1.0.

HTML52

Goals:Document real-world browser behaviour

Document and standardise useful extensions

Develop practical new features

Ensure backwards compatibility

Define robust error handling

Introduction

3

Rich Internet Applications (RIAs), and the Semantic Web have all pushed HTML, CSS, and JavaScript to and beyond their limits, often relying on plug-ins such as Adobe® Flash to power components such as video and audio, as well as highly graphical and interactive applications. The Adobe Flex development framework, Microsoft®'s Silverlight platform, and JavaFX are introduced to cover up for HTML weaknesses.

With full multimedia support, local storage and offline application support, a native 2D drawing API, and a host of new application development APIs, all provided with the intent of proving that HTML, CSS, and JavaScript can provide a rich front end to your Web sites and applications.

Need

Solutions

Why HTML 5?Features

4

Change in Semantec Elements – Tags introduced and droppedMultimedia – Audio Video TagsLocal Storage – End of Cookies2D drawing API – Canvas TagRich Front End – Form Controls and New Elements

Solutions

With full multimedia support, local storage and offline application support, a native 2D drawing API, and a host of new application development APIs, all provided with the intent of proving that HTML, CSS, and JavaScript can provide a rich front end to your Web sites and applications.

Why HTML 5?Features

5

Semantic elements are structured to provide a standard identification to the page areas rather than leaving on the developer to choose the names for their classes and div IDs.The main semantic elements that HTML5 introduces are:<header> <footer> <nav> <article> <section> <aside>

Semantic Elements

FEATURES

6

<header>

<nav>

<footer>

div id = “content”

<article>

<article>

<article>

div id = “header”

div id = “side-bar”

div id= “footer”

div id = “content”

div class = “post”

div class = “post”

div class = “post”

<video><audio><canvas><nav><header><footer><time><summary><source><section><progress><output><meter><mark><keygen><hgroup><header><footer><figure><details><datalist><command>

<center>

<dir>

<font>

<frame>

<frameset>

<noframes>

<s>

<strike>

<tt>

<u>

<xmp>

<acronym>

<applet>

<basefont>

<big>

Referrence: http://www.w3schools.com/html5/html5_reference.asp

FEATURES

7

Semantic Elements - TagsIntroduced Dropped

FEATURES

HTML5 includes support for two new elements, <audio> and <video>, which allow Web developers to include multimedia content without relying on the user to have additional browser plug-ins installed.

Set of standard JavaScript APIs has been provided to allow developers to create their own playback controls

File formats supported by each browser and the patent licensing issues that go along with the various codecs that these files can be encoded with

9

Audio Video

FEATURES

Local storage APIs and offline applications support that will further bring Web applications in line with their desktop counterparts in terms of functionality, even when not connected to a network or the Internet.

Set of APIs allows developers to store information on the visitor's computer while remaining reasonably confident that they will still be there at a later date

The information is accessible at any point (even after the page has rendered) and is not loaded automatically with each HTTP request

Specification includes same-origin restrictions, which prevent Web sites from reading or changing data stored by other Web sites. We can just hope this is not hack able.

10

Local Storage

FEATURES

The element has been standardized and included in the HTML5 specification, along with a series of 2D drawing APIs that can be used to create shapes, text, transitions, and animations inside the element.

It facilitates the production of graphs, interactive games, paint applications, and other graphics on the fly without requiring external plug-ins such as Adobe Flash.

APIs allow the developer to draw shapes and lines; apply color, opacity, and gradients; create text; transform canvas objects; and perform animation

Allow the <canvas> to be interactive and respond to user input such as mouse events and key events, facilitating the production of games and Web applications on the canvas.

11

2D drawing API

FEATURES

Providing an external JavaScript library that provided UI, HTML5 aims to fill some of the gaps left by its predecessor in this space by providing a whole range of new form input types:

Color Date Datetime Datetime-local Email Month Number Range Search Tel Time URL Week

12

Rich Front End and Interactivity

Takeaway

HTML5 is scheduled to be released in 2022 with complete specifications but we are seeing the hype starting from 2010.

HTML5 specs are expected to simplify SEO and Web Analytics to a greater extent.

A bigger threat is faced by existing RIAs like Flash / Flex / SilverLight as rich interactions are introduced within the core markup language

Most browsers have already implemented HTML5 specs and are 90% feature compatible

Be prepared to see the basic web concepts change along with HTML.

13

Take Away

FEATURES

• ie.microsoft.com/testdrive/ • www.W3c.org (dev.w3.org/html5/spec/Overview.html)• www.Whatwg.org • www.wikipedia.org/wiki/HTML5

14

Références

Thank You!- Shivam