HTML5 Documentatie si Notite
Definire : <!DOCTYPE html>
Encoding: <meta charset="UTF-8">
Whats new!!!
New semantic elements like <header>, <footer>, <article>, and <section>.
New form controls like number, date, time, calendar, and range.
New graphic elements: <svg> and <canvas>.
New multimedia elements: <audio> and <video>.
All elements are considered as being displayed BLOCK.
header, section, footer, aside, nav, main, article, figure {
display: block;
}
IE Support with THE SHIV
<!--[if lt IE 9]>
<script src="[Link]
<![endif]-->
New Elements added :
<article>
Defines an article in the document
<aside>
Defines content aside from the page content
<dialog>
Defines a dialog box or window
<figcaption>
Defines a caption for a <figure> element
<figure>
Defines self-contained content, like illustrations, diagrams, photos, code
listings, etc.
<footer>
Defines a footer for the document or a section
<header>
Defines a header for the document or a section
<nav>
Defines navigation links in the document
<section>
Defines a section in the document
New Input Types
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
New Input Attributes
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step
HTML5 Semantics
A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <img> - Clearly defines its content.
With HTML5 elements like: <header> <footer> <nav> <section> <article>, this will become
easier for search engines to identify the correct web page content.
HTML5 API
1. HTML5 Geolocation
if ([Link]) {
[Link](showPosition);
} else {
browser.";
[Link] = "Geolocation is not supported by this
Main idea is to use getCurrentPosition() in order to get the position. You can pass a parameter
in the callback in order to be called when position is gathered with success.
Callback needs to be have a parameter called position -> there will be stored the position
(coordinates).
Position attributes :
Property
Description
[Link]
The latitude as a decimal number
[Link]
The longitude as a decimal number
[Link]
The accuracy of position
[Link]
The altitude in meters above the mean sea level
[Link]
The altitude accuracy of position
[Link]
The heading as degrees clockwise from North
[Link]
The speed in meters per second
timestamp
The date/time of the response
2.HTML5 Drag and Drop
Example of use case when you want to drag an image and drop it inside a div.
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
-
Make an element draggable use : draggable=true
Use ondragstart event and set the data type and value for dragged data
[Link](text, [Link]). In this case data type is text and value is
the id of dragged element
- The ondragover event specifies where the dragged data can be dropped. To
allow a drop, first you need to preventDefault behaviour like [Link]();.
- Use ondrop event and get the data type and value. [Link]()
3. HTML5 Web Storage.
With local storage, web applications can store data locally within the user's browser.
Before HTML5, application data had to be stored in cookies, included in every server request.
Local storage is more secure, and large amounts of data can be stored locally, without affecting
website performance.
Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred
to the server.
HTML local storage provides two objects for storing data on the client:
[Link] - stores data with no expiration date
[Link] - stores data for one session (data is lost when the tab is
closed)
// Store
[Link] = "Smith";
// Retrieve
[Link]("result").innerHTML = [Link];
4. HTML5 Caching
Application cache gives an application three advantages:
1. Offline browsing - users can use the application when they're offline
2. Speed - cached resources load faster
3. Reduced server load - the browser will only download updated/changed
resources from the server
<!DOCTYPE HTML>
<html manifest="[Link]">
File [Link] is explained below :
The manifest file has three sections:
CACHE MANIFEST - Files listed under this header will be cached after they are
downloaded for the first time
NETWORK - Files listed under this header require a connection to the server,
and will never be cached
FALLBACK - Files listed under this header specifies fallback pages if a page is
inaccessible
CACHE MANIFEST
The first line, CACHE MANIFEST, is required:
CACHE MANIFEST
/[Link]
/[Link]
/[Link]
Updating the Cache
Once an application is cached, it remains cached until one of the following happens:
The user clears the browser's cache
The manifest file is modified (see tip below)
The application cache is programmatically updated
5.HTML5 Web Workers.
w = new Worker("demo_workers.js");
Add an "onmessage" event listener to the web worker.
[Link] = function(event){
[Link]("result").innerHTML = [Link];
};
[Link](); - terminate a Worker.
w = undefined; - reuse the Worker.