html5 - quick guide

10
HTML5 is the latest evolution of the standard that defines HTML.

Upload: bhaumik-patel

Post on 19-Jul-2015

80 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: HTML5 - Quick Guide

HTML5 is the latest evolution of the standard that defines HTML.

Page 2: HTML5 - Quick Guide

HTML5 is the newest hyper text markup language for websites from the World Wide Web Consortium (W3C). The first draft was made public in 2008, but not much happened until 2011. In 2011, HTML5 was released and people started writing about it and using it, but the support in different browsers was still poor. Today all major browsers (Chrome, Safari, Firefox, Opera, IE) offer HTML5 support, therefore the newest HTML technology can be used at its best today.

Page 3: HTML5 - Quick Guide

New Semantic/Structural Elements

New Form Elements

New Input Types

HTML5 - New Attribute Syntax

HTML5 Graphics

New Media Elements

Page 4: HTML5 - Quick Guide

Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer.

HTML5 offers new semantic elements to define different parts of a web page:

<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>

Page 5: HTML5 - Quick Guide

HTML5 added the following form elements:<datalist>The <datalist> element specifies a list of pre-defined options for an <input> element.Users will see a drop-down list of pre-defined options as they input data.

<keygen>The purpose of the <keygen> element is to provide a secure way to authenticate users.The <keygen> element specifies a key-pair generator field in a form.

<output>The <output> element represents the result of a calculation (like one performed by a script).

Page 6: HTML5 - Quick Guide

New Input Types

color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week

autocomplete

autofocus

form

formaction

formenctype

formmethod

formnovalidate

formtarget

height and width

list

min and max

multiple

pattern (regexp)

placeholder

required

step

New Input Attributes

Page 7: HTML5 - Quick Guide

HTML5 allows four different syntaxes for attributes.

This example demonstrates the different syntaxes used in an <input> tag:

Type Example

Empty <input type="text" value="John" disabled>

Unquoted <input type="text" value=John>

Double-quoted <input type="text" value="John Doe">

Single-quoted <input type="text" value='John Doe'>

Page 8: HTML5 - Quick Guide

Tag Description

<canvas> Defines graphic drawing using JavaScript

<svg> Defines graphic drawing using SVG

What is HTML Canvas?The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).

The HTML <svg> ElementThe HTML <svg> element (introduced in HTML5) is a container for SVG graphics.SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

Page 9: HTML5 - Quick Guide

Tag Description

<audio> Defines sound or music content

<embed> Defines containers for external applications (like plug-ins)

<source> Defines sources for <video> and <audio>

<track> Defines tracks for <video> and <audio>

<video> Defines video or movie content

Page 10: HTML5 - Quick Guide

https://html5test.com/

http://caniuse.com/

http://html5please.com/

http://mobilehtml5.org/