Html5 Introduction

HTML 5 – Introduction
HTML5 is here, and the Web will never be the same

Manoj Kumar
Sr. Technical Consultant
manoj.kumar@neudesic.com 29 Aug, 2011

The Trusted Technology Partner in Business Innovation
Products | Consulting Services | Managed Services

Agenda

• HTML5 Features: Main features it has and how are we going to cover them
in coming sessions

• HTML5 Semantic Markup

• HTML5 Audio and Video

• Next session sneak peek


What is exactly HTML5?

– HTML5 = HTML + CSS + JavaScript

– How developers use improved markup, richer style capabilities and new JavaScript APIs to
make the most of new Web development features?

– W3C: all 100-plus of these specifications under the moniker “HTML5”

– A unifying concept for that change

– So: HTML5 is about changes to HTML, CSS and JavaScript. Rather than worrying about all
100-plus specifications


Main Features
• HTML5 Semantic & Markup, Forms 2.0
• HTML5 Audio and Video Multimedia
• HTML5 Canvas
• Scalable Vector Graphics (SVG)
• HTML5 FileSystem APIs, Geolocation, Speech Input
• Web Storage, Microdata, Server-Sent Events
• Web Workers, Web Sockets, Notifications
• Cascading Style Sheets, Level 3 (CSS3): Media Queries,
2D/3D transforms, Grid System, Web fonts etc.
• ECMAScript5

HTML5 Semantics & Markup


HTML5 Semantics & Markup
• Not as XHTML, HTML5 has lots of flexibility and would support the
followings:
– Uppercase tag names.
– Quotes are optional for attributes.
– Attribute values are optional.
– Closing empty elements are optional.
• Some rules for HTML5 were established:
– New features should be based on HTML, CSS, DOM, and JavaScript
– Reduce the need for external plugins (like Flash)
– Better error handling
– More markup to replace scripting
– HTML5 should be device independent
– The development process should be visible to the public


Shorter Markups
Old way HTML5 way

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <!DOCTYPE html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <html lang="en">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8" />

<link rel="stylesheet" href="style-original.css" type="text/css" /> <link rel="stylesheet" href="style-
original.css" />

<script type="text/javascript" src="scriptfile.js"></script> <script src="scriptfile.js"></script>


HTML5 Semantics
– Elements, attributes, and attribute values in HTML : Have certain meanings (semantics).
For example, the ol element represents an ordered list, and the lang attribute represents
the language of the content.

– Correct HTML5 markup allow it to be used in wide variety of context.

– Simple example: Same Web page written by an author who only considered desktop
computer Web browsers can be viewed by a small browser on a mobile phone.
[Because HTML conveys meaning, rather than presentation]

– Authors must not use elements, attributes, or attribute values for purposes other than
their appropriate intended semantic purpose, as doing so prevents software from
correctly processing the page.


New Semantic Elements in HTML5
HTML5 is not just about making existing markup shorter.

<section> The section element represents a generic document or application section.
Examples: A Web site's home page could be split into sections for an introduction,
news items, contact information.
<div> vs semantic elements (???)

<nav> Represents a section of a page that links to other pages or to parts within the page:
— only sections that consist of major navigation blocks In particular

<article> A component of a page that consists of a self-contained composition in a document,
page, application, or site and that is intended to be independently reusable
Examples: Forum post, a magazine article, a user-submitted comment

<aside> A section of a page that consists of content that is tangentially related to the content
Examples: pull quotes or sidebars, for advertising, for groups of nav elements


New Semantic Elements in HTML5
<figure> and <figcaption> A unit of content, optionally with a caption, and that can be moved away
from the main flow of the document without affecting the document’s meaning.
<figure> vs <aside> : If the content is simply related and not essential, use <aside>.
If the content is essential but its position in the flow of content isn’t important, use <figure>.

<hgroup>Heading of a section. The element is used to group a set of h1–h6 elements when the heading
has multiple levels, such as subheadings, alternative titles, or taglines

<header>The header element represents a group of introductory or navigational aids.

<footer> The footer element represents a footer for its nearest ancestor sectioning content or
sectioning root element.

<time> The time element represents either a time on a 24 hour clock, or a precise date

<mark> The mark element represents a run of text in one document marked or highlighted for
reference purposes.


Semantic Elements and div: How to select?


New Semantic Elements in HTML5: Article
Scenario:

HTML5:


New Semantic Elements in HTML5: Dates and Times
Scenario:


New Semantic Elements in HTML5: Navigation
One of the most important parts of any web site is the navigation bar.
Scenario:

Use cases:
- Motion is limited: a browser add-on allows you to jump to (or jump past) major navigation links
- Sight is limited: Using “screenreader” to go thru the document (screenreader to jump over
the navigation bar and start reading the main content)
SO: Being able to determine navigation links programmatically is important


New Semantic Elements in HTML5: Footer
Scenario:

HTML5:

Contents: Its section such as who wrote it,
links to related documents, copyright data, and the like.
Fat footers: A rage these days


HTML5 Markup – Other enhancements
– Markup for applications: <datalist>, <progress>, <meter>, <details>, <summary>

– Descriptive link relation:


Semantics and Markup: Demo


HTML5 - Web Forms 2.0 : New input types

datetime year, month, day, hour, minute, second, fractions of a second. Encoded- ISO 8601. time zone-UTC.

datetime-local Same but with no time zone.
date date (year, month, day)
month date consisting of a year and a month
week date consisting of a year and a week number
time time (hour, minute, seconds, fractional seconds)
number only numerical value. The step attribute specifies the precision, defaulting to 1

range contain a value from a range of numbers
email accepts only email value. Format - email@example.com
url Should contain a URL address. Format- http://www.example.com or http://example.com


HTML5 - Web Forms 2.0: Other enhancements
– <output> element
– Attribute (**attribute is supported by latest versions of Mozilla, Safari and Crome browsers only)
• placeholder:
• autofocus
• required
– Custom Attributes
• A custom data attribute starts with data- and would be named based on your
requirement. Works with JavaScript APIs or CSS in similar way.

• Access:
– Dom: getAttribute("data-subject")
– Dataset: dataset.subject


Web Form: Demo


HTML5 Multimedia – Audio & Video


HTML5 - Audio
– No plugin (Even with plugin, not all browser has same plugin)
– Audio formats:
• Ogg
• Mp3
• Wav
– Example:

– Attributes: autoplay, controls, loop, preload, src

– Media Events (Audio+Video): abort, canplay, ended, error, loadeddata, loadstart, pause,
play, progress, ratechange, seeked, seeking, suspend, volumechange, waiting


HTML5 - Video
– No plugin required
– Video Formats
• Ogg : Ogg files with Theora video codec and Vorbis audio codec
• MPEG4 : MPEG 4 files with H.264 video codec and AAC audio codec
• WebM : WebM files with VP8 video codec and Vorbis audio codec
– Example:

– Attributes: audio, autoplay, controls, loop, poster, preload, src

– Video Support:


Audio & Video: Demo


HTML5 – Video codec support in browsers


Thank You
Manoj Kumar
manoj.kumar@neudesic.com


Html5 Introduction

Recommended

Recommended

More Related Content

What's hot

What's hot (9)

Similar to Html5 Introduction

Similar to Html5 Introduction (20)

More from Manoj Kumar

More from Manoj Kumar (9)

Recently uploaded

Recently uploaded (20)

Html5 Introduction