HTML 5

An Introduction

Text

Replaces everything that come before (HTML4 & XHTML 1.0)
Replacement of DOM2HTML (DOM)
No longer looking at DOM, but a Number of API's

DOCTYPE

<! DOCTYPE HTML>

Its the shortest notation to put the browser in the standards mode
No DTD
No Version Number
Stick to uppercase 'DOCTYPE'

This is Valid HTML5

<!DOCTYPE html>
<meta charset-UTF-8>
<title>Page Title</title>
<p>Look at my Sloppy Code!</p>

WTF?

Where's the html, head & body tag?

No Need of these old tags in HTML5
You know what!! Browsers simply doesn't care about this tags

HTML5 Elements

The new Kids in town

HTML5 Elements

For Better Structure

Represents a generic section of a document or application
Thematic grouping of contents, typically with a Heading.

a self-contained composition in a document, page, application, or site
For example, A forum's post, a magazine or a newspaper article etc.

<nav>

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links
Only sections that consists of major navigation blocks are appropriate for the nav element.

Represents the 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 and taglines.

Represents a group of introductory and navigational aids
Is intend to usually contain the section's heading an h1-h6 element or an hgroup element, but this is not required
Can also be used as wrap section's table of contents, a search form, or any relevant logos

Represents a footer for its different ancestor sectioning content or sectioning the root element
Typically contains information about its section such as who wrote it, links to related documents, copyright data etc.
Footer doesn't have to necessarily have to appear at the end of the section, though they usually do

Represents the contact information for its nearest article or body element ancestor
Must not be used to represent arbitrary addresses (e.g. postal addresses)
Typically, it would be included along with other information in a footer element

Represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document
can be used to annotate diagrams, illustrations, photos etc.

Represents a caption or legend for the rest of the contents of the figcaption element's parent figure element, if any

<small>

represents the side elements such as small print
small prints typically features disclaimers, legal restrictions, or copyrights. Small print is also some times used for attribution, or for satisfying licensing requirements
intended for only short run of text

<cite>

represents the title of a work
this can be a work that is being quoted or referenced in details
A person's name is not a title of a work and the element must therefore not be used to mark up people's names

HTML5 Elements

For other purposes

Represents either a time on a 24 hour clock or a precise date
Way to encode modern date and time in a machine readable way

the datetime attribute, if represents gives the date or time being specified
the pubdate attribute is a boolean attribute

<time datetime="2015-03-25">March 25</time>
<p>I usually have a snack at 
<time>16:00</time>.</p>

<article>
    <h1>Small Tasks</h1>
    <footer>
        published <time pubdate>2009-08-30</time>
    </footer>
    <p>I put a bike bell on his bike.</p>
</article>

<mark>

represents a run of text in one document marked or highlighted for reference purpose
Can for example be used to highlight words that match some search string

A resolution dependent bitmap canvas
Basically a rectangle in your page where you can use JavaScript to draw anything you want
Can be used for rendering graphs, game graphics or other visual elements on the fly
Has two attributes: width and height

<canvas width="400" height="150"></canvas>

< ! - - provide alternative contents - - >
<canvas id="clock" width="150" height="150">
    <img src="img/clock.png" width="150" height="150" alt="clock">
</canvas>

//Reference the canvas object
var canvas = document.getElementByID ('clock');

//check for support
if (canvas.getContext)
{
    //Get the context
    var context = canvas.getContext ('2d');
}

<!DOCTYPE html>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>

Video in HTML5

It's rather complicated

<video>

For embedding video into a webpage
one <video> element can link to multiple video files, the browser will choose the first video that it will actually play

<video>

<!DOCTYPE html>

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

The benefits of specifying the type attribute is that the browser will check it first
If the browser decides it can't play a particular video, it won't download the file

<video>

<!--Basic Embedding-->
<video src="somefile.ogv"></video>

<!--Specify video dimensions and enable controls-->
<video src="somefile.ogv" height="240" width="400" controls></video>

<!--Video will start downloading (but not playing) as soon as the page loads-->
<video src="somefile.ogv" height="240" width="400" preload></video>

<!--Enable Autoplay-->
<video src="somefile.ogv" height="240" width="400" autoplay></video>

HTML5 Forms

Whassup with that??

New Input Types

Backwards Compatible

Tells the browser not to submit the form until & unless the user has given a valid email address

Multiple attribute is allowed, which means the field can be filled up by comma seperated valid email address

To ensure the browser that the entered field is a correct URL
Browser may offer the user assistance and show a list of recently visited URLs

Dates were tricky for a user to enter and therefore we relied on JavaScript solution for solutions for displaying a datepicker
Browsers will display a popup calendar widget
Browser will now also know what you mean. Previously, datepickers were just a collection of <div>s, <span>s, and links with lots of JavaScript behavior attached

Date / time related input types

<!--for calendar date pickers-->
<input type="date">

<!--for months-->
<input type="month">

<!--for weeks-->
<input type="week">

<!--for timestamps-->
<input type="timestamps">

<!--for precise/absolute date, timestamps-->
<input type="datetime">

<!--for local dates and times-->
<input type="datetime-local">

Throws an error if the user doesn't enter a numeric value

Works with min, max and step attributes

Browsers (such as Opera) can render it as a Spinner control

Renders as a slider

Used to be Javascript driven elements, but now the responsibility of creating accessible sliders is moved from developers to browsers vendors.

Expects a telephone number

Doesn't enforce numeric only input

Allows the user to input a color value via a picker

Current support is very limited

New Attributes

To spice your elements

The list Attribute

Hooks up with a new element <datalist>
Reminiscent of a select box but user can input own values
The id of the <datalist> is referenced in the value of the list attribute

The list Attribute

<input id="salutation" type="text" list="salutation">

<datalist id="salutations">
    <option label="Mr" value="Mr">
    <option label="Ms" value="Ms">
    <option label="Prof" value="Professor">
</datalist>

So, When Can We Start Using

HTML5?

TODAY!!!

Interesting Websites

The End

Questions?

@technoayan