HTML5 для веб-дизайнеров

HTML5 -
, , 6

http://www.litres.ru/pages/biblio_book/?art=4570175
HTML5 - / : , ; ; 2013
ISBN 978-5-91657-596-5

,
-. HTML5 -
web-.
HTML5 ,
.
.
, HTML5
, , ,
.
HTML5.
. . HTML5 -
1.
IETF W3C: HTML 4
XHTML 1: HTML XML
XHTML 2:
: WHATWG TF?
- 1.0 HTML5
XHTML : XHTML
HTML5
2. HTML5

, , ?

: ,

,
, !

a
! API JavaScript
3.
Canvas
:
Canvas. ! ?

Canvas
Audio
-
, ,

Video

4. - 2.0
Placeholder
Autofocus
Required
Autocomplete
Datalist

5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
23
23
25
25
26
27
28
29
30
31
31
32
34
35
36
36
37
38
39
40
42
43
44
45
46
47
49
49
49
3
. . HTML5 -

5.

mark
time
meter
progress
section
header
footer
aside
nav
article
?

,

hgroup

6. HTML5
Aria
50
51
51
52
53
54
55
56
57
57
57
59
59
59
60
60
61
61
61
62
62
63
63
64
66
66
67
68
69
69
70
71
72
72
74
75
76
77
77
78
79
80
. . HTML5 -

HTML5 -
- A
Book Apart, ,
, .
, , CSS3,
, , , HTML5.
, -
W3C, ,
( ), ,
-.
HTML5
, /,
.
DOM JavaScript ,
, .
HTML5 , .
,
HTML5.
,
, ! .
, ,
, -,
.
HTML5. , A Book
Apart, , ,
.

. . HTML5 -
1.
HTML . ,
,
, Amazon, eBay Wikipedia
, , .
HTML5 -,
, HTML
. .
, (HyperText Markup Language,
HTML) -, 1991
HTML Tags, 20 ,
-.
, ;
SGML (Standard Generalized Markup Language,
). ,
,
, , HTML5.
. . 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 .
. . HTML5 -
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 ,
.
. . HTML5 -
XHTML 2:
-,
W3C , : XML.
W3C HTML 4.
XHTML 2, , ,
XML .
XHTML 2 XHTML 1,
. XHTML 1, XHTML 2
-
HTML. ,
.
.
. . HTML5 -
: WHATWG TF?
W3C . ,
, -.
Opera, Apple Mozilla .
, , .
2004 . (Ian
Hickson), Opera Software, HTML
-. .
:
(Web Hypertext Application Technology
Working Group, WHATWG).
10
. . HTML5 -
- 1.0 HTML5
WHATWG , W3C. W3C
, : , ,
. WHATWG ,
, , , .
W3C .
.
WHATWG, ,
, .
:
,
.
WHATWG : (Web Forms 2.0) - (Web Apps 1.0).
HTML. ,
HTML5.
11
. . HTML5 -
WHATWG HTML5, W3C

XHTML 2. , .
- .
2006 - , ,
HTML XML .
W3C HTML.
, ,
HTML WHATWG.
. ,
W3C , :
XHTML 2 HTML 5 ( ).
, WHATWG, HTML5 ( ),
W3C!
-, ,
, ,
, .
12
. . HTML5 -
XHTML : XHTML
2009 . W3C ,
XHTML 2 . ,
.
, XHTML 2 . ,
XML ,
, - XHTML 1, ,
XHTML 1 XHTML 2 .
, XHTML 1 ,
, , HTML5
.
, . HTML5
, .
13
. . HTML5 -
HTML5
HTML5 , -,
.
HTML5 . WHATWG HTML5
, . HTML W3C
, .
, . , ,
? (
, , HTML5 .)
, -,
HTML5, ?
, , HTML5
1 2022 .
-. , ,
, , 2022
.
.
, HTML5.
, . ,
. Internet Explorer
, - abbr.
, HTML5, 2012 .
.
.
-.
, HTML5.
CSS 2.1,
. ,
CSS 2.1, , .
HTML5 . ,
, . ,
, - .
, HTML5 , .
, .
HTML, HTML5.
,
_W3C. . .
W3C,
.:
http://ru.wikipedia.org/wiki/
14
. . HTML5 -
2. HTML5

