Вы находитесь на странице: 1из 71

..................................................................................................................

HTML5 -..............................................................5

............................................................................................................. 5

1. ..................................................................................6

IETF W3C: HTML 4............................................................................. 6

XHTML 1: HTML XML.........................................................................6

XHTML 2: .......................................................................7

: WHATWG TF?............................................................................................. 7

- 1.0 HTML5..........................................................................8

......................................................................................................... 8

XHTML : XHTML..................................................9

HTML5..................................................................................................... 9

2. HTML5.............................................................................................. 11

......................................................................................... 11

............................................................................................ 11

.............................................................................................. 12

, , ?...........................................................12

....................................................................................................... 13

: , ...................................................................14

................................................................................... 15

, .................................................................16

, !..............................................................................17

............................................................................................ 17

a ..................................................................................18

! API JavaScript............................................................................19

3. ...................................................................................................... 20

Canvas.................................................................................................................. 20

: ..........................22
Canvas. ! ?.................................................................22

............................................................................................. 23

Canvas................................................................................................... 24

Audio..................................................................................................................... 26

- ............................................................................ 27

.................................................................................................... 28

, , ............................................29

............................................................................................ 30

....................................................................................... 31

Video..................................................................................................................... 32

.............................................................................................. 34

4. - 2.0.................................................................................................... 35

Placeholder........................................................................................................... 35

Autofocus.............................................................................................................. 36

Required................................................................................................................ 37

Autocomplete........................................................................................................ 38

Datalist.................................................................................................................. 38

................................................................................................ 40

................................................................................................................. 40

........................................................................................................... 40

........................................................................................................... 41

........................................................................................................... 42

........................................................................................................... 43

.................................................................................................... 43

...................................................................................................... 45

....................................................................................................... 45

........................................................................................ 46

5. ........................................................................................................... 47

.................................................................................................... 47
................................................................................................. 47

............................................................................................. 48

.................................................................................................. 49

mark................................................................................................................... 49

time.................................................................................................................... 50

meter................................................................................................................. 51

progress............................................................................................................. 51

............................................................................................................ 51

section............................................................................................................... 52

header................................................................................................................ 52

footer................................................................................................................. 53

aside.................................................................................................................. 53

nav..................................................................................................................... 54

article................................................................................................................. 54

?.........................................................................56

.......................................................................................... 57

, ...........................................................57

..................................................................................... 60

hgroup................................................................................................................ 61

........................................................................62

................................................................................................. 62

.............................................................................................. 63

6. HTML5 ............................................................................65

.................................................................................................................... 65

......................................................................................................... 65

Aria........................................................................................................................ 66

............................................................................................................ 67

....................................................................................... 67

....................................................................68
............................................................................................................. 68

!....................................................................................................... 69

............................................................................................................... 69

................................................................................................................ 71

HTML5 -

- A Book
Apart, ,
, .

, , CSS3,
, , , HTML5.
, -
W3C, ,
( ), ,
-.

HTML5 ,
/,
.
DOM JavaScript ,
, .

HTML5 , .
,
HTML5.
,
, !
.

, ,
, -,
.
HTML5. ,
A Book Apart, , ,
.


1.
HTML . ,
,
, Amazon, eBay Wikipedia
, , .

HTML5 -,
, HTML .
.

, (HyperText Markup Language, HTML)


-, 1991
HTML Tags, 20 ,
-.

, ;
SGML (Standard Generalized Markup Language,
). ,
,
, , HTML5.

IETF W3C: HTML 4

, HTML 1, .
HTML 2.0, IETF ( , Internet Engineering Task
Force). ,
. , - Mosaic
1994 -
<img>. img HTML 2.0.

IETF W3C, (World Wide Web


Consortium), HTML
http://www.w3.org.
, 1999 HTML
4.01.

HTML .

XHTML 1: HTML XML

HTML 4.01 XHTML 1.0. X


, -, ,
.

, . X eXtensible, , ,
, .
XHTML 1.0
HTML 4.01. .
. HTML
, , XHTML XML,
, W3C
.

. ,
.
,
, XHTML 1.0 ,
, .

XHTML 1.0 CSS .


- -
( Web Standards Project), XHTML
.

W3C XHTML 1.1.

XHTML 1.0 HTML, XML,


XHTML 1.1 XML, . ,
MIME- text/html.
MIME- XML, Internet
Explorer .

, W3C ,
.

XHTML 2:

-,
W3C , : XML.

W3C HTML 4.
XHTML 2, , ,
XML .

XHTML 2 XHTML 1,
. XHTML 1, XHTML 2
-
HTML. ,
.

.
: WHATWG TF?

