HTML5 is a language for structuring and presenting content for the World Wide Web. it is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997) and as of February 2012 is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). It improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors
2. INTRODUCTION
HTML5 is the new standard for HTML.
HTML5 is still a work in progress
HTML5 is a cooperation between the World Wide Web Consortium (W3C)
and the Web Hypertext Application Technology Working Group
(WHATWG).
New features of HTML5 are based on HTML, CSS, DOM, and JavaScript.
Reduce the need for external plugins (like Flash)
3. HTML5 New Input Types
color
Your favorite color: <input type="color" name="favcolor" />
date
datetime
datetime-local
Email
E-mail: <input type="email" name="usremail" />
month
number
range
search
Tel
Telephone: <input type="tel" name="usrtel" />
time
url
4. HTML5 New Form Elements
<datalist>
The list is created with <option> elements inside the <datalist>.
The <datalist> element specifies a list of options for an input field.
<form action="demoform.html" method="get">
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>
12. <details>
The open attribute is a boolean attribute.
When present, it specifies that the details should be visible (open) to the
user.
<details open="open">
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
14. <select>
New Attributes
1) Autofocus: It specifies that the drop-down list should automatically get focus
when the page loads.
2) Form:
<form action="demo_form.asp" id="carform">
Firstname:<input type="text" name="fname" /><br />
<input type="submit" />
</form>
<select name="carlist" form="carform">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
16. <nav>: It defines a section of navigation links.
<nav>
<a href="/html/">HTML</a> |
<a href="/html5/">HTML5</a> |
<a href="/css/">CSS</a> |
<a href="/css3/">CSS3</a> |
<a href="/js/">JavaScript</a>
</nav>
17. <html> manifest Attribute
Advatages:
1) Offline browsing
2) Increased Speed
3) Reduced server load
<!DOCTYPE HTML>
<html manifest=" demo_html.manifest ">
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
18. Example of manifest file
CACHE MANIFEST
index.html
theme.css
images/logo.png
scripts/main.js
NETWORK:
server.cgi
FALLBACK:
/offline.htm
19. <progress>
The <progress> tag represents the progress of a task.
The <progress> tag is currently supported in Firefox, Opera, and Chrome.
<progress value="22" max="100"></progress>
Attributes:-
1) max:- Specifies how much work the task requires in total.
2) value:- Specifies how much of the task has been completed.
20. <iframe>
The <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML
document.
<iframe src="http://www.w3schools.com"></iframe>
New attributes:-
1) Sandbox
2) Seamless
3) srcdoc
21. HTML5 Web Storage
=>HTML5 offers two new objects for storing data on the client:
localStorage - stores data with no time limit
SessionStorage - stores data for one session
HTML5 uses JavaScript to store and access the data.
22. The local Storage Object
The localStorage object stores the data with no time limit.
Included in MySQL binary distributions (except on Windows), invoke
configure with the --with-csv-storage-engine option to enable it.
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
23. The sessionStorage Object
The sessionStorage object stores the data for one session. The data is
deleted when the user closes the browser window.
How to create and access a sessionStorage:
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>