. .
:
, .
, .
. .
XHTML 2. W3C :
.
15
. . HTML5 -

WHATWG, ,
HTML5. :
. , HTML5 .
XHTML 2 , , HTML5
. HTML
4.01 HTML5.
, , :
-

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

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

HTML5 , ,
. HTML
, ,
.
, ,
. , ,
. .
, ,
, .
, , HTML5
. HTML5 HTML
4.01, ,
, 2012 , .
, - -,
,
, .
, HTML5 ,
. , .
, HTML5
, , , ,
, .
18
. . 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.
19
. . HTML5 -

, HTML5.
,
, HTTP- ContentType. ,
<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="file.js"></script>
. ,
JavaScript, (
):
<script src="file.js"></script>
type "text/css" ,
CSS-:
<link rel="stylesheet" type="text/css" href="file.css">
:
<link rel="stylesheet" href="file.css">
20
. . HTML5 -
: ,
, Python,
.
. (, JavaScript)
,
.
,
: .
, .
:

, ?
.
, , ,
. , ,
. ,
.
XHTML 1.0 ,
. , .
, .
XHTML 1.0 XML.
. .
.
, br,
: <br/>.
HTML5 . , , , ,
.
XHTML 1.0 . ,
- , , W3C
. , HTML5,
, .
,
HTML5. , ,
. , HTML5
. , , ,
. , ,
, ,
, - .
HTML5. ,
, .
, ,
.
, .
, ;
,
.
21
. . HTML5 -
, .
22
. . 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 .
. .
23
. . HTML5 -
, , .
,
.
24
. . HTML5 -
, !
big , small .
, ,
. ,
: .
: , ,
.
,
, ,
.
b : .
, ,
.
, , strong.
i .
, .
, .
, , em.
. ,
, , HTML5 .
, ,
, .
,
, : , , .

.

HTML5 cite.
, , .
(, ),
. HTML5
cite. ,
.
:
<cite> ; 3, ,
, cite ,
.
. , HTML5
, ,
.
, ,
<cite> , ,
3
. ( , )
. . .
25
. . HTML5 -
-, cite ,
.
a

, 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
.
: ,
? :
, .
26
. . 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 , , , . .
27
. . HTML5 -
3.
.
HTML img, .
JavaScript . ,
Ajax- ,
.
- ,
HTML, CSS JavaScript.
- .
, , HTML CSS.
, , , ,
Flash Silverlight.
( )
: .
-, .
. ,
.
Flash , , ,
. ,
- .
HTML5 . ,
(, Flash Silverlight).
, - HTML5
.
28
. . 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="puppy.jpg" alt=" ">
</canvas>
canvas? :
. 3.01. , canvas,
JavaScript.
, Canvas .
API. :
29
. . HTML5 -
var canvas = document.getElementById(my-first-canvas);

var context = canvas.getContext(2d);
canvas,
API, HTML5 : http://bkaprt.com/
html5/.4
2D API ,
(, Adobe Illustrator), , , ,
, , . ,
, 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 .
: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
30
. . HTML5 -
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,
.
31
. . HTML5 -
, ,
, .
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.
: http://www.w3.org/Wai/pf/html-task-force
:
update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/
6
http://www.filamentgroup.com/lab/
32
. . HTML5 -
. 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
. ,
.
: http://code.google.com/p/explorercanvas/
33
. . HTML5 -
Audio
, , - .
, , .

. : QuickTime, Windows Media
Player, Real Audio, , -
- .
MP3.
,
. Flash.
, , HTML5.
HTML5- :
<audio src="witchitalineman.mp3">
</audio>
, .
, audio.
, ,
. ,
, , .
autoplay .
<audio src="witchitalineman.mp3" autoplay>
</audio>
- autoplay, : .
, autoplay .
, , 8.
:
, ; , ;
(true), (false).
. ,
, true false.
: .
, .
autoplay="false" autoplay="no thanks" ,
autoplay.
XHTML, autoplay="autoplay".

.

, ,
. , loop,
:
<audio src="witchitalineman.mp3" autoplay loop>
</audio>
(18151864) ,
1849 . . .
34
. . HTML5 -
loop autoplay
.
-
audio , .
,
controls:
<audio src="witchitalineman.mp3" controls>
</audio>
controls
,
, (. 3.05).
. 3.05. controls, ,