W3C . ,
, -.
Opera, Apple Mozilla .
, , -
.

2004 . (Ian Hickson),


Opera Software, HTML
-. .

:
(Web Hypertext Application Technology
Working Group, WHATWG).

- 1.0 HTML5

WHATWG , W3C. W3C


, : , ,
. WHATWG ,
, , ,
.

W3C .

. WHATWG, ,
, .
:
,
.

WHATWG : -
(Web Forms 2.0) - (Web Apps 1.0).
HTML. ,
HTML5.

WHATWG HTML5, W3C


XHTML 2. , . -
.

2006 - , ,
HTML XML .
W3C HTML.
, ,
HTML WHATWG.

. ,
W3C , :
XHTML 2 HTML 5 ( ).
, WHATWG, HTML5
( ),
W3C!

-, ,
, ,
, .

XHTML : XHTML

2009 . W3C , XHTML


2 . ,
.

, XHTML 2 . , XML
,
, - XHTML 1, , XHTML 1
XHTML 2 .

, XHTML 1 ,
, , HTML5
.

, . HTML5 ,
.

HTML5

HTML5 , -,
.

HTML5 . WHATWG HTML5


, . HTML W3C
, .
, . , ,

? ( , , HTML5 .)

, -,
HTML5, ?

, , HTML5
1 2022 .
-. , ,
, ,
2022 .

1
, W3C, .:
http://ru.wikipedia.org/wiki/_W3C. . .
.
, HTML5.
, . ,
. Internet Explorer
, -
abbr.

, HTML5, 2012 .
.
.

-. ,
HTML5.
CSS 2.1,
. , CSS 2.1,
, .

HTML5 . ,
, . ,
, - .

, HTML5 , . ,
.
HTML, HTML5.
2. HTML5

. .

: , .
, .

. .
XHTML 2. W3C :
.

WHATWG, ,
HTML5. :
. , HTML5 .

XHTML 2 , , HTML5
. HTML 4.01
HTML5.

, , :
-
,
HTML5. -:
, .