,
. JavaScript Audio API,
(play pause) (volume .).
, button ,
(. 3.06):
<audio id="player" src="witchitalineman.mp3">
</audio>
<div>
<buttononclick="document.getElementById(player).
play()">
</button>
pause()">
</button>
volume+=
0.1">
</button>
volume-=
0.1">
</button>
</div>
. 3.06. (, , , ), button
35
. . HTML5 -
- 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="witchitalineman.mp3" controls preload="none">
</audio>
audio, ,
preload="auto", audio , -
- .
, ,
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="witchitalineman.ogg">
9
: https://bugs.webkit.org/show_bug.cgi?id=25267
(Sophies Choice, 1982 ) ( , ),
, , ,
( ). . .
10
36
. . HTML5 -
<source src="witchitalineman.mp3">
</audio>
, Ogg Vorbis,
source. , MP3,
Ogg Vorbis, source
source.
MIME- :
<audio controls>
<source src="witchitalineman.ogg" type="audio/ogg">
<source src="witchitalineman.mp3" type="audio/mpeg">
</audio>
source ( ) ,
XHTML,
<source />.

source . ,
audio . ,
?
Internet Explorer , ,
Flash. audio . ,
<audio>
source , audio:
<audio controls>
<source src="witchitalineman.ogg type="audio/ogg">
<source src="witchitalineman.mp3 type="audio/mpeg">
<object
type="application/x-shockwaveflash"data="player.swf?soundFile=witchitalineman.mp3">
<param
name="movie"value="player.swf?
soundFile=witchitalineman.mp3">
</object>
</audio>
object ,
audio.
. object,
, . ,
, ,
:
<audio controls>
<object type="application/x-shockwave-flash"data="player.swf?
<param
name="movie"value="player.swf?
<a href="witchitalineman.mp3"> </a>
</object>
</audio>
37
. . HTML5 -
.
1. audio Ogg Vorbis.
2. audio MP3.
3. audio, Flash-.
4. audio, Flash-.

audio
. ,
.
, .
:
<audio controls>
<p>I am a lineman for the county</p>
</audio>
,
audio.
. ,

?
<audio controls>
</audio>
<p>I am a lineman for the county</p>
38
. . HTML5 -
Video
,
-
. -
, .
Flash-. HTML5
.
video , audio.
autoplay, loop preload.
src video, source,
<video>.
controls
.
,
, , ,
:
<video src="movie.mp4" controls width="360" height="240">
</video>
,
, poster (. 3.07):
<video
src="movie.mp4"
controls
width="360"height="240"
poster="placeholder.jpg">
</video>
. 3.07. poster -
,
. MP4 Theora
39
. . HTML5 -
Video ( ).
, , HTML5 video :
<video
controls
width="360"
height="240"poster="placeholder.jpg">
<source src="movie.ogv" type="video/ogg">
<source src="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).
40
. . HTML5 -
. 3.08. video
- .
HTML5,
, .
. 4 , HTML5
.
41
. . HTML5 -
4. - 2.0
- JavaScript,
: . CSS
:hover, -
JavaScript , .
. -
, ,
, . CSS3
,
JavaScript.
, CSS .
HTML5.
, HTML5 .
WHATWG,
- 2.0 W3C.
HTML5.
42
. . 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.
}
43
. . HTML5 -
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,
.
44
. . HTML5 -
Required
JavaScript
. HTML5 JavaScript .
required:
<label for="pass"> </label>
<input id="pass" name="pass" type="password" required>
,
. , ,
required ,
JavaScript.
class="required",
required.
45
. . HTML5 -
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 ,
, .
, ,

.
46
. . 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).
47
. . HTML5 -
. 4.03. datalist: , ,
datalist , .
datalist, .
48
. . HTML5 -

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, .
49
. . HTML5 -
. 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".
50
. . HTML5 -
, ,
, .
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;
}
}
, , JavaScriptwidget ,
:
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.
51
. . HTML5 -

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).
52
. . HTML5 -
. 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,
, .
53
. . HTML5 -

:
, ,
. HTML5
, ,
, .
: pattern , ,
. :
:
<label for="zip"> </label>
<input id="zip" name="zip" pattern="[\d]{5}(-[\d]{4})">
pattern.
, , .
54
. . HTML5 -

HTML5 . ,
JavaScript, .
,
. JavaScript
, .

; .
,
JavaScript-
.
,
, , :
?
. : .
CSS.
. ,
- ,
JavaScript-,
.
, :
?
, .
, ,
,
, , .
, ,
HTML5. , .
,
HTML5.
55
. . HTML5 -
5.
HTML . ,
, , .
, , , . HTML
, , ,
.
, - ,
. , HTML
,
, .
, HTML ,
, .
56
. . HTML5 -
, .
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
,
?
57
. . HTML5 -
, 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 ,
: ( )
,
.
,
, .
, HTML5 -
. , class ,
, . , HTML5 ,
RDFa, , , .
, ,
-.
,
.
11
12
: http://www.alistapart.com/articles/semanticsinHTML5/.
: http://www.mnot.net/blog/2006/04/07/extensibility/.
58
. . HTML5 -

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-MMDDThh: mm: ss.
,
abbr:
<abbr class="dtstart" title="1992-01-12">
12 1992
</abbr>
, abbr ,
,
59
. . HTML5 -
-. 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- .
60
. . HTML5 -
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>
61
. . HTML5 -
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).
62
. . HTML5 -
. 5.01. footer, aside

, , .
. .
nav
nav , , ,
. , .
. nav
. , ,
, nav. ,
nav.
nav header.
, , header
.
article
, header, footer, nav
aside section.
, , ,
.
article section.
. ,
.
, RSS Atom-.
, , , article
63
. . HTML5 -
. 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 , .
, , .
, , ,
13
http://www.ieaddons.com/en/webslices/
64
. . HTML5 -

(. 5.02).
. 5.02.
- div
. . ,
div , .
div HTML5 , .
.
, div.
-
.
65
. . HTML5 -

.
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 -
:
<section>
<header>
<h2></h2>
</header>
<p> 2010 .</p>
<h3></h3>
<p> .</p>
<h3></h3>
66
. . HTML5 -
<p> Beantown.</p>
<h3></h3>
<p> <em></em>.</p>
</section>
<small> .</small>
, small An Event Apart,
.
:
:
<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:
67
. . HTML5 -

<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>
<h2> , </h2>
</hgroup>
68
. . HTML5 -
( , -)
. 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>
69
. . HTML5 -
</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. ,
.
70
. . HTML5 -
6. HTML5
HTML5
, .
. , , ,
,
.
71
. . 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.
, 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;
}
,
. ,
14
: http://gsnedders.html5.org/outliner
72
. . HTML5 -
HTML5 . ,
.
73
. . 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"] { }
15
: http://www.w3.org/TR/wai-aria/roles#role_definitions/.
74
. . HTML5 -
, . ,
.
(Henri Sivonen) HTML5.
: http://validator.nu/.
, W3C (http://
validator.w3.org/). ,
HTML5.
75
. . HTML5 -

HTML5,
,
JavaScript.
Modernizr JavaScript-,
, audio, video canvas (http:// www.modernizr.com/).
JavaScript Modernizr.
, , :
if (!Modernizr.inputtypes.color) {
// JavaScript.
}
Modernizr ,
Internet Explorer,
Modernizr, .
76
. . HTML5 -

, 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
77
. . HTML5 -
!
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.
78
. . HTML5 -
, HTML5
. ,
WHATWG , .
HTML , -.
. ,
. ,
, - .
HTML5, , .
79
. . HTML5 -

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

HTML5 для веб-дизайнеров

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML5 для веб-дизайнеров

Загружено:

Авторское право:

Доступные форматы

HTML5 -

IETF W3C: HTML 4

XHTML 1: HTML XML

WHATWG HTML5, W3C

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

. 3.03. Bespin, Canvas

. 4.01. input placeholder

input search type

. 4.04. Safari Mac OS

HTML5 type : e-mail, - :

. 4.05. Mobile Safari type

. 4.06. range Safari Opera

. 5.01. footer, aside

<h1>An Event Apart</h1>

Вам также может понравиться