, -
(http://microformats.org). HTML5-
:
, - .

,
, :
, ,
, .

, ,
HTML5, , . -
- ,
,
. (-)
. - ,
.

HTML5 .
, ,
-. , HTML5
,
.
, , XHTML 2.
, ,
<font>
-.

, ,
.

HTML5 , ,
. HTML
, ,
.

, ,
. , -
,
. .
, ,
, .

, , HTML5
. HTML5 HTML 4.01,
,
, 2012 , .

, - -,
,
, .
, HTML5 ,
. , .
, HTML5
, , , ,
, .

, , ?

, , ,
, .

HTML 4.01 ( ):
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML
4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0:

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict


//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

, - :
HTML 4.01 XHTML 1.0.

, , ,
HTML5, - . . HTML5 :

<!DOCTYPE html>

, .

! ,
HTML?

HTML5, , .
, ,
, ?

, , .

, , HTML5 . HTML5
,
HTML 4.01 XHTML 1.0. HTML
, HTML5,

.

. ,
HTML 4.01.
, HTML 3.2 HTML5,
. , .

, .
, - ,
, ,
(quirks mode)
.

, ,
, HTML5.
- . HTML-
HTML5 HTML5.

, HTML5.
,
, HTTP- Content-
Type. ,
<meta>. meta ,
HTML 4.01:

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

HTML5:

<meta charset="UTF-8">

,
, .

<script> , .
script type
"text/javascript":

<script type="text/javascript" src="/storage/public/books/c3/f0/c3f0bf21-


f7c0-4c8e-a8c5-58aa37eb5140/file.js"></script>

. ,
JavaScript, (
):

<script src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/file.js"></script>

type "text/css" ,
CSS-:

<link rel="stylesheet" type="text/css" href="file.css">

<link rel="stylesheet" href="file.css">

: ,

, Python,
.
. (,
JavaScript)
, .

,
: .
, .

:

, ?
.
, , ,
. , ,
. ,
.

XHTML 1.0 ,
. , .
, .

XHTML 1.0 XML.


. .
.

, br,
: <br/>.

HTML5 . , , , ,
.

XHTML 1.0 . ,
- , , W3C
. , HTML5,
, .

,
HTML5. , ,
. , HTML5
. , , ,
. , ,
, ,
, - .

HTML5. ,
, .
, ,
.
, .
,
; ,
.

, -
.

HTML,
, (deprecation). -
,
.
HTML5 .
.

, .
, .

HTML5 ,
,
HTML5. ,
, , ,
. ,
, ,
.

,
, : -
, -.

,
. ,
, , ,
.

frame, frameset noframes.

acronym, ,
:

2. acronym
abbr. , , :
(: , ),
: , .

, , font, big, center


strike, HTML5.
:
CSS-: , font-size text-align.
, : bgcolor, cellspacing, cellpadding valign,
. CSS.
2
,
, ,
(: ,
?). ,
,
:
, ? ,
( )
XIV . . .
, , .
,
.

, !

big , small .
, ,
. ,
: .
: , ,
.

,
, ,
.

b : .
, ,
.
, , strong.

i .
,
. ,
. , , em.

. ,
, , HTML5 .
, ,
, .
,
, : , , .

.

HTML5 cite.
, , .
(, ),
. HTML5
cite. ,
.

:
<cite> ; 3, ,
, cite , .
3
.
( , ) . .
.
. , HTML5
, ,
.

, ,
<cite> , , -
, cite ,
.


, HTML5 .

a, , HTML.
. .

a (inline) .
, a:

<h2><a href="/about"> </a></h2>

<p><a href="/about">, .</a></p>

HTML5 a:

<a href="/about">

<h2> </h2>

<p>, .</p>

</a>

a a.

, a
, ,
.
, HTML5
.

: ,
? :
, .

! API JavaScript

CSS,
CSS. , HTML.
API JavaScript, document.write,
innerHTML window.history? JavaScript
API.

API JavaScript
, , ,
. HTML5 API ,
.

, JavaScript ,
, HTML5 -
(Web Apps 1.0). JavaScript -.

HTML5 API -
. , , (UndoManager),
.
- .
.

, , ,
. Internet Explorer API
,
HTML5. , API Microsoft .
, ,
.

API HTML5 . .
, . API
, .

HTML5 , , -
, . .
3.
.
HTML img, .
JavaScript . ,
Ajax- ,
.

- ,
HTML, CSS JavaScript.

- .
, , HTML CSS.
, , , ,
Flash Silverlight.

( )
: .
-, .
. ,
.

Flash , , ,
. ,
- .

HTML5 . ,
(, Flash Silverlight).
, - HTML5
.

Canvas

Mosaic - ,
.
. .
JavaScript. .
, .

canvas .

. , ,
:

<canvas id="my-first-canvas" width="360" height="240">

</canvas>

- ,
, Canvas (. 3.01):
<canvas id="my-first-canvas" width="360" height="240">

<p> canvas? ,-:</p>

<img src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/puppy.jpg" alt=" ">

</canvas>

canvas? :

. 3.01. , canvas,

JavaScript. ,
Canvas .
API. :

var canvas = document.getElementById(my-first-canvas);

var context = canvas.getContext(2d);

canvas,
API, HTML5 : http://bkaprt.com/html5/.4

2D API ,
(, Adobe Illustrator), , , , ,

4
: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-
canvas-element.html
, . ,
, JavaScript.

, :

context.strokeStyle = #990000;

, , . ,
, :

strokeRect (left, top, width, height)

10050 ,
20 30 canvas,
(. 3.02):

context.strokeRect(20,30,100,50);

. 2D API : fillStyle,
fillRect, lineWidth, shadowColor .

. 3.02. , canvas

, ,
Illustrator, canvas.
, , JavaScript.
Canvas .

Canvas. ! ?

JavaScript Canvas
, , ?
Canvas ,
,
. ,
, ,
, Flash.

Canvas
Mozilla Labs. Bespin (https://bespin.mozilla.com) ,
(. 3.03).

. . , Canvas
.

. 3.03. Bespin, Canvas

. Bespin
canvas ; ,
.

(Document Object
Model, DOM). DOM ,
, .
canvas DOM. , canvas,
.
, ,
, .
DOM .

Canvas
HTML5. ,
,
(http://bkaprt.com/html5/2)5.

Canvas , , -
. , ,
Canvas HTML5.

Canvas

,
, Canvas -.
.

JavaScript,
, . ,
JavaScript, ,
, JavaScript.

, JavaScript,
Canvas. Canvas ,
, .

, . ,
. ,
, Google Chart API.
, ,
, Canvas ,
. , ,
canvas, table.

Filament Group jQuery-


(. 3.04; http://bkaprt.com/html5/3)6.

5
: http://www.w3.org/Wai/pf/html-task-force
6
:
http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5
_from_designing_with/
. 3.04. Canvas ,

. Canvas API
. SVG (Scalable Vector Graphics, ) XML-
, , Canvas.

XML , SVG
, .

SVG ,
Canvas. Canvas ,
. Safari, Firefox, Opera Chrome Canvas.
JavaScript-, Canvas Internet Explorer
(http://bkaprt.com/html5/4)7.

WHATWG
, ,
Canvas HTML5, SVG. ,
HTML5 , . canvas
HTML5; Apple Safari.
, Apple, ,
.

- , -.
, XX Microsoft XMLHttpRequest Internet
Explorer 5.

, W3C
.

- Canvas
.
, .

7
: http://code.google.com/p/explorercanvas/
Audio

, , - .
, , .

. : QuickTime, Windows Media
Player, Real Audio, , -
- .

MP3.
,
. Flash.

, , HTML5.

HTML5- :

<audio src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/witchitalineman.mp3">

</audio>

, .
, audio.

, ,
. , ,
, .
autoplay .

<audio src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/witchitalineman.mp3" autoplay>

</audio>

- autoplay, : .

, autoplay .
, , 8.

: ,
; , ;
(true), (false).

. ,
, true false.
: .
, .
autoplay="false" autoplay="no thanks" , autoplay.

8
(18151864) ,
1849 . . .
XHTML, autoplay="autoplay".

.


, ,
. , loop,
:

<audio src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/witchitalineman.mp3" autoplay loop>

</audio>

loop autoplay
.

audio , .
,
controls:

<audio src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/witchitalineman.mp3" controls>

</audio>

controls
, ,
(. 3.05).

. 3.05. controls, ,

,
. JavaScript Audio API,
(play pause) (volume .).
, button ,
(. 3.06):

<audio id="player" src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-


58aa37eb5140/witchitalineman.mp3">

</audio>

<div>

<buttononclick="document.getElementById(player). play()">

</button>
<buttononclick="document.getElementById(player). pause()">

</button>

<buttononclick="document.getElementById(player). volume+= 0.1">

</button>

<buttononclick="document.getElementById(player). volume-= 0.1">

</button>

</div>

. 3.06. (, , , ), button

- HTML5
audio. autobuffer
autoplay. ,
, -
,
.

, , , Safari .
,
autobuffer . , - , autobuffer ,
Safari, :
autobuffer="false" , autobuffer="true"
(http://bkaprt.com/html5/5)9.

autobuffer preload. .
: none, auto metadata.
preload="none", ,
:

<audio src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/witchitalineman.mp3" controls preload="none">

</audio>

audio, ,
preload="auto", audio , -
- .

9
: https://bugs.webkit.org/show_bug.cgi?id=25267
, ,

audio . - , ?
.

audio .
.

MP3 , . - ,
, MP3,
. Apple Adobe ,
- . Safari
MP3-, a Firefox .

. Vorbis
.ogg . Firefox Ogg Vorbis,
Safari .

, audio, 10
. src
<audio>, source:

<audio controls>

<source src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/witchitalineman.ogg">

<source src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/witchitalineman.mp3">

</audio>

, Ogg Vorbis,
source. , MP3,
Ogg Vorbis, source
source.

MIME- :

<audio controls>

<source src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/witchitalineman.ogg" type="audio/ogg">

<source src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/witchitalineman.mp3" type="audio/mpeg">

</audio>

10
(Sophies Choice, 1982 ) ( ,
), ,
, ,
( ). . .
source ( ) ,
XHTML,
<source />.

source . ,
audio . ,
?

Internet Explorer , ,
Flash. audio . ,
<audio>
source , audio:

<audio controls>

<source src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/witchitalineman.ogg type="audio/ogg">

<source src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/witchitalineman.mp3 type="audio/mpeg">

<object type="application/x-shockwave-flash"data="player.swf?
soundFile=witchitalineman.mp3">

<param name="movie"value="player.swf?soundFile=witchitalineman.mp3">

</object>

</audio>

object ,
audio.

. object, ,
. , ,
, :

<audio controls>

<source src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/witchitalineman.ogg" type="audio/ogg">

<source src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/witchitalineman.mp3" type="audio/mpeg">

<object type="application/x-shockwave-flash"data="player.swf?
soundFile=witchitalineman.mp3">

<param name="movie"value="player.swf?soundFile=witchitalineman.mp3">

<a href="witchitalineman.mp3"> </a>

</object>
</audio>

1. audio Ogg Vorbis.

2. audio MP3.

3. audio, Flash-.

4. audio, Flash-.

audio
. ,
.

, .
:

<audio controls>

<source src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/witchitalineman.ogg" type="audio/ogg">

<source src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/witchitalineman.mp3" type="audio/mpeg">

<p>I am a lineman for the county</p>

</audio>

,
audio.
. ,

?

<audio controls>

<source src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/witchitalineman.ogg" type="audio/ogg">

<source src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/witchitalineman.mp3" type="audio/mpeg">

</audio>

<p>I am a lineman for the county</p>


Video

,
-
. - ,
.
Flash-. HTML5 .

video , audio.
autoplay, loop preload.
src video, source,
<video>.
controls
.

,
, , ,
:

<video src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/movie.mp4" controls width="360" height="240">

</video>

,
, poster (. 3.07):

<video src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/movie.mp4" controls width="360"height="240"
poster="placeholder.jpg">

</video>
. 3.07. poster -

,
. MP4 Theora
Video ( ).
, , HTML5 video :

<video controls width="360" height="240"poster="placeholder.jpg">

<source src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/movie.ogv" type="video/ogg">

<source src="/storage/public/books/c3/f0/c3f0bf21-f7c0-4c8e-a8c5-
58aa37eb5140/movie.mp4" type="video/mp4">

<object type="application/x-shockwave-flash"width="360"
height="240"data="player.swf?file=movie.mp4">

<param name="movie"value="player.swf?file=movie.mp4">

<a href="movie.mp4"> </a>

</object>

</video>

HTML5
, . ,
.

- ,
HTML img. , ,
Google, . ,
YouTube, : http://youtube.com/html5.

,
, .
- HTML
JavaScript CSS. video
JavaScript, (. 3.08).

. 3.08. video

- .

HTML5, ,
.
. 4 , HTML5
.
4. - 2.0
- JavaScript,
: . CSS
:hover, -
JavaScript , .

. -
, ,
, . CSS3
,
JavaScript.

, CSS .
HTML5.
, HTML5 .

WHATWG, -
2.0 W3C.
HTML5.

Placeholder

,
DOM:

1. , -.

2. , -.

3. - ,
-.

- ,
. CSS, JavaScript
.

HTML5 placeholder (. 4.01):

<label for="hobbies"> </label>

<input id="hobbies" name="hobbies" type="text"placeholder="


">

. 4.01. input placeholder


placeholder , , ,
, - . ,
, .

.
, .

JavaScript.
, JavaScript ,
placeholder.

JavaScript- , ,
:

function elementSupportsAttribute(element,attribute) {

var test = document.createElement(element);

if (attribute in test) {

return true;

} else {

return false;

: ( ),
, ,
, . true false.

, JavaScript-
, placeholder:

if (!elementSupportsAttribute('input','placeholder')) {

// JavaScript.

Autofocus

! . , : Google:
Twitter: ?

,
JavaScript:

1. ,
.
HTML5 autofocus:

<label for="status"> ?</label>

<input id="status" name="status" type="text" autofocus>

.
, , .
, Twitter, , , ,
, .

, autofocus HTML5
, :
. ,
. , ,
.

, , ,
,
.
, HTML5
.
JavaScript JavaScript . , , ,
, , , ,
.

placeholder, ,
autofocus, , , JavaScript:

if (!elementSupportsAttribute('input','autofocus')){

document.getElementById('status'). focus();

autofocus input;
, , textarea select,
.

Required

JavaScript
. HTML5 JavaScript .
required:

<label for="pass"> </label>

<input id="pass" name="pass" type="password" required>

,
. , ,
required , JavaScript.

class="required",
required.

Autocomplete

-.
, ,
, .
. ,
. ,
, , , ,
, , .

HTML5 -
. autocomplete ,
: on off :

<form action="/selfdestruct" autocomplete="off">

, autocomplete on,
.

, ,
. , ,
- , :

<input type="text" name="onetimetoken" autocomplete="off">

JavaScript ,
autocomplete, . HTML5
, JavaScript.


HTML5. HTML5 ,
, .
,
,
.

Datalist

datalist input
select. list
(. 4.02):

<label for="homeworld"> </label>

<input type="text" name="homeworld" id="homeworld"list="planets">

<datalist id="planets">

<option value="">
<option value="">

<option value="">

<option value="">

<option value="">

<option value="">

<option value="">

<option value="">

</datalist>

. 4.02. datalist

,
. ,
, : ,
, (. 4.03).
. 4.03. datalist: , ,

datalist , .
datalist, .

HTML5 type input.


, ,
.

input search type ,


text type:

<label for="query"></label>

<input id="query" name="query" type="search">

text search ,
,
. Safari (. 4.04).

. 4.04. Safari Mac OS

HTML5 type : e-mail-


, - :
<label for="email">Email-</label>

<input id="email" name="email" type="email">

<label for="website"></label>

<input id="website" name="website" type="url">

<label for="phone"></label>

<input id="phone" name="phone" type="tel">

, ,
, .

Safari , ,
-
type="text". ,
Mobile Safari, .
type (. 4.05).

, Webkit, .

. 4.05. Mobile Safari type

JavaScript- ,
-. JavaScript.
, JavaScript-
, .

. JavaScript
, - . HTML5
type="range" ,
:
<label for="amount"> ?</label>

<input id="amount" name="amount" type="range">

Safari Opera ,
(. 4.06).

. 4.06. range Safari Opera

.
min
max:

<label for="rating"> </label>

<input id="rating" name="rating" type="range" min="1" max="5">

Safari Opera ;
. , , , , ,
JavaScript ,
type="range".

, ,
, .
input. type
, .

type, text,
, , .

, , -
:

function inputSupportsType(test) {

var input = document.createElement('input');

input.setAttribute('type',test);

if (input.type == 'text') {

return false;

} else {

return true;
}

, , JavaScript-widget
,
:

if (!inputSupportsType(range)) {

// JavaScript.

, , ,
JavaScript, , DOM.

, , JavaScript,
range Safari !

range
.
. .
, .
type="number":

<label for="amount"> ?</label>

<input id="amount" name="amount" type="number" min="5" max="20">

,
,
(. 4.07).

number text range.


, text, ,
, range.

JavaScript- .
, :
. ,
.

, ,
-.

.

HTML5 :
date , .

datetime , , ,
.

datetime-local , .

time , .

month , .

-
YYYY-MM-DDThh: mm: ss.Z (Y , M , D , h ,
m , s , Z ). , , ,
, 11:11 11 1918 :

date: 1918-11-11

datetime: 1918-11-11T11:11:00+01

datetime-local: 1918-11-11T11:11:00

time: 11:11:00

month: 1918-11

year , week, 1 53
.

<label for="dtstart"> </label>

<input id="dtstart" name="dtstart" type="date">

Opera ,
(. 4.08).
. 4.08. Opera

, , ,
.
ISO JavaScript-
, . ,
:

if (!inputSupportsType('date')) {

// .

JavaScript
, .

, ,
.

, HTML5, JavaScript-,
color. : #000000
, #FFFFFF .

<label for="bgcolor"> </label>

<input id="bgcolor" name="bgcolor" type="color">

,
, .
, , , ,
.

JavaScript,
, .

:
, ,
. HTML5
, ,
, .

: pattern , ,
. :
:

<label for="zip"> </label>

<input id="zip" name="zip" pattern="[\d]{5}(-[\d]{4})">


pattern.
, , .

HTML5 . ,
JavaScript, .
,
.
JavaScript , .


; .
,
JavaScript-
.

,
, , :
?

. : .
CSS.

. , -
,
JavaScript-,
.

, :
?

, .
, ,
,
, , .

, ,
HTML5-
. , .

,
HTML5.
5.
HTML . ,
, , .

, , , . HTML
, ,
, .

, - ,
. , HTML
,
, .

, HTML ,
, .

, .
XML, , event price,
. ,
, event price.
HTML , , ,
. HTML. ,
.

HTML , -
class.

. , ,
class, .

: -, CSS?,
. CSS- ,
class, .
DOM
, ,
.

, .
class ,
HTML: hCard , hCalendar , hAtom
. ,
, ,
.
.
. ,
, . 80% ,
20% . , ,
, : ,
. , .

? HTML5 . , ,
, ,
HTML5.

, HTML5,
. 80/20
,
?

, HTML . ,
:
.

, (John Allsopp)
A List Apart, HTML5
(http://bkaprt.com/html5/6)11:

, HTML ,
,
.

, . RDFa
HTML- .
, RDFa
. , ,
: <h1 class="summary">, RDFa
: <h1 property="myformat:summary">.

, RDFa ,
.
, HTML.

.
(Mark Nottingham)
(http://bkaprt.com/html5/7)12:

HTML ,
: Netscape blink, MSFT marquee
. . , HTML ,
: ( )
11
: http://www.alistapart.com/articles/semanticsinHTML5/.
12
: http://www.mnot.net/blog/2006/04/07/extensibility/.
,
.

,
, .

, HTML5 -
. , class ,
, . , HTML5 ,
RDFa, , , .

, ,
-. ,

.

HTML5 ,
, span, strong, em, abbr . ,

.

mark

, ,
.
span, span ,
, ,
.

em strong, ;
, , - .

mark:

<h1> ''</h1>

<ol>

<li><a href="http://clearleft.com/">

<mark></mark> .

</a></li>

</ol>

mark , ,
. , mark
,
.
mark ,
, , , .

time

hCalendar ,
: ,
.

hCalendar ,
. : 25 : ,
ISO : YYYY-MM-DDThh:
mm: ss.

,
abbr:

<abbr class="dtstart" title="1992-01-12">

12 1992

</abbr>

, abbr ,
,
-. HTML5
time:

<time class="dtstart" datetime="1992-01-12">

12 , 1992

</time>

time ,
:

<time datetime="17:00">17 </time>

<time datetime="2010-04-07">7 </time>

<time datetime="2010-04-07T17:00"> 17 , 7 </time>

datetime,
, :

<time>2010-04-07</time>

meter

meter ,
.
<meter>9 10 </meter>

, ,
max:

<meter max="10">9 </meter>

min. high, low optimum,


. ,
value.

<meter low="-273" high="100" min="12" max="30"optimum="21" value="25">

- .

</meter>

progress

meter -, ,
progress , :

<progress>60%</progress>.

min, max value, :

<progress min="0" max="100" value="60"></progress>

progress , DOM.
JavaScript ,
Ajax-
.

2005 Google , ,

(http://code.google.com/webstats/).

-
. .
, header, footer nav.
, HTML5.

section

section .
div,
. , div
, . ,
section .
div section,
: ?

<section>

<h1> DOM</h1>

<p> ,
.</p>

<p>: </p>

</section>

header

HTML5 header
. .
, , header
.

header HTML5 header


. ,
header. , ,
header section. , .
section
, , .

<section>

<header>

<h1> DOM</h1>

</header>

<p> , .</p>

<p>: </p>

</section>

header ,
. header
, .

footer

header, footer ,
, , header, . footer
, : ,
, . .
, -
. , ,
, HTML5 .

<section>

<header>

<h1> DOM</h1>

</header>

<p> , .</p>

<footer>

<p>: </p>

</footer>

</section>

aside

header , aside
. ,
. , -
, , aside.
, .

aside .
, ,
, , aside. :
aside ,
?

; ,
, .

, - ,
, aside. ,
.
, footer, ,
(. 5.01).
. 5.01. footer, aside

,
, . .
.

nav

nav , , ,
. , .

. nav
. , ,
, nav. ,
nav.

nav header. ,
, header
.

article

, header, footer, nav aside


section.
, , ,
.
article section.
. ,
.

, RSS Atom-.
, , , article
. article .

article time,
pubdate, , :

<article>

<header>

<h1> DOM</h1>

</header>

<p> ,
JavaScript.</p>

<footer>

<p>

<time datetime=?2005-10-08T15:13?
JavaScript.</p>

<footer>

<p>

<time datetime="2005-10-08T15:13" pubdate>

15:13 8 2005 .

</time>

: </p>

</footer>

</article>

time, pubdate
.

article ,
, , , .
, hAtom.

HTML5 . , article
: , , ,
. article
, Web Slices Microsoft (http://bkaprt.com/html5/8)13.

,
, . , , ,
, .

, article section . ,
, . , ,
.
. ,
, . ,
.

HTML5 , .
, , .
, , ,

(. 5.02).

. 5.02.

13
http://www.ieaddons.com/en/webslices/
- div
. . ,
div , .
div HTML5 , .
.

, div.
-
.

. HTML5
, .

.

: , , . .
. , , Canvas .
,
-.

, h1 o h6, HTML-.
, :

<h1>An Event Apart</h1>

<h2></h2>

<p> 2010 .</p>

<h3></h3>

<p> .</p>

<h3></h3>

<p> Beantown.</p>

<h3></h3>

<p> <em></em>.</p>

<small> .</small>

An Event Apart

. , ,
.

small. .
. , small
.

HTML5 -
:

<h1>An Event Apart</h1>

<section>

<header>

<h2></h2>

</header>

<p> 2010 .</p>

<h3></h3>

<p> .</p>

<h3></h3>

<p> Beantown.</p>

<h3></h3>

<p> <em></em>.</p>

</section>

<small> .</small>

, small An Event Apart,


.

:
:

<h1>An Event Apart</h1>

<section>

<header>
<h2></h2>

</header>

<p> 2010 .</p>

<section>

<header>

<h3></h3>

</header>

<p> .</p>

</section>

<section>

<header>

<h3></h3>

</header>

<p> Beantown.</p>

</section>

<section>

<header>

<h3></h3>

</header>

<p> <em></em>.</p>

</section>

</section>

<small> .</small>

An Event Apart

- ,
HTML. : HTML5
- . ,
, ,
h1:

<h1>An Event Apart</h1>

<section>

<header>

<h1></h1>

</header>

<p> 2010 .</p>

<section>

<header>

<h1></h1>

</header>

<p> .</p>

</section>

<section>

<header>

<h1></h1>

</header>

<p> Beantown.</p>

</section>

<section>

<header>

<h1></h1>

</header>

<p> <em></em>.</p>
</section>

</section>

<small> .</small>

HTML :

An Event Apart

HTML5 :

An Event Apart

hgroup

, , ,
.
hgroup:

<hgroup>

<h1>An Event Apart</h1>

<h2> , </h2>

</hgroup>

( , -)
. hgroup .
h1:

<hgroup>

<h3> DOM</h3>

<h4>- JavaScript Document Object Model</h4>


</hgroup>

. ,
, ,
.

blockquote, fieldset td
.
-.

, -,
, ,
h1 h6. ,
. ,
.

, . HTML5
, , ,
.
, h1,
:

<h1> </h1>

<h2><a href="cheese.html"> </a></h2>

<p> .</p>

, ,
:

<h1> </h1>

<p> .</p>

HTML5 , .
-: article:

<article>

<h1> </h1>

<p> .</p>

</article>

- . , ,
:
<h1> </h1>

<article>

<h1> </h1>

<p> .</p>

</article>

HTML5 :

, - ,
Ajax. HTML5
-.


, . CSS-,
, .
.

HTML5 scoped,
style. , style,
-:

<h1> </h1>

<article>

<style scoped>

h1 { font-size: 75% }

</style>

<h1> </h1>

<p> .</p>

</article>

h1 , 75%.
. scoped.

- . -
HTML5, , . ,
, ,
HTML5. ,
.
6. HTML5
HTML5 ,
.
. , , ,
,
.

CSS-.
, , ,
:

section, article, header, footer, nav, aside, hgroup {

display: block;

. Internet Explorer
. ,
JavaScript, :

document.createElement('section');

(Remy Sharp), JavaScript, ,


HTML5.
, Internet Explorer:

<!-[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">

</script>

<![endif]->

HTML5,
.

(Geoffrey Sneddon) -,
HTML5 (http://bkaprt.com/html5/9)14.

14
: http://gsnedders.html5.org/outliner
, HTML5, ,
h1, CSS-,
, :

h1 {

font-size: 2.4em;

h2, section h1, article h1, aside h1 {

font-size: 1.8em;

h3, section h2, article h2, aside h2,

section section h1, section article h1, section aside h1,

article section h1, article article h1, article aside h1,

aside section h1, aside article h1, aside aside h1 {

font-size: 1.6em;

,
. ,
HTML5 . ,
.

Aria

HTML5
. , ,
, nav.
,
.

.
, .

, ARIA (
-, Accessible Rich Internet Applications).

ARIA
Ajax- -
. ARIA
.

ARIA role. role="search"


, role="banner"
role="contentinfo" .
ARIA : http://bkaprt.com/html5/1015.

HTML 4.01, XHTML 1.0


,
, .

ARIA HTML5, ARIA,


.

role
. .
:

header[role="banner"] { }

footer[role="contentinfo"] { }

, -
. ,
.

(Henri Sivonen) HTML5.


: http://validator.nu/.

, W3C
(http://validator.w3.org/). ,
HTML5.

HTML5,
,
JavaScript.

Modernizr JavaScript-,
, audio, video canvas (http:// www.modernizr.com/).

JavaScript Modernizr.
, , :

if (!Modernizr.inputtypes.color) {

// JavaScript.

15
: http://www.w3.org/TR/wai-aria/roles#role_definitions/.
Modernizr ,
Internet Explorer,
Modernizr, .

, HTML5 , ,
.


HTML XHTML- :

<!DOCTYPE html>

, .

ARIA , , ?

,
, :

<div class="section" >

<div class="header" >

<h1>Hello world!</h1>

</div><! /.header >

</div><! /.section >

HTML5,
HTML5,
div .

, , ,
date, range color, , search, url, email
. , ,
, ,
type="text".

, audio,
video canvas. , ,
, .

HTML5 :
http://adactio.com/journal/tag/html5
, HTML5.
(Bruce Lawson) :
http://brucelawson.co.uk/category/html5/

HTML5 Doctor ,
: http://html5doctor.com/

, HTML5,
, : http://html5demos.com/

(Mark Pilgrim)
HTML5 (Dive Into HTML5).
OReilly : http://diveintohtml5.org/

, ,
HTML5 : http://whatwg.org/html5

HTML5 ,
. W3C
-: http://www.w3.org/TR/html-markup

HTML5, , -
. . ,
.

HTML5 , - .
.

HTML W3C
,
, .
,
.

HTML5,
WHATWG: http://www.whatwg.org/mailing-list#specs

IRC-. , :
irc://irc.freenode.org/whatwg

. IRC ,
, (Anne van Kesteren),
(Lachlan Hunt) WHATWG.

, HTML5
. ,
WHATWG , .
HTML , -.
. ,
. ,
, - .
HTML5, , .

-. (),
- Clearleft. , DOM
Ajax. .
adactio.com, Huffduffer ,
, . -,
Salter Cane.