Изучаем HTML5. Библиотека специалиста

Б.Лоусон, Р. UUарп ИЗУЧАЕМ Библиотека специалиста ~nn72Рф Москва • Санкт-Петербурr • Ни)lQtиi HOBropoA • Вороне. Рос...

16 downloads 709 Views 25MB Size Report

This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!

Report copyright / DMCA form

DOWNLOAD PDF

Б.Лоусон, Р. UUарп

ИЗУЧАЕМ

Библиотека специалиста

~nn72Рф Москва • Санкт-Петербурr • Ни)lQtиi HOBropoA • Вороне. Ростов-на-Дону • Екатеринбурr • Самара • Новосибирск Киев • Харьков • Минск

2011

ББК

УДК

32.988.02-018 004.438.5

Л81

Лоусон Б., Шарп Р. Л81

Изучаем

ил.

-

HTML5. Библиотека специалиста. (Серия «Библиотека специаписта-).

-

СПб.: Питер,

2011. -

272

с.:

ISBN 978-5-459-00269-0 Эта книга посвящена изучению нового стандарта веб-программирования НТМL5 и использова нию новых функциональных возможностей, предоставля:емых веб-разработчикам. Написанная опытными программистами, давно использующими НТМL5 в своей работе, книга расскажет, как

приступить к освоению этого языка программирования и адаптации веб-проектов для того, чтобы в полной мере воспользоваться преимуществами нового стандарта. Авторы не заставля:ют вас чи

тать избыточно подробные спецификации языка, а учат применять НТМL5 на конкретных приме рах.

С помощью этой книги вы узнаете, каковы новые семантики и структуры НТМL5, как использо

вать мультимедийные элементы НТМL5 дЛЯ размещения аудио- и видеоданных, как разрабатывать «умные» ве6-формы И усовершенствовать приложения, использующие географическую привязку. с помощью

API геолокации.

Книга адресована веб-разработчикам, знакомым с НТМL или XHТМL и желающим быстро освоить новые возможности языка НТМL5.

ББК

УДК

32.988.02-018 004.438.5

Права на издание получены по соглашению с New Riders PubIishing. все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было фор ме без письменного разрешения владельцев авторских прав. Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как надежные. Тем не менее, имея в виду возможные человеческие или технические ошибки, издательство не может гарантировать абсолютную точность и полноту приводимых сведений и не несет ответственности за возможные ошибки, связанные с использованием книги.

ISBN 978-0321687296 (англ.) ISBN 978-5-459-00269-0

с New Riders PubIishing, 201 О С Перевод на русский язык 000 Издательство ссПитер», 2011 се Издание на русском языке, оформление 000 Издательство ссПитер», 2011

СОДЕРЖАНИЕ

Введение

11

Для кого эта книга?

13

Чем не является эта книга

13

Что мы имеем в виду под

14

HTML5

Кто? Что? Когда? Почему? Краткая история

Как

14

HTML5 чуть не канул в беэвестность

Принципы, скрывающиеся за

Гnава

HTML5

15

HTML5

17

1. Основная структура

23

25

Использование новых структурных элементов HTML5

29

Оформление НТМL5-документа с помощью С55

35

Соэдание С55 для

3б

Internet Explorer

Оформление НТМL5-документов в старых версиях

Firefox и Camino Другие проблемы устаревших браузеров Когда используются новые структурные элементы

Гnава

37 38 HTML5 38

Yesterday

Today 1 drank coffee for breakfast . ~ 14 hours later, 1 went to bed.

Tuesday

Ran out of coffee, so had orange juice ~ for breakfast. It was frorn concentrate.

<srnall> This is copyright Ьу Bruce Sharp. ~ Contact те to negot iate the rnovie , rights.
~

Применивпростыетаблицы стилей, зададим оформление.

's idebar {Поаt:lеft; width :20%;} . p o s t {Поаt :right ; width:79%;} 'footer {clear:both;} Схематическоеизображениенашей страницы показано на ри сунке 1.4.

div id="header"

div class=''post''

div class=''post''

div id="footer" Рис. 1.4. Cтpyкtypa нашего бnorа в НТМL 4 Хотя в этой разметке нет ничего совсем уж неправильного

(и она будет прекрасно работать в новом мире НТМL5), почти вся структура документа оказывается неизвестной браузеру, так как единственный НТМL-элемент, который мы можем исполь-

Основная структура зовать Д1IJI выделения отдельных фрarментов страницы, семантически нейтральный (определенныйв

- это HTML 4

как «универсальный механизм для оформления структуры до кументов» ).

Представим себе «умный» браузер, в котором с помощью

специального сочетания клавиш можно быстро переходить к паиели навигации страницы. Вопрос в следующем: как

он узнает, куда переходить? Одни разработчики использу

, другие - clas s=" nav" , clas S= "navigation", class=" links" или всевозможныеих эк

ют

виваленты на разных языках. Данные из приведенныхвыше

таблиц

Opera МАМА наводят на мысль о том, что mе п u , nav,sidebar ипаvigаtiопможнобылобы считатьсинонимами. В

HTML5

есть новые элементы, которые однозначно задают

структурные элементы страницы. Используя некоторые из них,

попробуем переписать нашу разметку.

My interesting life

Menu

Lаst -, week

Archives

<article>
Yesterday

Today 1 drank coffee for breakfast. -, 14 hours later,I went to bed.
<article>
Tuesday

Ran out of coffee, so had orange juice -, for breakfast. ~ It was frorn concentrate.

This is copyright Ьу Bruce -, Sharp. Contact те to ~ negotiate the movie rights.

•

ЭЭ

34

•

Глава

1 Другое схематическое изображение нашей страницы (с исполь зованием

HTML5) показано на рис. 1.5.

I

header

article nav

article

footer Рис. 1.5. HTML5-структуранашего блога

.-

'..

НУ ПО~ЕМУ ЖЕ ЗДЕСЬ НЕТ,ЭЛЕМЕНТА ? ':.to

.~.

_

• •

.

~.

Довольно просто представить себе, как работало бы наше гипотетическое сочетание клавиш

«переход К панели навигации», однако гораздо чаще пользователю требуется переход к основ ной области контента. Некоторые дизайнеры для удобства работы с сайтом добавляют вверху страницы ссылку «skip links», которая позволяет программам экранного доступа обойти элемен ты навигации . Но ведь в

HTML5 нет элемента

'

,,:'. " ': ';', '-',

К которому должен осуществляться

переход! Как в таком случае программа экранного доступа (или поисковая система) узнает, где начинается основная область контента? На самом деле определить это очень просто: для этого можно использовать «алгоритм Скуби Ду» (как я его называю). Всегда очевидно, что в костюме при видения скрывается угрюмый при вратник парка развлечений, просто потому, что о н единственный персонаж серии, который не является Фредом, Дафной, Велмой, Шэгги и Скуби. Точно так же первый фрагмент контента, не заключенный в теги -, " "',, '-' ''''Е_',

'-

, < :i 5 l '::l':O

' ил и

.-

вг - ' , является признаком начала ос

новной области контента, и при этом не важно, находится ли он внутри элемента " ar': 1: 1::> или л

или же является прямым потомком элемента

используйте

WAI-ARIA и добавьте :: С: ~ е =Го:;, 1 г, К тегу, подробно о WAI-ARIA рассказывается в главе 2).

',:: ~..::lY , ',

Если вы хотите перестраховаться,

обрамляющему основной контент (более

Тот факт, что для второстепенных областей страницы используются отдельные элементы, а для основной

-

нет (поскольку она вычисляется путем исключения этих областей), кажется па

радоксальным. Однако такой вариант все же является лучшим решением, так как добавление новых элементов в язык создает серьезные трудности для производителей браузеров. усложняя процесс тестирования и повышая риск регрессии .

Перед тем как перейти к обсуждению значения и сферы при менения этих новых элементов, давайте создадим оформление для основных частей страницы .

Основная структура

ОФОРМЛЕНИЕ НТМL5-ДОКУМЕНТА С ПОМОЩЬЮ С55 Во всех браузерах (за исключением одного) создавать сти ли для этих элементов очень просто:

CSS можно

применять

к произвольному элементу, поскольку, как сказано в специфи

кации,

CSS -

это «явык таблиц стилей, повводяющий ав

торам и польаователям добавлять оформление ... к струк турированным документам (таким как НТМL-документы и XML-приложенИJI)>>, а в XML-приложенИJIХ могут использо

ваться любые элементы. Хотя новые НТМL5-элементы можно использовать уже сейчас,

они не всегда понятны современным браузерам. В таком случае они рассматриваются как неизвестные элементы и никак особо не обрабатываются. Таким образом, с помощью

css можно сделать элемент

И и оформить поля И отступы дли <article>, причем это почти так же просто, как и оформлениеэлементов
. Необычным может покаватъся то, что в CSS все элементы по умолчанию являются строковыми (d i s Р 1 а у : i n 1 i n е), поэ плавающим, добавить границы для элементов

тому если просто задать ширину и высоту для структурного

элемента (как мы это обычно делаем для элементов

в современныхбраузерахон будет отображатьсянеправияьно, и нам придется явно указать, что элемент является блочным

(display: block).

В нынешних браузерах до сих пор исполь

зуется встроенная таблица стилей, где определены элементы, явяяющиеся, по нашему мне.нию, исконно блочными (пример такой таблицы стилей можно найти на httр:l/www.wЗ.оrgIТRlСSS2/

sample.htm~. Однако в них еще нет таких правил дли элементов

,
,

<паv>и

<article>, поэтомудли НИХСПО-

соб отображеняядолжен быть задан вручнуювтаблицестилей. Когда в браузеры будут добавлены соответствующиеправила, эти строки кода не только будут безвредными,но и послужат резервнымвариантомдли старых браузеров, которые, как по казывает првктика, могут использоватьсяеще довольно долго.

Итак, чтобы оформить наш НТМL5-документв соответствии

с дизайном HTML 4, нам понадобятся следующие стили.

header, nav, footer, article {display:block;} nav {float:left; width:20%;} article {float:right; width:79%;} footer {clear:both;} И вот на свет появляетсяпрекраснаяНТМL5-страница.Во всех

браузерах,кроме одного.

• 35

36 •

Глава

1

СОЗДАНИЕ С55 ДЛЯ INTERNET EXPLORER в текущих версиях

Internet Explorer наша страница окажется

нееформленной. (На самом деле ситуация еще хуже: все но вые элементы будут неоформленными, но к тем элементам

mML 4, которые IE поддерживает, таблицы стилей будут при менены.)

Обмануть IE можно с помощью JavaScript Почему? Это зarадоч ное явление, и если мы раскроем вам секрет, нам придется вас

убить. (На самом деле мы просто этого не внаем.) Если добавить следующий код в элемент h е а d документа,

IE таинственным

образом применит стили к этим элементам (при условии, что в разметке есть элемент ).

<s c r i p t> document .createElement('header'); do c ument . c r e a t e Eleme n t ( ' nav ' ) ; do cument .createEl ement('art icl e'); document .createElement('footer'); Функцию document.

createElement () нужно применять

к каждому элементу только один раз (независимо от того, сколь ко раз он встречается на странице). Помните, что хотя та

,

HTML5

не требует использования элемен

этого нельзя сказать о такой невероятной смеси

из и

Internet Explorer 8 (и более ранних версий), CSS, HTML5 JavaScript

ПРИМЕЧАНИЕ

Элеменг- 5С'

j

ре./ теперь не требует объявления типа скрипта

JavaScript выбирается

-

по умолчанию . Это верно и для устаревших

браузеров. так что вы можете спокойно ИСПОЛЬЗ0вать такой син таксис.

Хотя для других браузеров такой JаvаSсгiрt-код не требует ся, он будет для них безвредным . Но для оптимизации скоро сти загрузки страницы можно заключить этот код в условные

комментарии (см.

http://dev.opera.com/articles/view/su ррогtiпg-iе

with-сопditiопаl-соmmепtsl), и тогда он будет выполняться только

BIE. Когда вы используете новый НТМL5-элемент, не забывайте

добавлять в тег правило d ocument . c rea teEl ement этого элемента. Альтернативныйвариант -

использование

Основная структура небольшого скрипта Реми

(http://remysharp.com/2009101 /07/htmIS-

епаbIiпg-sсгiрt /), который делает все то же самое в один прием . ВНИМАНИЕ

Internet Explorer (текущей версии IEB и ее предшественников) должен быть включен JavaScript.IE9 работает так, как остальные браузеры, и не требует JavaScript. Чтобы этот метод работал, у пользователей всех версий

Внимания заслуживает также тот факт, что наше шаманство не распространяется на модули печати

]avaScriptIE, и поэтому

то оформление, которое вы видите на экране, не передается на принтер. Решить эту проблему можно с помощью

Protector (http://www.iecss.com/print-protector/) -

IE Print

специального

]аvаSсгiрt-кода, позволяющего печатать НТМL5-страницы в

(Он включен в чен

]avaScript

HTML5 Shiv Реми.)

IE.

Если у пользователя отклю

(самостоятельно или в соответствии с корпора

тивной политикой безопасности), он сможет получить доступ к содержимому, но при этом страница будет не полностью оформленной. Однако это не всегда является решающим факто ром . Саймону Питерсу удалось показать, что, зная, как выглядит

DOM, можно создать оформление для НТМL5-документа и без ]avaScript, однако этот метод ограничен и не очень-то удобен; см. «Добавление стилей к НТМL5-разметке без использования скриптов» (httр ://bIоg .whаtwg .огg /stуliпg -iе-поsсгiрt) .

ОФОРМЛЕНИЕ НТМL5-ДОКУМЕНТОВ В СТАРЫХ ВЕРСИЯХ

FIREFOX

Firefox и Camino

И

CAMINO

используют движок

Gecko, у

которого есть

неприятная особенность: НТМL5-документ не отображается, если только это не правильно написанный ХНТМL-документ,

который обрабатывается как XМL. В

Firefox З+ и Camino 2 ис Gecko, где этот дефект

пользуется более современная версия

исправлен, и поскольку пользователи этих браузеров часто

устанавливают обновления, это гораздо менее серьезная про блема, чем поведение

IE.

ПРИМЕЧАНИЕ

Более подробная информация содержится в статье Реми на

HTMLSdoctor «Как добиться того, чтобы HTMLS работал в IE и Firefox 2» (httр://htmISdосtог.соm/hоw-tо-gеt-htmIS-wогkiпg-iп ie-and-firefox-2/).

•

37

38

•

Глава

1 ДРУГИЕ ПРОБЛЕМЫ УСТАРЕВШИХ БРАУ3ЕРОВ При создании стилей Д1IJI HTМL5-дoKyмeHToB возникают дрyrие

проблемы, связанные с устаревшими браузерами. В опреде ленных случаях фон элемента приходится задавать явно в до черних элементах, хотя по умолчанию это свойство должно

наследоваться. В некоторых браузерах на движке

Gecko могут

возникнуть проблемы с оформлением блочных якорей (то есть элементов <а> вокруг блочных элементов, что стало возможным в

см. rлаву

HTML5 -

2 «Тексг»),

а во всех текущих версиях

браузеров расположение (display: block) таких якорей нужно задавать явно

-

см. httр://mаttwilсох.пеt/sапdЬох/htmI5-bIосk

anchor/test.htm t Мы не собираемся приводить здесь исчерпывающий список таких особенностей; это временные проблемы, которые, как мы надеемся, будут решены с появлением новых версий. Но если вы

сами обнаружите такие ошибки, вам, возможно, захочется о них сообщить; Джон Резиr написал замечательную статью о том, как это сделать: «Ответственность веб-раврвботчика» (http://ejohn. огg/bIоg/а-wеЬ-dеvеlорегs-геsропsiЬilitУ/).

КОГДА ИСПОЛЬ3УЮТСЯНОВЫЕ СТРУКТУРНЫЕ3ЛЕМЕНТЫ HTML5 Мы уже использовалиэти элементы для написания разметки

нашей страницы и даже добавили к ним стили. И хотя о том, как они используются,можно догадатьсяпо названиям,пришло

время узнать об этом более подробно.

в приведенном ранее примере, как и на большинстве сайтов,

header является первым элементом на странице и

содержит

название сайта, логотипы, ссылки на rлавную страницу и т. д.

В спецификацииговоритсяследующее: Элемент

h е а d е r представляет собой

набор предварительных

данных и навигационных средств ... Обратите внимание: пред

полагается, что элемент header должен содержать заголовок раздела (элементы ьъ, h6 или hgrоuй, но это не обязательно.

Элемент hеаdеrможет также использоваться для обрамления списка содержимого раздела, формы поиска или любых необхо димых логотипов.

Основная структура Давайте проанализируем это описание. Во-первых, элемент

headerHe являетсяобязательным;в приведенномвыше приме ре он избыточен,посколькувключаеттолько элемент . Но

его значение

-

объединять «предварительные данные и навиrа

ционные средства», так что приведем более жизненный пример.

<а href="/">
My interesting blog

На мноrих сайтах используется автоловок и подеаголовок,

Чтобы скрыть подзarоловокот алrоритма определенияструк туры документа(и таким образом объединитьвагодовоки под ваголовок в одну логическуюединицу; см. rлаву 2), основной ваголовок и подзаюловок можно сrруппировать с помощью

элемента

.

<а href="/">
My interesting blog
Tedium, dullness and monotony

Элемент

heade r может также содержать панедь навиrации. Это

может оказаться полезным при использовании панели глобаль ной навигации, особенно для сайтов, основанных на шаблоне, rде весь элемент может быть добавлен из файла ша

блона. Таким образом, например,устроена rоризонтаЛЬНaJI панедь навиrации на сайте httр:llwww.thаicооkегу.со.uk!(рис. 1.6).

Thai cookery school

Learn authentic Thai cookery in your own home

Home

Cookery I courses

Contact

•

Э9

40

•

Глава 1

....от tluth"ntk

Ноте

lAl

Рис.

.

Тlюl с(Юk"ry In уour

own hormt.

Cookery Courses

Contact

НlI 1т Nong Lаwюn. 1т 'сom Chtang Ral ' " North Тhatland, and I offer latlored Тhal cool<ery lessons '" yoor

Where and how much?

ownhome.

1.6 . Элемент сайга http://www.thaicookery.co.uk!

Конечно же, элемент не обязательно должен находиться

внутри тега . Разметку для сайга

Thai cookery можно

написать и по-другому, поместив основную паиель навигации вне этого элемента.

Tha i cookery school > Le a r n authentic Thai cookery in your own ..., home Home < a href="courses.html" >Cookery ..., courses < /a > < a href="contact.html" >Contact Выбор в значительной степени зависит от того, считаете ли вы, что паиель навигации по сайту является частью элемен

та , и от практических соображений, касающихся простоты написания стилей. Возьмем в качестве примера мой

собственный сайт, в котором слева расположена очень длинная панель навигации по сайту, которая может оказаться длин

нее основного контента. Если в таком случае добавить

В , будет довольно трудно разместить основной кон тент справа и добавить футер, поэтому я поместил панель на вигации вне элемента

в предыдущем примере (рис.

на одном уровне с

, как

1.7).

Обратите внимание на то, что сейчас мы занимаемся созданием основного элемента

header

страницы; на самом деле, таких

Основная структура элементов может быть несколько в главе

• 41

об этом рассказывается

-

2.

г-~---~-

-

--------~--------------.------.--

-

( , Rcd

~рьу~ee~таJп::=:::u~r Llving Legend

FewЬе... pbyCf' haveIhe ""emObOOaI ,союwn OOK! ....-p/aIJwmвеесевв as does вnaa 0 _ Вапel (геaI name, Dwayne Т.

Readmor~

• .....

Рис.

Con>
вorn ioIо

• fiIшiy <Ж..,..,iaas .

..

1.

1.7 . Типичная страница с панелью навигации по саlirry

вне элемента

Элемент

используется

для создания панели навигации.

Панель навигации состоит из ссылок, позволяющих переме

щаться по странице (так, например, элемент оглавления, рас положенного в начале статьи, связан с определенным местом

на данной странице) или по сайгу, Однако не любой набор ссылок является элементом

;

К навигации, например, не

относится список спонсорских ссылок. То же самое касается и списка результатов поиска

-

он является частью основного

содержимого страницы.

Как и в случае с элементами

И
(и со всеми

новыми элементами),на страницеможет быть не один элемент

. Вы можете создать панель глобальной навигации в теге
, а затем использоватьэлемент
для оглавления и списка ссылок на похожие статьи в конце страницы.

Содержимымэлемента
, скорее всего, будет набор ссылок,

для которого в разметке будет использоваться неупорядоченный список (это стало традицией после появления фундаменталь ной статьи Марка Ньюхауса «Укрощение списков»

alistapart.com/articles/taminglists/»

(http://www.

или упорядоченный список

(в случае «хлебных крошек»), Помните, что

не заменяет

элементы <01> и <и1>, а обрамляет их. Поэтому устаревшие браузеры,не знакомыес этим элементом, отобразятпанель на вигации просто как обычный список.

.

42 •

Глава

1

в спецификации предлагается не использовать элеменг с - э '};- для «юридических» ссылок (ав торское право, контакты, свобода информации, политика конфиденциальности и т. д.), которые часто оказываются запрятанными в футере: «Часто В футерах содержится краткий список ссылок на различные страницы сайта (такие как пользовательское соглашение, главная страница и стра

ница с информацией об авторских правах). Для этих случаев должен использоваться именно элемент

- fou _Е::: / , а

не элемент

<,.-. ~ -, ~

».

Мы С этим не согласны. Многие сайты добавляют ссылку на информацию о доступности, позво

ляющую получить сведения, например, о том, как запросить данные в другом формате. Тем, кому требуются такие сведения, будет гораздо удобнее работать с сайтом, если агенты пользователей позволят им сразу переходить к элементам < с. и

'.'.- .

Хотя использование списка - достаточно разумная идея (и она дает вам большую свободу в создании таблиц стилей), это не является обязательным. Следующий код является абсолютно допустимым.

<р><а <р><а

href="/">Home
href="/about">About

В панели навигации можно использовать заголовки.

Main navigation

About me

News

06'ЬЕДИНЕНИЕ <НАУ> И ДРYrИХ 3ЛЕМЕНТОВ В БОКОВОЙ ПАНЕЛИ

На многих сапах можно увидеть боковую панель, в которой находится несколько навигационных блоков, а также контент, не имеющий отношения к навигации. Возьмем для примера мой

caAThttp://www.brucelawson.co.ukl (рис.

1.8).

В боковой панели, расположенной слева от основного конген та, есть несколько областей навигации (они не изображены на рисунке): страницы, категории, архивы, новые комментарии.

для этого используется несколько элементов
(один такой элемент и список с подсписком

-

тоже возможный вариант,

но я предпочитаю использовать отдельный элемент
для

каждого типа навигации).

Объединение элементов
в новый элемеНТ <а sidе > «мо жет использоваться для создания типографских эффектов (на-

Основная структура пример. врезок и боковых панедей), для рекламы. для групп

•

элементов
И для дpyroгo контента, который должен рас

полагаться отдельно от основного» (t,ttр:lldеv.wЗ.огg/htmIS/sресl

sections.html#the-aside-element ).

Pa ge s

•

• 43

Вцас:. , вт ·CIegg .hould know th.t hls оп.., ,..lIatk hoP4 0# 8chi8vlng "'- Ш'. holv grllll of PI\ Is. de.I.. , к.,ь ~ I ВrUt8 It'• • diНicutt .pot for 8"ybody

wishlng to . . . th. Introdr.кtton СI.IП'8пtfу •••

of

РА . А8

it

Blah blah • Web Нosbng ьу NSOeStgП.

Re c e nt comments

<s e c t i on>
bl a h blah
< а href=" ">Web hosting Ь у Lovel yHost "> WordPress
< р>< а href=" . .. " >Entries (RSS) -, and < а href=" ... " >Comments (RSS)
Обратите внимание на то. что для раздела «Blah Blah» элемент
не используется. так как ссылка на мой веб-хост, моя фото графия и две RSS-ссылки не являются «разделами. СОСТОЯЩИМИ из навигационных блоков» (так в спецификации определен

, благодаря чему заголовки боковой панели оказываютсяна одном уровне в алгоритмеопределенияструктурыдокумента(болееподробно

об этом рассказываетсяв главе 2). Другой способ разметки - ис пользование одного общего элемента <паv > вместо нескольких Как сказал бы вам любой таксидермист. есть не один способ снять ШКУРУ КОШКИ.

в спецификацииговорится. что элемеНТ используется для создания «футера для расположенногоуровнем выше струк турированного контента или структурированного корневого

элемента». (<<Структурированный контент» - это элементы article.aside. пау , ве стл.оп] «структурированные корневые элементы» - ЭТОblосkquоtе. body. details. fieldset. td .)

Как и в случае с элементом несколько элементов

header. на странице может быть f о о t е r; мы вернемся к этому вопросу

в главе 2. А пока на нашей странице всего один футер. который

Proudl'f~ by

w""""-s.

EntrI_ (11.55 ) .nd

eomrn.1tb

(R58).

Рис. 1.8. Боковая панель моего блога, в которой помимо навигации содержатся сведения

об издательствах и фотографии привлекательных мужчин

44

•

Глава 1 является непосредственным потомком элемента

b ody. Как ска

зано в спецификации, «если В качестве расположенного уровнем выше структурированного контента или структурированного

корневого элемента выступает элемент b ody, футер применя ется ко всей странице» .

И далее: «элемент footer обычно содержит сведения о соот

ветствующемразделе -

информацию об авторе, ссылки на по

хожие документы, сведения об авторских правах и т. п,»

В нашем футере тоже есть сведения об авторских правах, кото рые мы заключили в тег <s mall>. В НТМL5 этот элемент был переопределен;раньше он относилсяк оформлению, а в

HTML5

он означает использование мелкого шрифта : «мелкий шрифт обычно характерен для отказов, предупреждений , правовых ограничений или авторских прав. Мелкий шрифт также ино гда используется для указания авторства или для соблюдения условий лицензирования» .

В футере иногда содержится не только упоминание об авторских правах. Там могут быть ссылки на политику конфиденциально сти, информацию о доступности (зачем же ее прятать?) и про чие подобные ссылки . Несмотря на указания спецификации, их следует объединять в элемент
(см. предыдущийраздел). Вы можете даже создать очень популярныйв настоящеевремя

«большойфутер», как на сайте http://www.thecssdiv.co.uk! (рис.

гцскк

тътпвн

WF.L<J\'Ы.осAL

kll1'l\.'fll4tl: blaer tJм bltW! ао

OftoO~t~,*lInri~Di4.

1a0A8l!

Х\!о Loцl ~ Unnl wonЬ U"-'!0l (О

-4aat af s

hМJМ.JJи :tt.~иМI

~):

[.л5Т _ F М

>r:ooch.ntЬroщ-mIl8ШJi7!

hnnA4dimon· Т,1,

-

,им

HPCOMING tIi.~IН~44~-,\m

J'tb1&, 1!'010f&ritt1a .... !"IA tmI. f"rtиllt'~,London.l;l:Ioit~llnpltl

f\:1:I.2i.НitФ I

)Ц! 1) . :lOI 4 f' IridILaVl!n Am!l , ~,LoobI. J:lD!БGm

r.1ted

4 oa tai 5

<ПIo> _

dnoN)

1Ha Ctw.~It'JC'[1

&1W..Jit:alt NE

:<.t:3-'.нkw OCl rt .Nu.~

1.9).

l.111lН.~AИ.I\t(~ :ilИ4I11111w.)..An; «I ~~~.;~ w..1

}otМ и.УI(JheI

SOloodltlwТWOrмall.S'

...

... tl't . OIOМ l.tpп4)

4outofs

M[vm..!.hXtnkw...'i!fW'...Ytl [

T.\-ТN J.hItw W1w8 Ь

T.L·I.J, ,,,

""IМI 'd .... 'Jtrk'flltnla1hw.

.. wt ci з

TJ. - . . тtrШp~D·(Doа)

:i!.JМlu.~'tаDIiI~fGИ

T. L -Ad:1:ТJ.f'.

"'"

~lfllQi:l tЬ .. t~ 0CI "0II1б11d

TJ - DNr5A11d GClDot Tj. -"OIIAiII'I:М8rtIrN«hl

IО nlolQ~otbпp1;lcal

••

SDll.tots

T~ ·.~Shtw(f'l:.Job.D~

6*iVJtl'J ~~ .D.! x:n

4lI J~l rrt _II JV1IJW1L.

ф

2 00 1 1.0 . 1 ' ''C I(IQ ~' . DIS J CN ВТ It.OGGI20 C т и в A I" O f'Е ла S О N I' t I D

Рис . 1 .9 .«БольwоЙ футер» сайта

http://www.thecssdlv.co.uk!

Логично помещать ссылки на другие страницы в элемент

внутри элемента

-

но сначала спросите

себя, является ли частью футера или-же его лучше поместить на одном уровне с футером. Ведь ссылки на другие страницы скорее косвенно относятся ко всей странице, чем

к содержимомуфутера.

Основная структура Здесь я использовал бы такую разметку.

Twi tte r

Fl i c kr

We Lov e Lo c a l

Up corn i ng <s rna l l> &c oPYi 2 007 Ross Bruniges. Design , Blogging Tips and Pearsonified< /srnall >

Ьу

На рис.

1.10 показано,

как можно обойтись без «большого фу

тера».

header nav

div id=rnainContent

Рис. 1.1О.Объединение внешних ссылок в элемеНт < aside >, относящийся ко всей странице, во избежание слишком большого футера

•

45

46

•

Глава

1
Основная область контента главной страницы этого блога со держит несколько записей. Для каждой из них мы используем

элемент <article>. Он определяетсятак: «Элемент <articl е> представляетсобой самодостаточныйкомпонентстраницы,до кументаили приложения,предназначенныйдля многократного

использованияи свободногораспространения,например, при синдикации».

Запись блога, руководство,заметка новостей, комикс или ви

деозапись с расшифровкойполностью соответствуютэтому определению. Обратите внимание на то, что, как и в случае с <пау>. заголовок должен располагатьсявнутри элемента, так

что следующийкод некорректен.

My article <article>
Blah blah

Правильный вариант выглядиттак.

<article> My article
Blah blah
у элемента <article> есть и другие интересныеособенности, которые (как вы, наверняка,догадались)мы рассмотримв сле дующей главе.

ЗАКЛЮЧЕНИЕ в этой главе мы познакомилисьс HTML5 и его типом документа

(DOCTYPE). Мы узнали

о достаточно мягких правилах синтак

сиса, позволяющих свободно использовать строчные и про

писные буквы, кавычки и минимизацию атрибутов, а также опускать подразумеваемые элементы вроде head/body И стан

дартные определения наподобие t ур е = " t е х t / j а v а s с r i р t " И "text/ css" В тегах <script> и <style>. С помощью эле ментов <пе а о е г >» <Го ог.е г >» <п ау>э

И <н г г ь с Ге >

мы создали структурированную веб-страницу, предоставляя

браузерам семантически более богатую структуру, чем набор лишенных смысла универсальных элементов

были единственным вариантом в

,

которые

HTML 4; мы также создали оформление для новых элементов с помощью CSS. Неплохо для одной главы, не правда ли?

Глава

2

ТЕКСТ

Брюс Лоусон

Текст Теперь, когда вы написали разметку для основных частей стра

ницы с помощью

HTML5

и увидели, как создается структура

документа, пришло время заглянуть глубже и познакомиться с различными способами организации контента. Для этого вы создадите НТМL5-разметку для стандартного

блога. Мы выбрали именно такой тип сайга потому, что более

чем у 70 % профессиональных веб-разработчиков есть свой блог

(www.aneventapart.com/alasurvey20081).

и каждому хотя бы раз

в жизни приходилось видеть блог, Кроме того, это иревосход ный прототип для современных сайтов с заголовками, футера ми, боковыми панелями, множественными павелями навигации

и формой

-

элементами, использующимися как в блогах, так

и в новостных сайгах и сайгах-брошюрах (где вместо новостей указывается информация о продуктах).

СОЗДАНИЕ СТРУКТУРЫ ОСНОВНЫХ ОБЛАСТЕЙ КОНТЕНТА Посмотрите на основную область контента одного из блогов (рис.

2.1). Она может состоять из нескольких статей, каждая из

которых содержит метаданные и непосредственно текст статьи.

Hello

мr

L4St Weekl

Jonuary 24th, 2010

Oear ДaI

iМrLastWeek.

I do hope

уou ате

wel.

my IoУI! ,

Posted in Chums I Edd: I No Comments •

Cheese. I love tt. 00 Jвnuary

24th. 2010

When

11'\the

уои?

middle east, I recommend buyino yours

Nazareth. А marvelous

"от

етроПum.

Posted '" Cheese I Ea~ I No Соmmentо •

Hello Remyl Janu&I)'

тъе

24th, 2010

bett.... Ioolong author 01this book о"",, greotlngs ! Posted in chums I Edit I No Comments •

Hello JaIМll)'

Митl

24th, 2010 Ротеа lГ1

Рис.

Chums I Edit I No Comments •

2.1. Несколькостатей в типичном блоге

Cheeses of

• 49

50

•

Глава

2 Вот пример стандартной разметки (упрощенной по сравнению

с темой

WordPnnt, использующейся по умолчанию):

с 1 а s s = "р о s t " >
Memoirs of а Parisian lion-tamer
January 24th, 2010

Claude Bottom's poignant autobiography I is this summer's must-read.

<р class="postmetadata">Posted in <а ----, href="/?cat=3">Books category I <а -, href="/?p=34#respond">No Comments

Такая разметкав общем-тоне является неправильной(хотя со мнения вызываетиспользованиев

HTML 4 элемента представ

ления для оформления даты). Она будет нормально работатьв «НТМL5-браузерах»,но кроме заголовкасообщения бяога в документе нет ни одной реальной структуры -

толь

ко семантически нейтральные элементы и параграфы.

HTML 4 предлагает нам использовать для разметки

контента

обобщенные структуры. К примеру, - это обобщенный «блок», который сообщает браузеру что-то вроде «вот тут есть что-то, и оно рассматривается как нечто целое», однако этот

элемент не имеет значения; никакой семантики, выходящей за рамки выражения «оно рассматривается как нечто целое», здесь

нет. Там, где это возможно, мы заменим обобщенные блоки но выми НТМL5-элементами; если в каком-то случае мы не найдем

подходящего нового элемента, будем использовать так, как мы делали это в

HTML 4.

Давайте сначала сосредоточимся на отдельной статье. Как уже говорилось в главе

1, внешний элемент , однако

можно заменить на

v

с 1 а s s = "р о s t " >

это далеко не все.

НТМL5-элементы
И
могут использовать ся на страниценесколькораз; в каждом таком случае они будут относитьсяк тому разделу, в котором находятся.

Заголовок и время добавления статьи относятся к «предва рительным данным» и, следовательно, к сфере применения

элемента<ле аое г:» не так ли? Аналогичнымобразомдля мета данных, которые в настоящиймоментзаключеныв параграфсо значением class="postmetadata", лучше всего использовать

< f о о t е r >, который «обычно содержит сведения о соответству ющем разделе

-

информацию об авторе, ссылки на похожие

документы, сведения об авторских правах и т. п,».

Текст Схематически новая структура статьи блога показана на ри сунке

2.2.

<artic1e> heading (just

date)

~cle :text

(metadata) Рис. 2.2. ОТдельная статья блога с использованием новых структур НТМLS

Memoirs o f а Par i sian lion-tamer J a n u a r y 2 4 t h , -, 2010
Cl a u d e Bottom's poignant autobiography -, is this summer's must-read .
Posted in < а hrеf=n /?саt=З >Bo o ks -, c a t egor y . , No Co mme nt s n

Давайте посмотримна этот код повниматenьнее.

ЭЛЕМЕНТ <TIME>

- это новый элемент, ПОЗВ01JЯIOщий однозначно коди ровать даты и время и отображать их на экране в привычном Д1IЯ нас виде. Понять, дм чего это нужно, довольно просто:

браузер сможет добввяятъ предстоящие события в календарь пользователя; arpеraторы контента смогут создавать визуаль

ные временные шкалы с указанием событий; браузеры.локanи зованные в Таиланде. смогут отображать даты по буддийскому календарю, то есть значение года будет на

543 больше,

чем Д1IЯ

западных стран .

В спецификации говорится, что «элемент обозначает либо время по 24-часовойшкале, либо точную дату по прояеп-

• 51

52

Глава

2 тическому григорианскому календарю с возможным указанием времени и смещения часового пояса

•.

Считываемая часть элемента < t ime > обычно заключена в его атрибут da tet im e, а в качестве контента элемента указывается то, что будет видеть конечный пользователь.

1 3 November 2009 1 3th , November last ye a r Bru ce' s 21st , birthday< / time > 8PM , о п ту bi rt hday 8 PM< / t i me > Если считываемый формат совпадает с тем, что должен ви деть конечный пользователь, вам не нужно добавлять атрибут

date time. В таком случае браузеры найдут нужный контент и распознаютего.

20 :00 J'

•

Чтобы дата могла считываться автоматически, она должна быть в формате YYVY-MM-DD; время , которое также может быть указано , задается в формате НН:ММ с добавлением разделяющего префикса «Т». Если вы хотите добавить секунды, отделите их от минут с помощью двоеточия. Доли секунды добавляются после точки. Как вы видели выше, можно указывать только время по 24-часовой шкале (без даты) .

Если вы указываете и время, и дату, необходимо указать часовой пояс : используйте «Ь для Всемирного координированного времени (UТC) или задайте смещение относительно и минутах с префиксом

Итак, вот что мы получаем :

полудня

UTC в часах

«+» или «-».

«1979-1 Q-14T12:00:00.001-04:00» означает одну миллисекунду 14 октября 1979 года по летнему восточному времени (UТC-4 часа).

после

ЕдинственНая проблема, связанная с элементом < t ime >, состоит в том, что дата по пролептическому григорианскому календарю

должна быть положительной - иными словами, нельзя указать дату до Рождества Христова. Также нельзя использовать непол ные даты, такие как «ИЮЛЬ

1904•. это существенно ограничивает

использование этого элемента для сайтов муаеев, исторических сайтов и энциклопедий, генеалогических деревьев и т. п., где

точные даты могут быть попросту неизвестны.

Текст 'АТРИБУТ PUBDATE С помощью булева атрибута pubda te можно указать, что дан ный элемент обозначает дату публикации элемента

<article> или всего контента . у вас может возникнуть логичный вопрос: зачем этот атри

бут вообще нужен? Почему нельзя считать, что любой внутри тега

элемента <article> является датой его

публикации? Рассмотримследующийпример.

<article>
Come to ту party оп 1 I December
Published оп 20 June 2010

I'm throwing а party at Dr Einstein's Cabaret Roller-disco Bierkeller Pizza-parlour-a-gogo. Do соте and dance I to Rusty Trombone's Swingin' Brass Band. I (Formal dress and lewd hat required.)
I

I

I

Здесь в элементе
вы видите две даты: дату вечеринки

и дату публикации статьи. Атрибут pubdate снимает эту не однозначность.Кстати, приходите, только не пейте слишком много.

КОЕ-ЧТО ИНТЕРЕСНОЕ06 3ЛЕМЕНТАХ

И

Вот главный сюрприз, с которым мы сталкиваемся при создании

новой разметки для нашей статьи: дело в том, что каждая статья

может иметь свои собственные элементы
И
. Это значит, что помимо всей страницысобственныезаголовки и футеры могут быть также и у статей. И для них можно создать отдельные таблицы стилей: body>header и body>footer от сылают к основнымзаголовками футерам (предполагается,что

они являютсяпрямыми потомками header и

article>footer отсылают к внутреннимструктурам.

Чтобы стили правильно отображалисьв старых версиях IE, можно воспользоваться одной особенностью этого браузера: задать стили для основного заголовка и футера, а затем пере

определить их для заголовка и футера статьи.

•

53

54

•

Глава

2 header {display:block; color:red; text-align:right; }/*заголовок страницы */ article header {color:blue; text-align:center;} /*заголовок статьи */

I

I

Обратитевниманиена то, что до сих пор вы еще не использова

ли приемы с атрибутамис 1 а s s И i d. ИСПОЛЬЭОВАНИЕНЕСКОЛЬКИХЭЛЕМЕНТОВ
ВНУТРИ ОДНОГО ЭЛЕМЕНТА

В спецификацииговорится:«футерыне обязательнодолжнырас полагатьсяв конце раздела, однако чаще всего это так»; согласно

спецификации,элемент может иметь два или более футеров. Упрощеннаяверсия примера,приведеиногов ней, выглядиттак:

Back to index ...

Lorern ipsum

Lorern ipsurn

Back to I index ...
I

Причинаэтого в следующем:предполагается,что эти элементы

не являютсяэлементамипредставления.Если футер «Back to in-

dex» расположен

внизу статьи, а вы хотите, чтобы он находился

также и вверху, для этих одинаковых фрагментов контента сле дует использовать одинаковые элементы (независимо от того, где они расположены).

ЭЛЕМЕНТЫ
ВНУТРИ
Интересно, что элемент
также может иметь

футер; это очень удобный способ указать источник так, чтобы он был не только однозначно привязан к цитате, но и пра вильно отображен на экране (раньше атрибут с i t е элемента

не поддерживалсябраузерами).
Thou look'st like antichrist, in that lewd -, hat.
Ananias Scene 4.3, <а href=''http://www.gutenberg.org/ -, fil е s / 4 О 81/ 4 О 81- h / 4 О 81- h . h trn" >The -, Alchernist (Ben Jonson)

I

Текст

ДОБАВЛЕНИЕ СООБЩЕНИЙ БЛОГА И КОММЕНТАРИЕВ Итак, у вас есть страница с заголовком, футером, панелью на вигации, основной областью контента с несколькими статьями (сообщениями блога), у каждой из которых есть свой заголовок

и футер. Так, подождите ... что же это за блог без комментариев? В спецификации рекомендуется использовать для этого вложен

<а r t i с 1 е > : «если вы имеете дело с вложенными <artic1e >, внутренниеэлементы <artic1e> пред

ные элементы

элементами

ставляют собой статьи, в общем-то, связанные с содержимым

внешнего элемента <artic 1e>. К примеру, в записи блога на сайте, поддерживающемдобавление комментариев пользо вателями, для комментариев могут использоватьсяэлементы

arti c1e, вложенныеB<arti cle > записи бдога», Давайте так и сделаем. Обратите внимание на то, что коммен

тарии блога обычно располагаются в хронологическом порядке и содержат дополнительные сведения (например, имя автора и

URL), которые,

по сути, являются заголовочной информаци

ей. Схематически это выглядит примерно так, как показано на рис.

2.3.

<article> heading (just date) Article text
(rnetadata) <article> date

anд

time

Comrnent text <article> another comrnent Рис. 2.3. Структура сообщенияблога, где комментарии добавленыс помощью вложенныхэлементов <article >

Код выглядит так, как можно было ожидать; комментарии в нем выделены.

Come t o т у p arty о п 1 December

•

55

56 •

Глава

2
Publ i s h e d оп 20 June 2 0 1 0< /t i me>< ! p > < / h e a d e r>
I ' m thr owing а p ar ty a t Or Einstein's ~ Cabaret Roller-disco Bierkeller ~ Pizza-parlour-a-gogo. 00 соте and dance to , Rusty Trombone's Swi n g i n ' Brass Band. , (F ormal dress and lewd h a t r equ ired .)
< f o o t e r> Pu bl i s h e d in the Parrtay !! ca te g or y ~ Ьу Bruce -, < /footer > ~

<article>
Comment from <а -, href=''http://remysharp .com''>Remy ~ Sharp at ~ 8.45 оп 1 Мау 2010

I'll Ье there. I very much enjoy ~ а bit of Rusty TromЬone.
<article>
Comment from <а -з href=''http ://splintered. , co.uk">Patrick ~ Lauke at lO . 45 ~ оп 2 Мау 2010

Sorry mate. Am washinq ту hair.
< ! - - end blogpost -->

РАБОТА СО СТРУКТУРАМИHTML5 Некоторые приложениядля обработки текста позволяют про

сматриватьструктурудокумента. На рис. 2.4 покавана эта глава в режиме структуры Мicrosoft Word2007. В

HTML5

есть строгий алroритм определения структуры до

кумента, который позволяет агентам пользователей строить

похожие структуры для веб-страниц. как и в случае с програм

мами обработки текста, это может понадобиться для того, чтобы

Текст

•

57

пользователь мог быстро получить общее представление о стра нице (и. хроме того. нет причин считать. что веб-страницы не

являются по своей сути приложениями для обработки текста). Еще одна область применения этого алгоритма

синдикация:

-

вставляя часть содержимого в другое место. вы можете быть уверены. что на новой странице контент сохранит свою логи ческую структуру.

о the.R~_.ttribut8

О Моге

О

nmwfth headers and footers

о

MultlDle footef. оп the !l8f~e el8II'I8I1t

О

Bloc kguote

tootef.

HTML5 and WAI-ARIA О О

ARIA ОосuтепС Stтucmre and Landma,* Ro/es Relatfonshlp Ьемеп ~RIA and HTML5

О

BIQgposts and comments

О

Structuring textual content

О

О ТЬе ourJlnlng

algortthm

Рис. 2.4. Режим структуры Мiсrosоft Word

2007

в этой части главы вы найдете достаточно много информации. И хотя новые возможности. описанные здесь. еще не реали

зованы ни в одном браузере (правда. существует

JavaScript-

реализация: http://code.google.com/p/h50/). для правильного ис пользованияэлементов <весгл сп> ,

И

вы должны

хорошо представлять себе. что такое структура документа. Перед тем как мы двинемся дальше. важно познакомиться

с еще одним понятием, отличающим которые НТМL5-элементы И

-

-

HTML5

от

HTML 4: не

<а г тл. с Г е > , <ве с г л.оп> ,

являются cmру"mу.рuрованным контентом и слу

жат началом новых разделов в структуре, Чтобы было понятнее, рассмотрим простой код:

Hel lo
Worl d

Рис.

2.5. Простая

структура

Чтобы продемонстрироватьработу алгоритма. я использую сетевуюутилитуgsпеddеrs.htmI5.0rg/оutliпеr/.п осколькуэтот ал

горитм не встроен ни в один современныйбраузер. Этот кодге нерируетту структуру.которую и следовалоожидать (рис. 2.5). На рис.

2.6 покаэвно,

как изменилась струхтурапосле замены

семантически нейтрального элемента

на

<а r t i

который является структурированным контентом.

с 1 е >.

1. Hello

1. World Рис. 2.6. Структура документа после замены

элемента

v> на

58 •

Глава

2 Hello <article> World Как вы видите, появление структурированногоконтента из менило иерархиютак, что элемент

<art iсlе>оказался«ниже»

остальногоконтента.Прощеговоря, ; расположенный вну три статьи, логически является

; поскольку <а rt i с 1 е >иачи

нает новый раздел. Использование

вместо

<section>;

<паv>и

< а r t i с 1 е > будет иметь такой же эффект, так как

все эти элементы являются структурированным контентом.

На самом деле, не важно, какой уровень заголовка вы здесь используете; алгоритм определения структуры учитывает

вложения и относительные уровни, так что следующий код

будет иметь точно такую же структуру, как и' предыдущий (см. рис.

2.6).

Неllо

<article> Wоrld

Вы, возможно,скажете: «Ну И что! Зачем все это нужно!» Что ж, во-первых,это означает, что вы не ограниченышестью уровня

ми заголовков,как это было в

HTML 4. Заголовочный элемент

внутрисемиуровнейэлементов

<article>; <section>,

или <аsidе>(илилюбой их комбинации)логически является элементом

< h 7 > (правда, использование такого количества

уровней может быть оправдано, только если вы создаете раз метку правовых документов или других ужасных вещей; иначе

вам следует пересмотреть содержимое вашего документа). Еще одно преимущество структурированного контента

-

син

дикация, Предположим, что Реми добавил такую статью:

<article> What 1 did оп ту holiday
I went to Narnia. 1 was bitten а trilobite. Then 1 сате home.

Ьу

I

I

Предположим,вы работаетев крупнойинтернет-газетеи хотите

добавитьэту историю. Когда волшебнаяпрограммадля синди кации добавит ее ~ ваш шаблон, получитсятакой код.

The Monotonous Times <section>
Breaking news
<article> What 1 did оп ту holiday

Текст
I went to Na rnia. 1 was bitten Ьу а t ril obite . Th e n 1 с ат е home.
~

Очевидно, что в иерархии заголовок

«Breaking news» находится

выше, чем заголовок сообщения блога Реми, но из-за несо гласованности шаблона Реми и вашего шаблона элемент оказывается важнее элемента

.

Однако, если мы посмотрим на схему, мы увидим, что все на

ходится на своих местах (рис.

Рис.

2.7). Отлично!

2.7·Алгоритм строит правильную структуру

и при синдикации

,
И РАЗДЕЛЫ БЕЗ ЗАГОЛОВКА А сейчас я немного расскажуоб инструменте gsnedders.htmIS.org/

outlinerl, поскольку, скорее всего, просмотр структуры докумен та в процессе его разработки станет для вас привычкой, так же как валидация кода и проверка его работы в разных браузерах. Если это приложение обнаруживает структурированный кон тент без заголовка, оно сообщает об этом.

<ar t ic l e>
I ha ve

по

headi ng

в таком случае вы получите структуру

«Untitled Section».

особенно полезно для элементов < s есt i оп> и

,

Это ко

торые, как правило, должны начинаться с заголовка.

Внутри элементов <п аv> и

, наоборот, может не быть

заголовка. для блоков
, таких как «Популярные сообще ния» или «Недавние комментарии», использование заголовков

может быть и оправданным, но вы вряд ли захотите добав лять к панели глобальной навигации явно лишний заголовок «Панель навигации».

Таким образом, если вы видите

«Untitled Section», это не значит,

что вы обязательно должны добавить недостающий заголовок. Считайте это предупреждением, а не ошибкой. Идея использо вать для разделов <п аv> без зaroловка менее строгие сообщения пока что не приведена в исполнение.

•

59

60

•

Глава

2 Иногда помимо заголовка используется подзаголовок или сло

ган: на сайте Slashdot - «news for nerds. News that matters», на dev.Opera - «Follow the standards. Break the rules», на Metafilter«community webblog». Как следует писать разметку для таких слоганов? В HTML4 можно было сделать это так:

Me t a fil t e r
c ommu n i t y weblog
Но это не очень правильный вариант, поскольку слоган

-

это

в каком-то смысле тоже заголовок. Еще один способ выглядел так:

Me t a fil t e r c ommu n i t y weblog < /h2 > Но в таком случае ДЛЯ всех остальных заголовков сайта при дется использовать теги < h З> -< h 6> , так как в иерархии они

будут находиться ниже слогана, В НТМL5 подзаголовок можно

разметить как заголовок, так чтобы он не отображался в струк туре документа.

Me t a fil t e r commu n i t y weblog < /h2 > < / h g rou p>

1. Metafilter Рис. 2.8. Частью

Структура этого кода показана на рис.

2.8.

По поводу в спецификацииговорится следующее:

«для удобства получения информациио структуре документа

структурыявnяется

и других похожих сведений текст элемента опреде

только заголовок

ляется как текст заголовка самого высокого уровня (hl-h6) из

«Metafilter»

числа потомков этого элемента hgroup».

Таким образом. в структуредокументасо следующимкодом бу дет отображатьсятолько «Remy Sharp», поскольку это заголовок самого высокого уровня внутри группы.

<ar ti c le> Ge t the beers in! Here comes
Re my Sharp! ПРИМЕЧАНИЕ в этом примере внутри 'hзгdеr>.

'l!eader> -

" 5.=,: i .; Xo:> мы не использовали элемент это элемент, который группирует пред

варительные данные; поскольку здесь у нас есть только заголовки,

уже объединенные в , еще одно объединение было бы

хотя и не ошибочным, но явно излишним.

СТРУКТУРИРОВАННЫЕ КОРНЕВЫЕ ЭЛЕМЕНТЫ Некоторые элементы

- . . .

< fiеl ds е t> . и

-

назывaIOТCJl стР>"'тypuрованны

ми 1Wрниыми элементами; они могут иметь свою собственную структуру. однако их внутренние разделы и заголовки не учи

тываются при построении структуры своих предков. Так про исходит потому. что если. например. в

Tere

вы

цитируетенесколько разделов какой-либостатьи. эти разделы не имеют отношенияк общей структуредщqыента. В следующем примере содержим:оене входит

в структурудокумента(рис. 2.9).

Un icorns and ЬuttеrПiеs
Main n av Fa ir ies l ov e r a inbows!
Ac c o r d ing to Mr Sn u g g l e s t he Пuffу kitten, fairies ..., like:

< hЗ> Р rе t t у dainty thiпgs< /hЗ >
Fai r ies l o v e r a inb ows , ribbons, ..., a nd ball et sh oe s
< h З> Wе а ро п r у

Fa i r i e s favour Kalashnikovs, ..., knives, and ..., depleted uranium missiles

Пiсk

il.. Unicorns and butterflies 1. Машnаv

2. Fairies love rainbows!

Рис.

2.9.

Структура не включает содержимое

структурированного корневого элемента

СОЗДАНИЕ СТИЛЕЙ ДЛЯ ЗАГОЛОВКОВ В HTMLS Цсе эти преЫУДРОС11l представляют серьезную проблему для авторов CSS. Р-ассыотр,ви следующий код.

<article><section> ... <article><article> . .. < /article>< / article >

12 •

Глава

2 <section><section> ... <section>
...
.•• Посколькуэти элементы потенциальномогут относитьсяк од ному логическомууровню, вполне возможно,что вам вахочется

применитьк ним одинаковоеоформление(а возможно и нет). Это может привести к добавлению огромных блоков правил в таблицыстилей.Уже некотороевремя ведутся разroворыо но вом псевдоклассеилипсевдоэлементеCSS

: he а di ng (n)

-

ero

добавление было бы возможным (потому что браузер «знает» об

уровне заголовка благодаря алгоритму определения структуры) и существенно облегчило бы написание стилей.

*:heading(l) */ *:heading(2)

{font-size:

2.5ет;}

{font-size:

2ет;}

/*

/*

логический

логический

*/ Однако на момент написвнияэтой книги это всего лишь чудес

ная мечта. В качестве временного решения проблемы МоzШа пытается внедрить в ночные сборки Firefox новый механизм объединения селекторов под названием

: -то z - an у ( ), который - см.

поввояяет использовать новую форму краткой записи

hacks.mozilla.org/2010/05/moz-any-selector-grouping/. По этой причине вы, возможно, будете использовать только элементы , поскольку так буцет проще создать оформление,

а всю остальную работу возьмет на себя алгоритм опредеяеввя структуры. Ведь в спецификации говорится: «разделы могут содержать заголовки любого уровня, однако разработчикам вастоятеяьно рекомендуется использовать либо только элемен ты

< h 1 >, либо заголовки того уровня, который соответствует

уровню вложенности раздела». Но делать этого (пока) не стоит, поскольку при этом снижается доступность.

АЛГОРИТМ ОПРЕДЕЛЕНИЯ СТРУКТУРЫ И ДОСТУПНОСТЬ Недавнее исследование

WebAim покааало,

что

76 % пользова

телей программ экранного доступа «часто или всегда» пере

мешаются по странице с помощью заголовков (с полными ре зультатами исследования можно ознакомиться на www.webaim.

org/projects/screenreadersurvey2/). Эти люди используют иерархию заголовков как для того, чтобы составить мысленное представ

ление о документе (то есть определить его структуру), так и для

того, чтобы перемещаться по его содержимому. В большинстве программ экранного доступа для перемещения по заголовкам

Текст

• 63

предусмотрены специальные сочетания клавиш. К примеру,

JAWS использует

клавишу Н для перехода от зarоловка к ваго

ловку, клавишу 1 для перехода к следующему < h 1>, клавишу 2 для перехода к следующему
и т. д.

I Посмотрите замечательное видео под названием «Значение НТМL-заголовков для доступности»

(<
мощью

JAWS. В

идеальном мире любой профессиональный дизайнер или разработчик обязан

был бы посмотреть и понять это видео. Но, к сожалению, это не идеальный мир.

в настоящее время ни один браузер при построении внутренней модели страницы не учитывает всех сложных правил, упомя нутых выше, и, следовательно, не может передать эту модель

программе экранного доступа или вспомогательной технологии.

Поэтому использование только элементов делает невоз можной навигацию по сайгу и тем самым снижает доступность вашей страницы. Поэтому мы советуем следовать указаниям, приведенным

в спецификации: «используйте зarоловки того уровня, который соответствует уровню вложенности раздела». Иными словами,

следите за тем, чтобы на ваших страницах иерархия заголовков

оставалась правильной даже без учета новых НТМL5-элементов. Эrо также упростит написание таблиц стилей. По поводу случаев, когда статьи добавляются на сзйт с другого сайта и логический порядок уровней может быть нарушен, я скажу вот что: абсолютно ненаучный опрос пользователей программ экранного доступа, проведенный сайтом Тwitter, показал, что плохо вложенные зarоловки разделов лучше, чем

использование заголовков одного уровня (что, в свою очередь, лучше, чем полное их отсутствие).

Сделайте все, что в ваших силах, и ждите, пока браузеры и зави сящие от них проrpаммы экранного доступа внедрят алгоритм

определения структуры. Как я уже сказал, это не идеальный мир.

в ЧЕМ РАЗЛИЧИЕ МЕЖДУ

И

<SECTION>?

Эrот вопрос нам регулярно задают на htm5doctor.com,

Статья

(article) -

это независимый, обособленный фрагмент

дискретного контента: например, сообщение блога или но востное сообщение. В веб-приложении элемент <article>

64 •

Глава

2 может использоваться для отдельных электронных сообщений в почтовой программе или репортажей в клиенте для чтения

RSS-лент, поскольку каждое электронное письмо или репортаж,

являясь компонентом приложения, может быть использовано независимо от него.

Рассмотрим статью блога/новостей из реального мира.

<article> Bruce Lawson is World's Sexiest Man
Legions of lovely ladies voted luscious lothario Lawson I as the World's Sexiest Man today.

Sесопd-sехiеst man concedes defeat

Remington Sharp, jQuery glamourpuss and I Brighton roister-doister, was gracious in defeat. "It's cool being the second sexiest man when number one is Awesome Lawson" he said from his swimming pool-sized jacuzzi I full of supermodels.

I I I

Она может быть добавлена на какой-либо сайт (с помощью

RSS

или других средств), и она понятна без дополнительных

уточнений. Точно так же, как вы можете добавлять не целое

сообщение, а только его часть, интригующая цитата из статьи остается статьей.

<article> <а href=full-story.html> Bruce Lawson is World's Sexiest Man
Legions of lovely ladies voted luscious lothario Lawson as the World's I Sexiest Man today.

Read more
I

Как мы уже знаем, комментариик сообщениямбяога - это эле менты

< а rt i с 1 е >

внутри родительских элементов < а rt i с 1 е > .

Такое вложение может использоваться и в других ситуациях,

например, при добавлении расшифровки к видеозаписи.

<article> Stars celebrate Bruce Lawson <article class=transcript>

Текст

• 65

Tran5cript

Supermode1 #1: "Не' 5 50 hunky!"

Supe r mode1 #2: "Не' 5 а 5nogtabulous bundle ~ of gorgeou5 manhood ! And 1 5aw him fir5t, ~ 50 hand5 off !"
«БЛОЧНЫЕ» ССЫЛКИ

Внимательно посмотрев на этот пример, вы заметите, что «блочные» элементы можно заклю чать в ссылки . В спецификации

HTML 4 это не разрешено, поэтому вам пришлось бы заключать «read тоге» в отдельные элементы ссылки,

заголовок, абзац с интригующей цитатой и фразу указывающие на один и тот же адрес.

HTML5 одна ссылка может заключать в себе весь элемент - 3.Т!:' с \о: • В XHTML 2 был похожий механизм, позволяющий добавлять " . ._. к любым элементам, однако он, В

конечно же, не обладает обратной совместимостью; современные браузеры просто посмеются

над <л : '.

, . 1 ':0;;= " ;:u.l L-:c _

;: v. : ;:""_

">

и проигнорируют ссылку. Интересно, что «блочные

ссылки» в настоящее работают в браузерах после пары подсказок -

вспомните httpl/mattwilcox.

nеt/sапdЬох/htm!5-bIосk- . 'r 1С h о г/tе st . htm l .

Ну, почти. В

Firefox

есть ошибка парсинга, которую Рем и называет

..:oт/2009108/~ O/defini"g-the-vom;t·bug/). Из-за нее некоторые новые НТМL5-элементы вроде . ми

-

se ctJ

Firefox

«Vomit Bug» (,emysharp.

не отображает якори, содержащие

,Г;'> . Правда, делать целые разделы ссылка

довольно странная идея. Если вы ограничиваетесь использованием

- Firefox работает нормально. если отключить парсер HTML5.

пара графов, заголовков, изображений и т. д. известная ошибка, которая исчезает,

HTML 4-элементов Это тоже достаточно

Так как браузеры уже умеют работать со ссылками вокруг блочных элементов, и мы имеем дело с примером, в котором их как раз и нужно использовать, у нас нет причин сохранять ошибки в структуре.

Сама расшифровка представляет собой законченный фрагмент контента, несмотря на то, что он относится к видеозаписи, рас

положенной во внешнем элементе
i c l e>. В спецификации

говорится следующее: «если вы имеете дело с вложенными эле

ментами

article, внутренние элементы article

представляют

собой статьи, в общем-то, связанные с содержимымвнешнего элемента

article».

<SECТION>

Элемент<весгьоп>, напротив,не является «компонентомстра ницы, документа, приложения или сайга, предназначенным

к многократномуиспользованиюи свободномураспростране

нию». Это либо способ разделения страницы на несколько те-

ее

•

Глава

2 матических областей. либо способ разделения статьи на (иначе не скажешь) разделы.

Элемент ' с ;о С:-:.: L

:

'~Тl';- обычно начинается с заголовка, содержащего вводную информацию .

Исключением может быть раздел в котором заголовок добавляется с помощью

JavaScript. Если

вы не собираетесь добавлять заголовок, или же вам просто нужен элемент-контейнер для соз дания оформления. лучше использовать -:ji 7>.

Давайте рассмотрим инструкции с предыдущей работы Реми во внебродвейской постановке «Волшебника из страны Оа» в разметке HTML

4.

Ru l e s for Munchkins
Ye l l o w Brick Road

1 t is vital that Dorothy follows it-so ~ selling bricks as "souvenirs"

по

Fa n Club uniforms
Al l Munchkins are obliged to wear their "11т ~ а friend of Dorothy !" t-shirt when representing ~ the club
< s t r o ng> Vi t a l caveat about the information ~ above : does not apply оп the first Thursday of ~ the month. Возникает вопрос: параграф

«Vital caveat about the information

аЬаУе" относится ко всей статье (то есть к тому. что расположено ниже ) или же только к информации. расположенной ниже ближайшего к нему

(<
В

HTML 4 этот

параграф будет относиться к . И не существует простого способа это изменить. В

HTML5 элемент <s e c t i o n>

снимает

эту неоднозначность (именно это мы. веб-рааработчики, по нимаем под термином «семантический").

Ru l e s for Munchkins <s e c t i o n> Ye l l ow Brick Road

1 t is vital that Dorothy follows it-so ~ по selling bricks as "souvenirs"
<s e c t i o n> Fa n Club uniforms

Al l Munchkins are obliged to wear ~ t h ei r "11т а friend of Dorothy!"

Текст ~ t-shirt when representing the club

< s t r o n g> Vi t a l caveat a bout the i n f o r ma t i o n above : does not apply оп the first Thursday ~ of the month. ~

Схематическоеизображениеэтой статьи покааано на рисун ке2.10.

article (Yellow Brick Road) section

(Faп

Club uniforms)

1....- Vitёil . .__ __

caveat _ _

Рис. 2.1о. Теп~рь видно, что cVltal caveat...относится ко всей статье

Если .бы этот параграф находился внутри последнего раздела, он бы однозначно относился только к этому разделу (рис.

2.11).

<s e c t i o n> Fa n Club un i form s
Al l Munchkins are obliged to wear ~ their "1'т а friend of Dorothy!" ~ t-shirt when representing the club
< s t ro ng>V i t al caveat about t he ~ inf ormati o n abo v e: does no t apply оп ~ the fir st Thu r sda y o f the mont h ~

cu:ticle section (Yellow Brick Road) section

(Faп

Vita1

Club

unifоrmз)

caveat

Рис. 2.11. Элемент <sectlon> снимает любую неоднозначность

Было бы некорректно разделять эту статью на логические фраг менты с помощью вложенных элементов

,

так как

• 67

68

•

Глава

2 эти фрагменты не являются самостоятельными дискретными единицами.

Отлично. Итак, мы увидели, что можно использовать <article> внутри <article> и <section> внутри <агтГс Ге>- Но еще можно использовать<article> внутри <весглоп>- Как же

дело обстоит в таком случае?
ВНУТРИ <SECТION>

Представьте себе, что ваша основная область контента разде

лена на два блока: в одном расположены статьи о ламах, в дру гом

-

о корнеплодах. Вот такой у меня контент.

Вы не обязаны размечать статьи о ламах отдельно от статей о корнеплодах, но вы хотите показать, что эти две группы те

матически отличаются друг от друга. Возможно, именно из-за этих отличий вы захотите поместить их в отдельные колонки

или с помощью

CSS и JavaScript создать

интерфейс с вкладками.

В HTML 4 мы бы использовали нашего хорошего, но семантиче

ски бедного друга . В HTML5 мы используем <ве стл оп>э который, как и < а r t i с 1 е >, запускает алгоритм определения структуры «di v> этого не делает, так как не обладает специ фическим структурным значением).

<section> Articles about llamas <article>
The daily llama: buddhism and South American --, camelids

blah blah

<article>
Shh! Оо not alarm
blah blah

а

llama

<section> Articles about root vegetables <article>
Carrots: the orange miracle

blah blah
<article>

Текст
Eat more Swedes -, people)

blah blah

(the vegetables, not the

Почему мы не используем вместо двух элементов < s е с t i оп>

элементы

<а r t i

с 1 е >? Потому что в этом примере каждый

элемент <section> -

это набор независимых единиц, каждая

из которых может быть добавлена на другую страницу,

- но

вы вряд ли станете добавлять на другую страницу весь этот набор.

Обратите внимание на то, что элемент < s е с t i оп> не обязан содержать много элементов

<а r t i

с 1 е>; он может состоять

из нескольких параграфов с различными сведениями, такими как лицензирование

Creative

Сопппопв, биография автора или

предупреждение об авторском праве. В нашем примере каждая статья может содержать подстатьи или разделы (об этом уже говорилось ранее) или и то и другое. Эстель Вейль приводит хорошую аналогию в статье на

www. standardista.com/htmI5-section-v-article: «Представьте себе газету. В газете есть разделы. Вы видите раздел спорта, раздел недви жимости, раздел «Дом И сад» и т. д. Каждый из этих разделов, в свою очередь, содержит статьи. А некоторые из статей поде лены на разделы.

Иными словами, можно создавать родительские элементы

<section>

с вложенными элементами <article>, в которых

есть один ли несколькоэлементов <section>. Не все документы

Pages должны быть устроены именно так, но это абсолютно до пустимый и корректный способ вложения элементов».

АНАЛИ3

WWW.GUARDIAN.CO.UK

Давайте продолжим тему газет и посмотрим на настоящий сайт.

Попробуем определить, где следует использовать новые струк туры. На рис.

2.12 покаван скриншот страницы моей любимой The Guardian на www.guardian.co.uk. Давайте посмотрим, как можно создать такую страницу с помощью HTML5. газеты

Хочу обратить ваше внимание на следующее: далее рассказыва

ется о том, как бы я создавал разметку для этой страницы; вы могли бы выбрать и другие структуры, и это нормально. Нет «единственно верного способа» сделать это; все зависит частич но от того, как вы будете использовать контент

-

собираетесь

•

69

70 •

Глава

2 ли вы передавать статьи в другие издания или же добавлять их из базы данных, чтобы каждая статья отображалась на несколь ких страницах с разной иерархией заголовков .

..._

_.._----_.._---_._--------------.-.--- ---------------------

Nf'Ир~р егw.Ь!J!. ':I f\t '.ar I31 ....c* 1010 ILaal IIpd*(!Jt,. ' " " 0fI. 1'I1ItII!t8 aqo 111:'NtDf..o .................... _-_ _- -------------_. __._---- ----.--.-.. --

~ ~~~~~~~~~~~~~~~~~~~~. ~~~~~!~~-;~~~.~ ~

W.dlI'f ' London . , _

guardian.co.uk !

News! Sport : Co~nt : Cultl~ : BU1~S ' MOJ1t'y , uh- &: ~'t)~ Тfo\'eJ : ЕuvirOW1')("лt ~ ТУ ': В1ор : V~ : Communit}": Job6 шс. ; \~ot'H ; Ulrited Sta~ . POJitiCg" }f~i.! ; ~tion : SotYty •Stifo~ , ТI!clшо1оgу : FootbaU'G uard1an : Obsrrver

Rre l ld hl!:"-";: LATfSf, Fmlr ccbookbildAn J«ЮIL'Il, mjtlnJd in сом), аш in SOtlth.Lm I ClW!u., Stra tbd.)~ pclioe""ю. Moro deцik~

...

Brown likely 10 stay as in hun g par liarnenl

РМ

~ ",;.I 1lJ. cI .,. ViItrIdcw lo ful m OO-n f'1Мl Un (le(

'l'MI'geI'lCJ OIotn «-nЩl~'М1ltehall

::'l34соlТllТlt'nts !Io ll\lf blo9: AII IIf orf-~OI'I IJUII ~р

.. GorOOnВr l1\lolllO plfd':l",""CUft onimro~ • PU tvDickrYaa(I*POi.onltl. l0po
UvE:latest весеге weather u pdates

L4S1 ut><W1К1 Ф" """"11 " ,1"

..I08I .w.a ~" tIIщ8!~ IQ'I)6'N~ ... n

lr.larn2аонlЗCoI8nd 0l iICi

tf;--O!

':]

::C:O~:,",,$.,II

j04. COI'ImМlS

• Sno"Onj)(М'tf8l'ld" an6DOn

. In (llctln s: SJW,"Q ~rн>'II' IrI SC04I ioI'ICI

Trending

Вest ofguardian.co.uk

15 Britain

R"(IptQI«._.paj)t'I.On_IUIN<,tI ~ ~.I· . . ~ ~ I \ t M

,

~ WIIm' of~alOn6 "

,I&I!'ftllln'lto lЮrr:

~ tof "0 10 1>I4I 11

NI'I~ fWl\l

,-•

l' ~"ihII. Hou , . aIow . ~ I)IhhOlf !lnl lln g

oi~;;t ord;;;·Sky s~rt;· 1.'''' ~!I'~ IOrI. ''tifI<М ''Il 1

»8<1. "1JULat!М' n; "

pnee

SS~:,Smu .. т»".•

-

C\l t

23 4'11Io оА10

too., .OI Qllr.jaroon Wltlf\O groundong11'I IlIaIItf'

."~iIIII. =-~

.....

Ьев '! еа\-е

- ,,,

-....~.,~

_"~!"'I1Il'"I WhIa1Qmt .'lOlan~ 1I. (OIOut ot ot

• • :!II.....,

'"9l "'

!NiI?NloswflenSllll ....

O'dI'"atr O'lI i,

rrie-f.;i....

1 T~b \Veekly live: P~rsonal pm'acy

1'!I'I<:JI "aI 'P!lC'I 'Cflatll l' n'''$'tЮ'I' '~ 'nd 8Т eJ зо (.()rtII'n .nh

UK ваеегв .tзbо short'

*

'...,.. vи.»о;\ " i(t mmvtt~

jU'JH 1i .85

Can\P8it;n.sand m \'flStip tio na ~:,;~~

О\)J,m. an
, .., ~tНI

81XU1"~, "' IЮi()CtOn Ol' II.

NOac OlQ.llal.' I.....

--_.

G.Or1:OК~O,

ISII . tor,.mna81 "М('4,, !)(I rn~

w+.ptI... ono+··

P'J!'Iktol'llOlllalon ()eIW'eM Мltt ~OUS ' 81 4

J..cчu" B..... J &: CDЬох..'Ч'1S

Вr<Ж t'J} ?

Col'J'Iff\IIItanoOl t*r rraon.м.1fhf'J trI4

,-.

-

to Цll h 1•• an4 "8II&l1f 411'r6 1n IЩltr-Wmpl:lllll 1o

.......

COf!sum" f oms dllS """'. d'l1In\I1I f""

~22c:omm mb

F~~-rele&.~h~ag~~-it~r 12 y~~ CoIomlli.... OUIfiII~hat>O )2.1'''H II4 , Qlcl tf

о-

PaoIoEmlliouontato aII<7Udt01I'I1!W7

Рис.

2.12. Главная страница сайта газеты Guardian

Достаточно легко заметить название бренда (вводное содержа ние) внутри элемента , который также включает две панели навигации по сайту (рис.

2.13).

Текст

•

71

guardian.со.пk News!Sport ~ Comtneп! i сшtvre ; Bt1Sines$ ! Mo~' i Lik & Iity~ : Trave1! EnWOfUheot : 1"\' ; 8Юss ~ V~ ~ Community ~ Job& lI1It uк : World : Uoited States ' Роёш : 1ofedi.a ; Educatvщ : ~ty : вееасе ; T~.hno\o&.v FootbaJI : Guaгdi.5n ' Ошn-еr Рис.

2.13. Название бренда

на главной странице сайта

газеты lПе Guardian

Сразу после заголовка расположена область под названи

ем

«Breaking news»

(<<Свежие новости») И «лента» С текстом .

Каждая сводка является ссылкой на более подробное описание (рис .

2.14).

ВreиJdu!!

Рис.

n<"''S : LATEST: Four schoolchildren ",riously injured ;11 соасЬ details 500n ._.

2.14. Область «Breaking news» на сайте

стзsЬ

газеты lПе

in SOl1thLanarksblre, Strathclyde police said, More

Guardian

Если не считать эффекта «ленты», добавленного с помощью

JavaScript, раздел «Breaking news»

представляет собой простой

список ссылок на другие страницы. Так что для него подходит элемент <п ау>, Не важно, что он горизонтальный и заголовок

расположен на той же строке;

CSS с этим разберется.

Br e a ki n g news < / h2 > Four sch o olch ildr en , in j u red . .. < /li> Te r r i bl e thi ng ha p pe n s to someone < / a >< / l i > Хотя визуально эта область кажется тесно связанной с заго ловком, это все же не вводное содержание и не глобальная панель навигации . Различие здесь очень тонкое, но я считаю, что ссылки на комментарии и страницы, посвященные телеви

дению и спорту, являются частью глобальной навигации, тогда как перемещение между новостными сообщениями на сайте

новостей

-

«упрощенный» вариант навигации на более низком

уровне. Таким образом, для этой области будет использоваться элемент

,

не являющийся частью элемента

а следующий после него.

< he a d e r>,

,а,

72

•

Глава

2 Справа от основной области контента расположена еще одна панель навигации (рис .

2.15).

Как мы уже знаем из главы

1, такая

боковая панель может

>, И у каждого из (<<Jobs», «Dating», «CD Ьох ветв»,

состоять из нескольких элементов < п а о

них будет свой заголовок

«Today's рарег»

и т. д.) на серо-голубом фоне с красной гра

ницей наверху.

g ua r d i a n j ob s< / h2> > < a href=t >Upload your CV
On l i ne Dat ing

....

On lbilate

<s e c t i o n>
Spo ns o r e d Features
Обратите внимание на то, что я добавил в

форму

поиска; я считаю, что формы поиска не менее важны, чем

собственно навигация. АRIA-атрибуту role я присвоил

.......

-

- .....

значение, соответствующеефункциямформы.

Раздел

«Sponsored

Реашгев» я не поместил в элемент < п ау> ,

поскольку это В целом не панель навигации; по-видимому,

его основная цель

-

реклама. Хотя вы можете со мной не

согласиться (обещаю, что не обижусь на это) и решите по местить все в один общий < п а у> .

g uard i a n j ob s< / h2> Upload your CV Рис.

2.15.

Боковая панель навигации, расположенная

в правой части сайта газеты

TheGuardian

On li ne Dating

Текст
Spons o r e d Features
А теперь посмотрим на основную область контента (рис.

Brown likely to stay as in h Ul1g рагйашепг

2.16).

РМ

"'" wШ gгt 1&-daywk1dowto Iorm OOll'emmanl under

lmergtl'\CJ'plan Фawn up ь)' WЫteп all ~36соrпments

~ M bIOO: AIIlhe pre- еl е Cll On I:\Uhdup • Goroon8Jown tQ pl8tJge n'W aJrb ОП immlgraeton .. PII to piet( тv deNl:e РОЗiliOn dIJe to poor eyesigtd

•

LIVE: \atest severe weather updates l ..t1 t.1Р G~ d '.)tIe·fI'I!fI W.эgo

; JOinМamGabban аэ

• =::::::a=~ out..г,ООО homes and dls rщ:Jl:IrЗlteI

~ 4comments

. 1rI •

SnowOJtз POWefandlJ ans pOft pidufe s: SPnnQ in SCoIIand

,now

__ _ _.. _ _.. _.. __ Networ k Rяil begi ns strike \ega\ fight RaiI operafor 51 ,.,., papers ОП unlOnIМ tnslзts talks' Эl е comJnuing betwe en l'I e two

·con з lrudмt вмее

с !ЗА warns Ofcancellatlons аз stan'tetum toWOfj(

C<>ngress pressed оеег Israel оtanсе

Tre nding ОЬзmз зno

!

Sarl!:QXy

EiiCtion'2010

19 the fory тaпra 3fI aocurat& desQiption of life

U 0 5 COW bomblnos

today, of gUbjaroon WJth no gfounltng tn r.al ~ AmeU GнU6mll n inveatlgales

r-::..

,.le pn edr"0fl8

Alpac drQ.ll.atез lelter CЗilingfofвмюЫler

pubIlc conffOnlabon !ЖWeRflWhlt е НOUSt
!''; ОЬ ата

and Sarti.ory unile ot\ Iran - and

Сашpaigns an d i ш·estigаtiопs CJlm
hal'1'ltlulgers :"':/; 'NNI:eнееве aRows Vifglnia O#вh Ole dl1!1ing

... r ~~~E]

Whlchcame-lUsL orange V'1 e colooror Ofangethe truit? And When вtur Wefe oetter than ~ !iIS .

Рис. 2.16. Основная область контента на сайте газеты The Guardian Неудивительно, что основная область главной страницы сайта газеты

The Guardian

целиком состоит из новостных статей.

Обратите внимание на то. что здесь нет основного заголовка. объединяющегосамые важные статьи (такого как «Тор

stories»

(<<Главные новостиьт) , иначе все это можно было бы поместить в тег

<sec t ion>. В нашем случае мы имеем дело с простым спи <s e c t ion> для этого не подходит. при

ском статей. Поскольку

необходимости (например. для создания оформления) можно объединить статьи с помощью семантически нейтрального элемента

.

Еще на главной странице есть интересная статья . состоящая

главным образом из фотографии. по всей вероятности. потому что из всех фотографий эта является самой яркой и запомина ющейся (рис.

2.17).

Для этой статьи мы будем использовать элемент < а г с л с Г е >,

правда. нам понадобится дополнительный атрибут

, чтобы создать особое оформление.

или

•

73

74

•

Глава

2

Рис.

2.17. Интересная фотография

Под интересной статьей есть несколько разделов, которые не

относятся к основным новостям (на главной странице в них ука

зывается только общая информация, и они являются в первую очередь ссылками на другие страницы, но все же не ссылками

в чистом виде). Каждый такой раздел имеет заголовок (<
внутри

<s e c t

т оп >,

<s e c t i o n > Best o f q ua rd ian . c a. u k Is Br itain Ьrоkе п?
No t es

апо

q~e r i e s < / h3 >

Te c h We e kl y li v e:

Ре уз оп аl

p l i v ~ cy < /h 3>

<s ec ti on>
La test mul ti medi a< ! h 2 > На сайте (но не на скриншоте) есть еще несколько блоков

(<
Последний, как обсуждалось в главе

Текст нескольких блоков во всю ширину страницы, располо

женных снаружи «реального» футера, в котором содержатся сведения о конфиденциальности,сроках и условиях использо вания, а также доступности.

Итак, леди и джентльмены, перед вами НТМL5-версия www.

guardian.co.uk. Решение любой задачи, выходящей за рамки ба нальной разметки (а в нашем случае это именно так), допускает

несколько разных подходов. это нормально.

HTML -

это обоб

щенный язык, поэтому в нем не предусмотрены элементы для

каждого специфического случая.

ЧТО ТАКОЕ WAI-ARIA WAI-ARIA (Web Accessibility Initiative's Accessible Rich Internet Applications) - отдельная спецификация, которая «заполняет дыры» В HTML 4 (или любом другом языке разметки) для по вышения доступности приложений и веб-страниц. Представьте себе, что вы написали скрипт для реализации пол зунка. Так как в

HTML 4 нет встроенного ползунка, с помощью

нескольких НТМL-элементов (элемента и изображе ний) и JavaScript-кодавы создаете то, что выглядити функцио нирует как ползунок. Но в таком случае не существуетспособа сообщить операционнойсистеме, что этот виджет исполняет роль ползунка, и передать сведения о его текущем состоянии

и значении. А если система не располагаетэтой крайне необ

ходимой информацией,вспомогательныетехнологии (напри мер, программы экранного доступа) не смогут донести ее до пользователя.

ARIA

представляет собой вариант решения этой проблемы

путем добавления целого ряда новых атрибутов, которые могут быть понятны браузерам и вспомогательным технологиям. ПРИМЕЧАНИЕ

Если вы будете использовать новые ДRlд-атрибуты, ваши

HTML 4-страницы не будут проходить валидацию . Если в осталь ном ваша разметка построена правильно, не обращайте на это внимания

-

доступность важнее валидности.

Итак, используя ужасный древний ски

-

HTML можно -

I sh o ul d heading < /f ont >

~

теоретиче

добавить АRIA в такой код. Ье

а

•

75

76

•

Глава

2 в результате получится следующее.

I should Ье а heading Такой код сообщаетагенту пользователя,что этот текст являет ся заголовкомуровня 2. Конечно же, это абсурд, так как в

HTML

уже есть абсолютно допустимый и семантический способ со здания такой структуры:

I

АМ а

heading

Разработчикможет по невнимательностине добавитьнеобходи мые АRIA-атрибуты,в то время как использованиеправильного элемента само по себе подразумевает «ваголовочность»

И включает сведения об уровне, поэтому такой синтаксис намно го надежнее.

ARIA -

не панацея и не карт-бланш для тех, кто

хочет пренебречь правилами разметки и построить сайт с помо щью одних только элементов

и . По возможности

создавайте правильную разметку и используйте ARIA только

в тех ситуациях, когда не существует другого способа отразить семантику элементов (как в случае с ползунком в

В спецификации

ARIA говорится:

HTML 4).

«мы надеемся, что с течением

времени базовые языки будут развиваться, и в результате се

мантическими станут даже те объекты, которые сейчас требуют использования

WAI-ARIA. Если

семантика элемента выражает

необходимый признак, разработчик может отказаться от ис пользования

WAI-ARIA».

Поэтому, например, к НТМL5-элементу

бавлять атрибут ARIA

не нужно до role=navigation, так как он должен

быть встроенным (в идеальном мире). Однако HTML5 вышел относительно недавно, тогда как

ARIA

уже поддерживается

многими вспомогательными технологиями. Так что будет не лишним использовать встроенный элемент вместе с данными

ARIA -

это поможет пользователям вспомогательных техноло

гий. Поэтому НТМL5-валидатор на htmI5.vаlidаtог.пu/ рассчитан

на

HTML5

и

ARIA (в то время как валидаторы HTML 4 в случае

обнаружения АRIA-атрибутов выдают сообщение об ошибке, поскольку

HTML 4 был выпущен раньше ARIA).

ARIA-CTPYKTYPA ДОКУМЕНТА И РОЛИ в

WAI-ARIA

определен ряд ролей, которые сообщают вспо

могательным технологиям сведения о структуре документа

и предназначении основных его частей. Ниже приведен список некоторых из них:

•

application;

•

article;

Текст

• • complementary; • • document; • form; • headingj • main; • navigation; • search.

• 77

Ьаппег:

сошегшпб»

На рис.

Бanner

2.18 показано,

как выглядит простая страница с точки

зрения АRIЛ.

Content

Очевидно, что некоторые из них совпадают с НТМL5-элемента ми:

,
, , .

Для других ролей такого явного взаимооднозначного соответ

ствия нет. К примеру,

role=banner «обычно содержитлоготип

Рис.

2.18. Простая

или фирменный знак спонсора сайга, а также специфический

страница с заголовком,

для данного сайта инструментпоиска. Баннер обычно распола

боковой панелью

гается вверху страницы и занимает всю ее ширину». Поначалу

и основной областью

это напоминает элемент , но как мы уже знаем, на

контента и АRIА-ролями

странице может быть несколько заголовков. Так что атрибут

role=banner

может применяться только к «заголовку стра

ницы».

Точно так же

contentinfo определяетсякак «большая замет

ная область, которая содержит информацию о родительском документе. В качестве такой информациимогут быть указаны. к примеру, сведения об авторскомправе и ссылки на заявление о конфиденциальности» . Это напоминаетэлемент
e r>. но

точнее было бы назвать его «футер страницы», так как другие футеры под это описание не подходят.

Атрибут role=main определяет «основную область контента» страницы. В главе

1 мы

говорили о том, как алгоритмически

вычислить эту область. но поскольку вспомогательные техно

логии могут уже сейчас использовать АRIЛ, разумно добавлять этот атрибут к элементу, обрамляющему ваш основной контент. В браузерах, поддерживающих селекторы атрибутов. его можно использовать также и для создания оформления.

div[role=main] {color:red; background-color:yellow; font-family: ~ "Comic Sans MS", cursive; } ~

Наконец-то: доступность и превосходная типографика в совер шенной гармонии друг с другом.

78

•

Глава

2 КАК СОВМЕЩАТЬ

ARIA

И

HTML

Мы советуем вам придерживаться следующей точки зрения: использование АЮА во всех случаях, где это уместно, является временной мерой, которая улучшает доступность и не влияет

на вanидность (но обратите внимание на «Замечания по пово ду программ экранного доступа», приведенные ниже) . Однако

в данной книге мы этого не делаем (поскольку мы пытаемся научить вас

HTML5, а не ARIA).

РЕСУРСЫ

ARIA

В спецификациях

HTML5

и АЮА есть полезная перекрест

ная ссылка dеv.wЗ.огg/htmI5 /sрес/еmЬеddеd-сопtепt-0.html#аппо

tationsfor-assistive-technology-products-aria. Стив Фолкнер из 1he Paciello Group создал список АRIA-информации, которая не встроена в HTML5 (www.paciellogroup.comlblog/?p=585).

, •• ,'

а, '~·II.I·

,

'1.'.' ,

Хьюстон, у нас проблемы. В 2007 году меня очень беспокоил тот факт, что производители программ экранного доступа не принимают участия в создании спецификации HTML5, и я написал в WЗС письмо с просьбой пригласить этих производителей подключиться к работе. В 2009 я спросил разработчика HTML Яна Хиксона, отреагировал ли кто-нибудь на это предложение. Он ответил : «Несколько произ водителей отреагировали. Но они, к сожалению, сказали, что у них нет на это времени. Правда,

после этого компания

Apple стала активно заниматься встроенным в Мас OS Х программным

обеспечением для экранного доступа, и сейчас Apple активно поддерживаетс нами связь. Так что, по крайней мере, один производительвовлечен в этот процесс».

Недавнее исследование( 1:"~'N;.сссЕ3;ibI е с " itUt е . orG jге s е а r с Г, ,'htmt')-а' э ,

)

показывает, что две

самых популярных на рынке программы экранного доступа не могут правильно обрабатывать контент, для разметки которого используются одновременно

HTML5 и ARIA, или элементы ... ~ ~ ,~ - . Однако не все такие программы работают неправильно; VoiceOver компании Apple не пропускает контент, а свободная программа экранного доступа NVDA ( внутри

lJюjеt о а ) читает весь контент и позволяет перемещаться по структурным элементам страницы. Мое личное мнение звучит так: если вы следуете правилам спецификации, неспособность брау зера или программы экранного доступа адекватно воспринимать контент

-

не ваша проблема.

Но это только мое личное мнение . Вы можете считать иначе; кроме того, в определенных ситуаци ях вам может потребоваться упростить контент, чтобы разметка соответствовала возможностям этих программ. Конечно, к тому времени, как вы прочитаете эту книгу, часть проблем уже может

быть решена. А пока вы сами должны знать своих пользователей и требования в вашей области .

Общую информацию о

WAI-ARIA можно найти в статье Геза WAI-ARIA» (<
Текст Чисхолма и Мэтта Мэя (O'Reilly) и «Designing with Progressive Enhancement: Buildingthe Web that Works for Everyone» Тодда Паркера и др. (NewRiders). В них вы найдете полезные практи ческие рекомендации по использованию ARIA. Спецификацию ARIA можно найти на www.wЗ.огg/WАI/РF/агiа/.

ЕЩЕ БОЛЬШЕ НОВЫХ структур! Пока вы еще ничего толком не узнали. Вообще-то, это неправда: вы знаете уже довольно много. И раз у нас еще остались силы,

давайте познакомимся с другими новыми НТМL5-элементами

и обсудим некоторые отличия от

HTML 4. Мы рассмотрим гло

бальные атрибуты, которые могут быть применены к любому элементу, и скажем «привет» новым НТМL5-свойствам, которые останутся за рамками этой книги.

В главе

1 мы

использовали

<а s i de > для

добавления боковой

панели. Этот элемент используется для «раздела страницы, ко торый косвенно связан с окружающим контентом, но который

должен располагаться отдельно. В типографике такие разделы обычно оформляются в виде врезок. Этот элемент может ис

пользоваться для создания типографских эффектов (например, врезок и боковых панелей), для рекламы, для групп элементов

И для другого

контента, который должен располагаться

отдельно от основного».

Например, внутри <аrtiсlе>элемент

- отличноеме

сто для информации,имеющей косвенное отношениек статье,

или цитат, но (скажу, забегая вперед) не для панели глобальной навигациипо сайгу,

По умолчанию

имеет АRIA-роль «поте», но это мож

но изменить, добавив role="complementary" или (если он оформляетформу поиска) r о 1 е ="s е а r ch ".

Мне очень нравится элемент <пе г а л Гэ > несмотря на то что он пока еще нигде не реализован. Реми написал гениальный скрипт, позволяющий создавать имитации таких элементов

( httр://gist.githuЬ.соm/З7059~. Используя его, мы получаем встроенную поддержку элемента

с распространенным типом поведения и освобождаем себя от необходимости самим создавать JavaScript-код (или же нечто,

• 79

80 •

Глава 2 что я видел на многих сайгах, использующее всю библиотеку

jQuery) -

и это очень здорово. <details> представляетсо

бой область, которая может разворачиватьсяи сворачиваться. Выглядитэто так:

<details> <summary>Photograph details
Photograph taken оп Xmas Day 09 with а Сапоп IXUSi.

Copyright Bruce Lawson,
[email protected].

I I

I

Содержимое внутреннегоэлемента <summary> действует как элемент управления: при его активации мышью или клавиату

рой остальное содержимое <details> сворачиваетсяили раз

ворачивается.Если элемент <summary> не указан, браузер сам

добавляетсоответствующийтекст, например «details» (детали) или локализованный вариант. Обычно браузеры также добав ляют специальный значок, указывающий на то, что текст можно

развернуть (к примеру, стрелку вниз). у <details> есть необязательныйатрибут ореп: с его помощью

можно указать, что при загрузкестраницытекст элементабудет развернут.

<details

ореп>

Кстати, этот элемент не обязан содержать только текстовую разметку -

внутри может располагаться форма регистрации,

поясняющий видеофайл. таблица исходных данных диаграммы или описание структуры таблицы для пользователей вспомога

тельных технологий, людей с пониженной обучаемостью или тех, кто (как я) просто не понимает чисел.

я всегда испытывал ощущение какой-то семантической неак

куратности, добавляя к рисунку название для того, чтобы дать пояснение или указать автора, потому что раньше сделать это

можно было только с помощью текста, встраиваемого в окружа

ющий контент, причем явно привязать его к изображению было невозможно. Раньше для этого не было специальных структур. Возможно, это немного странно, но именно поэтому я так рад

появлению элемента
, который заключает в себя изо бражение (или видео, или фрагмент кода, или цитату) и его заголовок,обрамляемыйтегом
.

Ьу

the

Текст

• 81

Br u c e an d Remy wel c ome ques ti on s <s ma ll>Ph oto &с о р у ; Bru c e ' s mum< / smal l > Добавив к этой разметке стили, можно создать изящное оформ ление (рис.

Вruce

2.19).

and Remy welcomeQuestlOn5 Photo D

ВnК:.'.

mum

Рис. 2.19. Элементы
и
плюс немного шикарных С55З-эффектов. (Смотрите,это же заголовок к рисунку, иллюстрирующемузаголовки и рисунки!

Вот что я называю «метаинформацией»)

.

•• в

:

• J

•

HTML 4 элементы подразделялись на «блочные» и «сгроковые», Эти термины не используются

в HTML5, поскольку, по сути, относятся к представлению: они просто указывают на способ ото бражения элементов в браузере

-

на основе таблиц стилей, использующихся по умолчанию.

В самих НТМL-элементах нет ничего, что позволяло бы считать их блочными или строковыми. По умолчанию в

(55 каждый элемент обладает свойством з : ." ,. :"':' V • л

1

е , если только это

правило не перекрывается встроенной таблицей стилей браузера или великолепным оформ лением, которое необычайно талантливый дизайнер (то есть вы) применил к разметке. (Не смущайтесь, вы знаете, что это так; все об этом говорят.)

В HTML5 есть много новых моделей контента, в частности подразделение на формулирующий контент (примерно соответствует строковому) и поточный (примерно соответствует блочному). Некоторые элементы ( ~ " -, с ь, П ~ , .: d ,; : , ) относятся к обоим типам. Некоторые

(-:.:1 ~ > ...
~ ,:, ,, C' t: J.': . , <, г ". .

>,'

.) -

заголовочные являются их

подмножествами.

Также существует встраиваемый контент (контент, импортирующий в документ другие ресурсы, или контент, добавленный в документ с помощью элементов

<: ' с: 5"~

>,'. -,'] >, < ' ..:; '-1" .', ',,:l,'; е'-" "

(приналичииатрибута с с; г. t. r с :,, :, ) ,

_., jlO , 1 .. S <".' Lcie(' ), интерактивный контент ( <.... ,,·t::Ji'>,,< JТЮ.',-U , ~ 1 ш"' .» , ';::3

"i ~ .'-',

(при

"'

наличии атрибута IjSeii1d;"' ), < ';' Cl!=, C::> (если атрибут т• •:--:С не находится в состоянии r

j

),

<'k6Г~"'il >, < 16:";;0:">, <'''''','..,' (если атрибут , YI> · не находится в состоянии tL Jlrar ), (при наличии атрибута

,; ' ''' ~ ii F ) , < 3';::" ес':;, <, с ч х t ,.; ":<;

<, ,'".

,ieo>

(при наличии атрибута

,-с·,.' : ·;· l ;: )), метаданные и др.

Не волнуйтесь! Здесь все очень логично: если отбросить тот факт, что элемент

»,

г. > теперь ведет

себя как « ь п э> И <"::18 1 > И может быть «строковым» или «блочным», вы не заметите никакой разни

цы, если будете использовать HTML5 5hiv (http://code,~le.com!p!h: '1 ," ; -;!,',/ ), чтобы определить новые НТМL5-элементы , пока браузеры еще не сделали этого во встроенных таблицах стилей .

82

•

Глава

2 Обратите внимание на то, что
может содержать - то есть, в терминах

только «формулирующий»контент

HTML 4, не должен

включать блочные элементы.

 Элемент позволяет выполнять действие, аналогичное использованиюмаркера, когда мы отмечаем определенныеслова

в печатномтексте. Это не то же самое, что выделение -

для это

го используется <ет> Но если у вас уже есть текст и вы хотите

вывести на передний план фрагмент, не выделенный в исходном

тексте, можно использовать <гпа г к > а затем в таблице стилей задать для него курсивный шрифт или желтый фон. При печати вы часто будете видеть фразы вроде «ту

italics» или «emphasis

added». В спецификации также сказано: «если этот элемент используется в основном тексте документа, он обозначает часть документа,

которая была выделена по причине ее вероятной значимости для того, чем в данный момент занимается пользователь».

Приведу пример: на моем сайте используется адаптированная

версия скрипта Searchhi Стюарта Лэнгриджа ( www.kryogenix.org/

соdе/Ьгоwsег/sеагсhhiЛ'который в случае, если на страницуссыла ется поисковый движок, обходит DOM и заключает каждое слово

из поискового запроса в элемент <та r к > который оформляется приятным розовым цветом. Было бы неправильно использовать

< s t rопg>ИЛИ < епт> так здесь мы имеем дело не с эмфатическим выделением - которое изменило бы смысл

для этого элементы

содержимого страницы,

-

а с выделением слов, релевантных

для того, чем в настоящий момент занимается пользователь:

просмотра информации об определенном поисковом слове.

, , <т шэу>"?" полезное дополнение для тех, кто пишет контент на

азиатских языках. Дэниэл Дэвис написал очень полезную статью

«НТМL5-элемент

в словах из одного слога и меньше» HTML5 element in words of one syllable or less») ( httр://mу.орега.соm/tаgаwа/bIоg/thе-htmI5-гuЬу-еlеmепt-iп-wогds (<<1Ье

of-опе-sуllаbIе-ог-lеs~, в которой он объясняет, как работает этот

элемент, на примере японского языка (с разрешения автора

привожу отрывок из его статьи).

В любом фрагменте японского текста (баннер, статья, право вой документ и т. д.) используется несколько систем письма: кандзи, хирагана и катакана. Часто бывает так, что пользователи не умеют читать кандзи в основном потому, что знаки кандзи

могут иметь несколько вариантов произношения. Один из при-

Текст меров нерегулярноro или неоднозначноrо произношения таких

знаков

.

-

!3

•* * •

!3

имена людей и названия мест.

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

«nichi», «Ы» или «Ь».

может произноситься как «hоп» или может произноситься как

«moto».

«nihon» или «nippon».

Чтобы текст был более понятным для читателя, иноrда над знаком кандзи пишется его произношение, и при этом исполь

зуется хираrана. По-японски это называется фурuzана, а по aнrлийски

-

,"Ьу (от названия мелкого шрифта размером 5,5 пт,

использующеrося в британской типографской традиции для подобного рода аннотаций). Такой шрифт часто используется в raзетах и книгах, но на сайтах он встречается редко, поскольку

не так просто разместить мелкий текст над обычным в пределах одной строки. Элемент создан для того, чтобы решить эту проблему. Согласно текущей спецификации

HTML5, элемент

< r u b y> -

это строкевый элемент, содержащий слово (или знак), которое вы хотите уточнить. Это может выглядеть так:

f3 *<1 ruby > сам по себе такой код не делает ничего, Поэтому мы добавим произношение либо к каждому знаку, либо (как в нашем при мере, и я рекомендую вам поступать именно так) к целому слову. Для этоrо будем использовать тег < r t >, который обозначает текст

< гц о у >.

f3 *< rt> '=- I:i!v<1 r t > Если оставить это в таком виде, браузеры, поддерживающие

этот элемент, отобразят произношение над текстом кандаи, но остальные браузеры проиrнорируют теrи и отобразят и текст, и произношение на одной строке в линейном порядке. Чтобы решить эту проблему, добавим специальные скобки с помощью

тега < г р >, который разумно скрывает эти скобки в браузерах, поддерживающих элемент r ub y. Это означает, что вы можете

писать произношение в скобках, которые будут отображаться в браузерах, не поддерживающих ru by, тоrда как остальные

браузеры отобразят произношениебез скобок над основным текстом (рис. 2.20). "~A.

8*

8*(1:111..)

supportlng

non-supportlng

browser

browser

Рис . 2.20.8 браузерах,поддерживающих ruby, текст-транскрипцияотображаетсянад основнымтекстом.

8 браузерах, не поддерживающих

ruby, текст-транскрипция

отображаетсяв скобках и следует после основноготекста

• 83

84

•

Глава

2 Во время написания этой книги элемент активно обсуж дается в WЗС HTML5

Japanese InterestGroup, так что в результа

те этих обсуждений спецификация вполне может измениться.

ПЕРЕОПРЕДЕЛЕННЫЕ ЭЛЕМЕНТЫ В

HTML5 не только

добавлены новые элементы, но и переопре

делены некоторые уже существующие. И вот перед нами наши старые друзья: кто-то полностью изменился, а кто-то просто довел до совершенства свою прическу.

В

HTML4 использование

атрибута s t а r t для элемента < о 1 >

было нежелательным, поскольку он считался атрибутом пред ставления. К счастью,

HTML5 отменил

это неверное решение.

Если вы хотите начать нумерацию списка не с одного, а с пяти, используйте такой код:

<01 start=5> Интересное нововведение, еще не реализованноени в одном

браузере, -

это атрибут reversed. Рассмотрим следующий

пример.

Тор five dreamy mega-huпks <01 reversed>
Brad Pitt
George C100ney

Orlando Bloom

Remy Sharp

Bruce Lawson

Такой код создает список, в котором нумерацияведется в обрат ном направлении:от пяти (мистер Питт) к одному (я). Простите, Брэд, Джордж и Орландо, но что вы знаете об

HTML5?

В

HTML 4

обозначал список определений, состоящий из

слова и нескольких его определений. Такое описание было за путанным и непонятным, поскольку в нем также говорилось

о возможностииспользования
для диалогов. Этот элемент также часто неправильно использовался для разметки произ

вольных пар имя/значение независимо от того, определяет ли одно другое.

Текст в

HTML5 сфера применения этого элемента расширена: теперь

это «связанный список, состоящий из нуля или более групп имя/значение ... Группы имя/значение могут представлять со

бой слова с определениями, разделы метаданных со значениями и др,», Ниже приведен пример списка книг из коллекции Реми, в котором используются элементы

и

для указания

названия и автора (или авторов).

Directory of French plastic sandal manufacturers

Phillipe Philloppe

J-Lо's plastic surgery: а profile

Hugh Jarce

The Orpheus and Eurydice myth

Helen Bach

The Proctologist and the Dentist

Ben Dover

Phil McCavity

I

в

HTML 4 элемент <с i

t е > можно было использовать для обо

значения имени говорящего:

As Harry S. Truman said,Тhе buck stops here. I

В

HTML5 это запрещено: «имя человека не является названием - даже если это выдающийся человек, - и таким

произведения

образом, этот элемент не должен использоваться для разметки имен людей».

Просто бред! Из-за этого правила существующий контент, на писанный в соответствии справилами с точки зрения

HTML5. Правда,

HTML 4, недопустим

валидаторы все равно никогда

не смогут признать этот код недопустимым, поскольку не суще

ствует способа автоматически отличить имя «Наггу

s. Тгшпап»

от одноименной биографии. В статье «Провокация бунта»

(<
на

24ways.org Дже

реми Кейт написал: «Присоединяйтесь К кампании гражданско го неповиновения

ненужным, запрещающим

и приводящим

к обратной несовместимости изменениям в правилах исполь зования элемента

ci te».

Я согласен с ним. Используйте для имен, если хотите.

•

85

86

•

Глава

2
Элемент < а dd r е s s> используется для указания контактной

информации автора текущей статьи или документа, а не как универсальныйэлемент для почтовыхадресов. В качестве кон

тактной информацииможет быть указан адрес электронной почты, почтовый адрес и т. д. Для разметкимогут быть исполь зованы микроформаты,RDFa или

microdata.

Новым в отношении этого элемента является то, что теперь на

странице может быть несколько элементов
-

по

одному в каждом <а rt i с 1 е >. Информация об авторе, привязан ная к определенному

<article>, не относитсяк вложеннымэле

ментам <article>. Так что сообщениеблога внутри <article> может содержатьэлемент < а ddr е s

s> для его автора, а каждый

комментарий (который, как вы помните, является вложенным

<article» может содержать
того, кто его оставил. <ЕМ>, <1> <ет> означает эмфатическое выделение, которое немного из меняет значение предложения. Ответ на вопрос

«Did уои sayуои

live in Рапв!» мог бы выглядеть так:
No, ту <еm>паmе is Paris. 1 live in Troy. Cloth-ears.

I

Если вы хотите использовать несколько степеней важности,

добавьте вложенныеэлементы <етп>, чтобы сделать содержимое более выделенным. Элемент «представляет собой небольшой отрезок текста,

который произносится другим голосом или с другим настрое

нием или же не так, как обычно; это может быть сложный адрес, технический термин, идиоматическое выражение на другом

языке, мысль, имя корабля или другой текст, который в типо

графике выделяется курсивом». Ниже приведены несколько примеров использования элемента

<л >. где <ет> был бы неуместен.

The Titanic sails at dawn.

The design needs а bit more ooh la I la.

You, sir, deserve а jolly good kick up the gluteus maximus!

Текст

,

<В>

Элемент < S t r о п 9 > выделяет фрагменты контента с высокой важностью, однако в отличие от <ет> не меняет смысла пред

ложения. Рассмотрим пример:

Warning! This Ьаnаnа is dangerous.

I

Можно использоватьвложенные элементы , чтобы

придать тексту особую важность. Элемент <Ь> «представляетсобой отрезок контента, который необходимо стилистическиотделить от остального текста, не

придавая ему дополнительногозначения; это могут быть клю чевые слова в аннотации,названия продуктав обзоре или дру гой текст, который в типографике выделяется полужирным шрифтом». Например:

Remy never forgot п л з iifth birthday-feasting I оп powdered toast and the joy of opening -, his gift: а Log from Blammo!.
I

Элемент < h r > теперь не зависит от среды и обозначает «те

матический разрыв на уровне параграфа». На

HTML5doctor

есть очень тонкий комментарий. Это эквивалент обозначения

«***»,

которое часто используется в рассказах и эссе. Мы хо

тели отменить его как историческую

редкость, когда доктор

Оли Стадхольм написал, что «японские дизайнеры достаточно

часто используют < h r > для обособления разделов. Обычно они скрыты благодаря

css, но видны в сНТМL-браузерах

мобильных телефонов, поддерживающих только базовые

для

css

и не отображающих визуальное оформление (и вместе с ним визуальное обособление разделов)», Наш совет: используйте вместо этого структурированный кон

тент и заголовки вместе с изящными разделителями

CSS.

 Элемент < s та 11> был полностью переопределен.Из простого универсальногоэлемента представления,делающеготекст мел

ким, он превратилсяв «мелкий шрифт», который «обычно ха рактерен для отказов, предупреждений,правовыхограничений

или авторскихправ. Мелкий шрифт также иногда используется

•

87

88

•

Глава

2 для указания авторства или для соблюдения условий лицензи рования».

Если вся страница посвящена «юридическим» вопросам, не ис

пользуйте

<srnall>. В таком случае юридическийтекст - и есть

основной контент страницы, так что нет необходимости вы делять его с помощью этого элемента. Он используется только

для коротких отрезков текста. к

 и

<srnall> не имеет отношения

<епт>,

УДАЛЕННblЕЭЛЕМЕНТbI Некоторыеэлементы,знакомыевам по HTML 4, были признаны полностью устаревшими в пользуйте <ernbed»,

HTML5: (вместо него ис , , и .

Они не пройдут валидацию, и разработчикамне следует их использовать. Также были отменены фреймы (но

остался). Trдa им и дорога. Конечно же, НТМL5-6раузерыдолжны продолжатьотображать эти милые почившие элементы, так как «на воле» их все еще

очень много. Но вы должны избегать их, как будто это таран тулы, зомби, тигры-людоеды,сэндвичи с плутониемили песни СелинДион.

ГЛОБ~ЛЬНЫЕАТРИБУТЫ В

HTML5

добавлено также несколько глобальных атрибутов,

которые могут быть применены к любому элементу. О них мы поговорим в этой главе.

CONTENTEDITABLE Разработанный

Microsoft, contentedi table был затем переос

мыслен и реализовандругими браузерамии теперь официально является частью HTML.

ДЛЯ браузеров

contentedi table означаетдве вещи. Во-первых,

пользователимогут редактироватьсодержимоеэлементов,к ко

торым добавлен этот атрибут: этот элемент должен быть вы деляемым, и браузер должен отображать курсор для выбора места, которое будет отредактировано.Во-вторых, внесенные в документ изменения затрагивают выделенный контент, ко

торый специально подобран и является редактируемым,то есть можно сделать текст полужирным,изменить шрифт, до бавить списки, заголовки и т. д.

contentedi table является

булевым атрибутом, поэтому в качестве его значения можно

Текст задать

true или т а Гае- Хотя заглавные буквы в разметке уже

не имеют никакогозначения, атрибут DOM требует написания

contentEdi table (обратитевниманиена заглавнуюЕ). В DOM также есть свойство.isсопtепtЕditаыl,'которое позволяет определить, является ли элемент редактируемым,поскольку

флажок contentedi table мог быть унаследованот родитель ского элемента.

Чтобы сделать весь документредактируемым,можно использо

вать document. designMode этого необходим

=

'

оп' (не' true' ). Однако для

JavaScript.

Наконец, к любому контенту, выбранному (то есть выделенно му) пользователем, может быть применен ряд команд, например

dосumепt.ехесСоmmаПd('Ьоld').Стандартныесочетания клавиш, позволяющие делать текст полужирным или курсив

ным, также затрагивают

DOM.

Если вы используетеcontentedi table для формы CMS, вы за хотите в определенный момент сохранять изменения на сервере.

Для этого не существует отдельного АРI-метода, но поскольку изменения пользователя меняют достаточно отправить на сервер

DOM, дЛЯ сохранения в CMS innerHTML редактируемого

элемента (или весь документ, если вы находитесь в режиме

designMode).

CONTEXTMENU Атрибут contextmenu относитсяК элементам <menu> И <соm которые не обсуждаются в этой книге (см. раздел

mа n d>,

«Свойства,не рассматриваемыев этой книге»),

DATA-* Чтобы передавать информацию скриптам из разметки, мож

но использовать атрибут d а t а -

«;

Передавать можно любое

ХМL-совместимоеимя. Более подробнооб этом рассказывается в главе 4.

DRAGGABLE Атрибут

draggable

указываетна то, что элемент можно пере

таскиватьс помощью drag-and-drop

API

(см. главу 8).

HIDDEN Этот атрибут аналогичен

aria-hidden:

он сообщает браузеру

о том, что контент этого элемента ни в ком случае не должен

отображаться.Это позволяетне просто скрыватьконтент, а все

•

89

90 •

Глава

2 время держать его «наготове». К примеру, как-нибудь потом можно с помощью

JavaScript удалить

этот атрибут, и элемент

«вернется В реальность».

Я процитирую спецификацию (чтобы больше не заниматься ее перефразированием): «Атрибут hidden не должен использо

ваться для контента, который может быть отображен в другом представлении.Например, некорректноиспользовать h i dde п

для того, чтобы скрыть панели в диалоговомокне с вкладками,

посколькуинтерфейсс вкладками - это уже избыточное пред ставление, так как все элементы управления формой можно уместить на одной большой странице с ползунком. Точно так же неправильно делать элемент скрытым только от одного

представления: если что-то скрыто, оно должно быть скрыто во всех представлениях, включая, к примеру, программы экранного доступа».

Даже если вы знаете, что позже «откроете» контент с помощью

какого-нибудь скрипта, к скрытому элементу нужно относить ся так, как будто его на самом деле нет. Не добавляйте ссылки, указывающие на скрытый контент, и не привязывайте к нему другие элементы с помощью

aria-describedby

или

aria-

labelledby.

ITEM, ITEMPROP, SUBJECT Эти атрибуты относятся к спецификации

microdata, которая не

обсуждается в этой книге (см. раздел «Свойства, не рассматри ваемые в этой книге»),

АТРИБУТЫ

ROLE, ARIA-*

Как вы уже поняли, HTML5 рассматривает

WAI-ARIA как раз

решенные дополнения к языку.

SPELLCHECK Этот булев атрибут заставляет браузер проверять правописание и грамматику элемента. Если его нет, «выбирается состояние, соответствующее поведению элемента по умолчанию

можно, исходя из состояния

-

воз

s р е 11 с [1 е с k родительского эле

мента».

TABINDEX (=-1) в основе атрибута t а Ь .л; n d е х лежит достаточно старый принцип, позволяющий задавать порядок приоритетов при

Текст перемещении по странице с помощью клавиатуры (обычно

используется клавиша ТаЬ, но в некоторых браузерах ным образом,

Opera -

- глав

предусмотрены другие сочетания кла

виш).

Этот атрибут был достаточно популярен, когда сайты созда вались на основе таблиц с высокой степенью вложенности элементов. Но сейчас это не всегда нужно. По умолчанию по рядок перемещения определяется порядком элементов в раз

метке, поэтому правильно построенный и структурированный

документ не требует дополнительных указаний, касающихся приоритетности перемещения.

Однако у tabindex есть полезный побочный эффект. Обычно с помощью клавиатурыможно перемещатьсятолько к ссылкам,

формам и растровым изображениям.Добавление tabindex создает такую возможность и для других элементов. Таким

образом, применение JavaScript-функции focus () позволит

перемещатьфокус браузера на них. Однако в таком случае эти элементы смогут быть выбраны и с помощью клавиатуры,что иногда нежелательно.

С использованиемотрицательногоцелого значения (обще принятого t а Ь i п d е х = " - 1 ") можно переходить к элементу программно, «но не нельзя сделать этого с помощью последо

вательной навигации».

Этот атрибут полезен в борьбе с ошибкой

Internet Explorer,

из-за которой пользователи программ экранного доступа в не которых случаях не могут перейти к элементам вроде за

головков, которые являлись объектами внутренних ссылок страницы, и информация становилась недоступной (см. jUiсуstudiо.соm/агtiсlе/iе-kеуЬоагd-паvigаtiоп.рhр). В

чение

"- 1"

HTML 4

www. зна-

было недопустимым для этого атрибута, а сам

атрибут был недопустим для всех элементов, кроме полей

форм и ссылок. Но сейчас, когда он работает в браузерах и ре шает реальную проблему, HTML5 разрешает использовать его везде. Ура!

СВОЙСТВА, НЕ РАССМАТРИВАЕМЫЕ В ЭТОЙ КНИГЕ Для полноты картины я расскажу о нескольких самых интерес

ных свойствах

HTML5,

которые по причинам ограниченного

объема или недостаточной реализации больше не будут обсуж даться в этой книге.

•

91

92

•

Глава

2 <EMBED> Элемент <embed> широко известен и используетсяуже многие

годы, но он всегда был «вне закона», потому что никогда не

проходил валидацию. Однако так же, как и другой разбойник, Робин Гуд, он имел очень сильную поддержку,так как выполнял

полезную функцию: это единственныйспособ добиться ста бильной работы плагинов (например, Flash) во всех брауверах, что и объясняет его невероятно широкое распространение

(см. статистику за 2008 год на http://dev.opera.com/articles/view/ mama-plug-ins/). Поэтому нет никаких причин откладывать его валидацию. HTML5 решил облагородить эту «коровью тропу»

И наконец включил <embed> В официальнуюспецификацию языка.

Этот элемент, который уже обладает хорошей браузерной поддержкой (за исключением того самого большого слона

IE), используется

в тех ситуациях, когда форма должна ото

слать открытый ключ. Если вы не знаете, что такое шифрова ние с открытым ключом, посмотрите

http://en.wikipedia.org/wiki/

PubIic_key. Если вы все еще ничего не понимаете, вам не стоит использовать этот элемент.

, <METER> Элемент <progress> используетсядля отображения«индика тора выполнения»,который показываетстепень завершенности процесса

-

например, загрузки.

Элемент <meter> «отображаетскалярноезначениев известном диапазоне или дробное значение; например, использование диска, релевантностьрезультатов запроса или долю избирате

лей, выбравшихданного кандидата, от общего числа голосо вавших».

<MENU>, Это потрясающиеэлементы: они позволяютсоздаватьдля кон текстных меню вашего приложения панели инструментов со значками и соответствующимикомандами, при активации

которыхвыполняютсяскрипты. Они не сравнятсядаже с целой

охапкой стихов Лу Рида! Но так как ни один браузер их еще не поддерживает,мы не будем о них больше говорить.

Текст

MICRODATA

microdata -

это способ разметки элементов с помощью допол

нительных считываемых данных для того, чтобы поисковые

роботы, поисковые движки и браузеры могли извлекать инфор мацию из содержимого страницы. Он похож на RDFa (стандарт W3C), и уже индексируется поисковым движком Google. Однако ни один браузер не поддерживает соответствующий API.

<STYLE SCOPED> Атрибут всорео- примененный к элементу <вт у Ге>. заставляет браузер применить стили к элементу, внутри которого располо-

жен <style э сорео>. и его детям. Это позволяетлокализовать стилевоеоформлениевнутри НТМL-документа.Так, например,

элемент <а г гл.с Ге >. содержащий блок <style

э сорес>. со

хранит свое оформлениепри синдикации.

3АКЛЮЧЕНИЕ Ух, интересная поездка, не так ли? Вы увидели много новых

структур, новых элементов и узнали об измененияхв старых элементах. Если вы внимательно изучали наши примеры раз

метки, вы также познакомилисьс любимым оружием фей, так что если вы гоблин или орк, будьте осторожны.

HTML5 позволяет размечать обычные структуры с помощью уз коспециализированных элементов, а не пустых элементов

и <врап>. Последние остаются важной частью языка, но, как ив

HTML 4, использовать их следует только тогда, когда не уда

ется найти более подходящих элементов, которых у вас теперь целый арсенал. Вы также узнали, что у некоторых элементов

есть встроенные роли, которые облегчают работу вспомога тельных технологий. Однако пока мы находимся на переходном

этапе и браузеры (и, что важнее, программы экранного доступа) обладают недостаточной поддержкой этих встроенных ролей, вы можете (и это законно и допустимо) добавлять дополнитель ную АRIA-информацию. Возможно, все это достаточно трудно, но поверьте мне на сло

во: по мере того как вы будете использовать эти структуры, вы станете понимать их все лучше и лучше. Единственный способ познакомиться с ними

чайтесь в работу!

-

начать их использовать, так что вклю

•

93

i

I

Глава

3

ФОРМЫ

Брюс Лоусон

Формы Одна из проблем с формами в формы

-

HTML 4 состоит в том, что поля

это всего лишь пустые ячейки для заполнения, не

более того, На сервере, конечно же, требуется валидация дан ных, но для создания осмысленного интерфейса приходится

дублировать эту проверку в браузере с помощью

JavaScript.

Учитывая, что формы используются практически на каждой веб-странице

формы поиска, регистрации, добавления ком

-

ментария и т. д.,

-

было бы здорово, если бы в браузеры была

включена валидация тех типов данных, которые чаще всего вводятся пользователем.

Как вы уже догадались, формы

HTML5 позволяют

делать имен

но это.

Мы

•

HTML, И ТЕПЕРЬ ОН ТОЖЕ НАС.

HLML5 позволяет создавать формы гораздо быстрее. Кроме HTML5 появился ряд новых приятных возможностей -

того, в

например, к уже существующим типам НТТР-запросов, которые

могут отправлять формы (.get и post), было добавлено два новых: update и

delete.

Но есть кое-чтоболее интересное:ряд элементов,которыерань

ше обязаны были располагатьсявнутри формы «Ь и t t оп>,

, , , <select>, И <obj е ст >], а также новые элементы «keygen>, <meter>, <output> И <progress» теперь можно помещатьв любое ме сто страницы, сохраняя связь с формой при помощи атрибута forrn, указывающегона ее id. Рассмотримследующийпример. <forrn id=foo> <input type="text"> </forrn> <textarea forrn=foo> Элемент принадлежит форме f 00, посколькуон нахо

дится внутри нее и не содержит атрибута, переопределяющего его принадлежность.Элемент расположенснаружи f 00, но все равно относитсяк ней, потомучто его атрибут f о rrn указывает на id этой формы. Благодаряэтому дизайнер будет чувствоватьсебя гораздо сво боднее, если захочет, чтобы визуально (и структурно) эти эле менты располагалисьвне родительскойформы. Но самое главное - это новые типы форм и их встроенная валидация. Со временем проверка для основных типов данных • " 98 • Глава 3 с помощью JavaScript станет ненужной, однако сейчас не стоит - JavaScript будет необходим до на светлого будущего, когда у каждого будет HTML5- посыпать ее нафталином ступления браузер (или ваш начальник решит, что пользователям древних браузеров придется ограничиться проверкой форм только со стороны сервера) . НОВЫЕ ТИПЫ ВВОДА ДАННЫХ Новые поля форм были основой спецификации, которая пре вратилась в HTML5, и именно они представляют собой вопло щение идеи обратно совместимого расширения. Расширения в данном случае - это в основном новые значения атрибута t уре элемента ввода. Поскольку все браузеры по умолчанию испольауют с з прш; type=text>, устаревшие версии, не распо знающие новых расширений, обратятся к значению по умолча нию и предложат пользователю обычное текстовое поле ввода. ПРИМЕЧАНИЕ Спецификация не накладывает никаких ограничений на то, как браузеры должны оформлять новые типы ввода данных, сообщать об ошибках и т. д. Различные браузеры и устройства бу дут использовать различные пользовательские интерфейсы; сравните, к примеру, как выглядит поле выбора в Safari для ПК и Sаfагi/iРhопе (рис . 3.1). -- ~- . ( Bruce Lawson F1I\'emcgahuok Вшсе lawson ·1 RemySharp George Clooney BradPi1I а ,;1 ./ BruC8 Law~n R.мny Sharp I 3.1. Одно и то же поле выбора в SafarilWlndows (слева) Safari/lPhone. Большинство скриншотов сделано в Орега, так как на момент написания книги (май 201 О года) этот браузер обладал Рис. и самой полной реализацией; но если какое-то свойство реализовано в другом браузере , для иллюстрации мы используем его ТИП ВВОДА ДАННЫХ EMAIL Огрока с ь прш type=email > сообщает браузеру, что форма не должна быть отправлена, если пользователь не ввел нечто по хожее на правильный адрес электронной почты, то есть браузер не проверяет, существует ли такой адрес, а только определяет Формы правильность его формата. Пользователь может отправить форму с незаполненным полем, только если к этому полю не добавлен атрибут required (это верно для всех типов ввода данных). По поводу того, как браузер должен сообщать об ошибках, в спецификацииничего не сказано. Пример реализации (экс периментальной)в Рис. Opera 10.5 показан на рис. 3.2. 3.2. Автоматически сгенерированное сообщение 10.5 об ошибке в Орега Атрибут mul tiple означает, что в качестве значения поля мо жет быть указан список из допустимыхэлектронныхадресов, разделенныхзапятыми. Это, конечно, не значит, что пользо ватель должен вводить эти адреса вручную; браузер может от крывать специальноеокно со списком контактов пользователя из почтовогоклиента (из памяти телефона),где нужные адреса можно отметить флажками. Экспериментальноедополнение Firefox Contacts (http://mozilla- labs.com/bIog/201 ОIOЗ/сопtасts-iп-thе-Ьгоwsег) формирует список контактов из различных источников, чтобы при заполнении поля <input type=email> пользователь мог выбрать в нем нужный адрес. Он также делает эту информациюдоступной для скриптов сайта с помощью рабочей версии W3C Contacts API (httр:llwww.wЗ.огg/2009/dарl). ТИП ВВОДА ДАННЫХ Строка URL type=url > заставляет браузер проверять, что пользователь ввел правильный URL. Браузер может по - Орега, например, показывает список недавно посещенных URL (из журнала браузера) и до бавляет httр:llвначало URL, начинающихся с www. (URL не мочь пользователю это сделать обязательно должен относиться к веб-узлу; страница может быть, например, сетевым HTML-реАактором, в котором поль зователям иногда требуется псевдопротокол tel: .) ТИП ВВОДА ДАННЫХ Тип da te - DATE один из моих любимых. Все мы видели веб страницы, в которых пользователю необходимо ввести дату • 99 100 • Глава 3 полета, концерта и т. д. Поскольку не очень понятно, как это делать (в формате ООММ-УУУУ, или ММ-ОО-УУУУ, или оо МММ-УУ?), разработчики с помощью JavaScript создают ВИД жеты для выбора даты, которые от сайта к сайту различаются внешним видом, удобством использования и доступностью. решает эту проблему. Орега, к примеру, открывает виджет с календарем (рис. 3.3). Озtе of BiI1h ~ , - вг О [~:Jl~~оЛ~ February IIIМ Tw wed Thd '6 ....... z ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ 1 ~ 1 ~ ~ 11 •, ! ! 1z 11 1! n l! • • • • ,. • • • ,. l' " None Todav 11 ~ I 2 э 7 '2 Рис. -э 3.3. Opera 10.5 открывает I виджет с календарем На смартфонах BlackВerry в BlackВerry сии Device Software вер 5.0 в качестве элемента управления для ввода даты исполь зуется тот же Jаvа-компонент, что и в приложении «Календарь» BlackВerry (хотя он не встроен в приложение «Капендарь») (рис. 3.4). Безусловно, это только начало. Браузер может вызывать встро Рис. 3.4. вС5раузере B~rry енное приложение «Календарь», чтобы вы могли выбрать дату исходя из вашего расписания . lЛавное - теперь браузер мо жет понимать, что вы хотите ввести. Раньше виджеты выбора даты были не более чем элементами <d i ч>, И ссылками с большим количеством JavaScript-Кода, отвечающего за поведе ние. Теперь браузер знает, что вы собираетесь ввести дату и вре мя, и может предложить вам усовершенствованные элементы управления и обеспечить интеграцию с другими сведениями о дате/времени. ТИП ВВОДА ДАННЫХ TIME type=time > позволяет вводить время по 24-часовой шкале и проверяет правильность введенных данных. И снова выбор пользовательского интерфейса остается за браузером; это может быть просто ввод чисел с выводом ошибки в случае, 24 или количество минут пре 59, или же он может быть разработан более детально: если количество часов превышает вышает например, в виде циферблата, стрелки которого можно пере таскивать курсором мыши. Интерфейс может также учитывать смещение часового пояса. Формы ТИП ВВОДА ДАННЫХ DATETIME иtimе проверяютвведенныеточную дату и время. Поле date ввода местноговремении даты работаеттак же. как иdа tetime • за исключением того. что пользователь не может добавить (или изменить) смещение часового пояса. ТИП ВВОДА ДАННЫХ t ype=month > MONTH позволяет вводить месяц и выполняет проверку введенных данных. Хотя внутри эта информация хранится в виде числа от 1 до 12. браузер может предложить пользователю выбрать месяц по названию. Вы могли бы. на пример. использовать поле выбора из 12 вариантов (Январь Декабрь). но такой вариант не универсален с точки зрения выбора языка. Если вы будете использовать тип ввода данных пюпгп , французская локализация браузера может. к примеру. в раскрывающемся списке заменить «Январь» на «Janvier». Такие тонкости степени - в большей степени забота браузера и в меньшей вас. И это абсолютно нормально. - ТИП ВВОДА ДАННЫХ WEEK позволяет вводить номер недели и вы type=week> полняет проверку введенных данных. Хотя это может выглядеть как простое поле. позволяющее пользователю вводить число. на практике все оказывается сложнее: в некоторых годах 53 недели. Поэтому для седьмой недели 2010 года используется формат 2010-W07. Opera позволяет открыть пользовательскийинтерфейсвыбора даты и помещает в поле ввода номер недели. соответствующий любой выбранной дате. а не дате в формате YYYY-MM-DD (рис. 3.5). week -- - ~ - ,, _ . , . _ ' . 201G-WОб EJi . ' Ш !2010!: February w.. won T~ wed ТhII ~ ~ r ! ! Ш I Рис. 1 ~ ~ :! Ff'i ~I Sun. ~ ~ ! ! ! 12 1!g.!! H ~~.!!.!!.!! ~~ ~~ ~~~~~ 1 ,: з, s 9 10 ~Tod.Iiw "",П, 4 ~ 1 б е 7 12 13 14 None r;,"",:A 3.5. в Opera 10.5 • 101 102 • Глава 3 ТИП ВВОДА ДАННЫХ NUMBER Как это ни удивительно, но тип ввода данных number выдает ошибку, если пользователь не ввел численные символы. Он прекрасно работает с атрибутамиmin, mах и step. В Орега он Рис. 3.6. в Орега 10.5 выглядит как счетчик, значения которого можно ограничить сверху и снизу, а шаг задается с помощью атрибута step ; при этом пользователь может ввести число с клавиатуры (рис. ТИП ВВОДА ДАННЫХ - - -1) Рис. ~ 3.7. <input type=range> в Google Chrome 3.6). RANGE type=range > отображается в виде ползунка. На 3.7 показано, как это выглядит GoogleChrome. Раньше ползунки приходилось имитировать и для этого требо валось перехватывать входные данные и использовать JavaScript и изображения для стрелок. Так как они не были встроены в браузеры , обеспечение удобного управления с клавиатуры тре бовало особой аккуратности и дополнительного кода . Теперь, когда ползунки встроены в HTML, с разработчика снимается ответственность и за счет этого уменьшается объем кода и по вышается доступность для пользователей клавиатуры . Чтобы подробнее узнать об этом, посмотрите пример в разделе «Как собрать все это вместе». ТИП ВВОДА ДАННЫХ SEARCH Этому типу ввода данных требуется поисковый термин . В Safari есть атрибут, не предусмотренный в спецификации, который добавляет историю недавних запросов (с помощью resul ts=n). Разница между типами ввода данных search и листическая; в Safari на Мас search text чисто сти оформляетсятем стилем, который используется по умолчанию в операционнойсистеме (с закругленнымиуглами), что, тем не менее, можно изменить с помощью специального СSS-кода (спасибо Уилфреду Нэсу). input[type="search"] ..., textfield;} {-webkit-appearance : ТИП ВВОДА ДАННЫХTEL Тип tel используетсядля ввода телефонного номера. Особой проверки не производится; более того, не требуется вводить только цифры - многие номера часто пишутся с использова нием других знаков, например +44 (О) 208 123 1234. Поскольку мобильные телефоны «знают» свой собственный номер, мы надеемся, что в большинстве мобильных телефонов Формы появится функция автозаполнения таких полей. Пока это нигде iPhone умеет открывать экран ввода теле фонного номера (рис. 3.8). I COLOR 103 ~r~ не реализовано, но ТИП ВВОДА ДАННЫХ • .--. ::>C'dlt..lt f _ Шl t '- tСI ! <input> (урс Do... ~ позволяет пользователю ввести значение цвета, выбрав нужный вариант в палитре. Пока это реализовано только в BlackВerry (рис . 2 4 5 7 8 11I о ," 3.9). НОВЫЕ АТРИБУТЫ Рис.3 .в . Помимо новых типов ввода данных в HTML5 определен ряд новых атрибутов для элемента <input >, отвечающих за его autocomplete,min,max,multiple, pattern и step . Есть еще один атрибут -list; он присоеди поведение и ограничения: .. нового элемента <d a t a l i s t> , id которого указываетсяв каче стве значения атрибута 1 i 5 t . <d a t a l i s t id=mylis t > <o p t ion la bel=Mr v a l u e =Mr> <o p t ion label=Ms v a l u e =Ms> <o p t ion label=Pro f v a l u e = " Ma d Pro fessor" > </ d a t a l i s t> Сам <d a t a l i s t> не отображается,но появляетсяв виде значе ний поля, похожего на поле выбора. В предыдущем примере t произвольноготекста; но ype=text делает возможным ввод < da t а 1 i 5 t > можно использовать и с другими типами ввода данных, о которых говорилось выше: например, ur 1, email и т. д. Кроме того, по мере того как поль зователь вводит текст, параметрыможно динамическиизменять, имитируя возможностиGoogle Suggest. Более подробно об этом см. http://dev.opera.com/articleslview/an-htmI5-style-google-sugg estl . Многие спрашивают, почему пара l< d a t a l i s t> не объединенав один элемент, как, например, <s e l e c t>. На самом 9 в iPhone для заполнения <inp u t t ype=tel > АТРИБУТ LIST устраиваютпредложенныеварианты. Список создается внутри 6 клавишная панель ввода данных. зователь может вводить свой собственный текст, если его не '" Дополнительная няется к новомуэлементу, позволяя использоватьновый метод Элемент <da t a l i s t> отличаетсяот поля выбора тем, что поль 3 Рис. 3.9. <inpu t type=c ol or> В BlackBerry 104 • Глава 3 деле это связано с обратной совместимостью: в устаревших браузерах пара k datali st > превращается B<input type =te xt > , благодаря чему пользователь может хотя бы что то ввести, а вы уже можете дополнить реализацию с помощью JavaScript. АТРИБУТ AUTOFOCUS Булев атриБУТа u t О f О С \l S - способ задания установки фокуса на определенном элементе управления формы во время за грузки страницы . Раньше разработчику требовалось писать для этого JаvаSсгiрt-код, используЯсоntr оl. f ocus () . Новый способ позволяет делать достаточно разумные вещи, например не устанавливать фокус на элементе, если пользователь в это время вводит данные в другом месте (проблема, типичная для старых JаvаSсгiрt-скриптов, реализующих эту возможность). На странице должно быть только одно такое поле ввода. Помните об удобстве использования и применяйте этот атри бут с осторожностью. Мы рекомендуем добавлять его только там, где поле формы служит для выполнения основной функции страницы - как, например, форма поиска. АТРИБУТРLАСЕНОLDЕR Достаточно популярным у разработчиков является такой прием: изначально в поле ввода добавляется текст-подсказка, которая исчезает при установке фокуса на этом поле, а затем (при уста новке фокуса на другом элементе) снова появляется. Раньше для этого требовался JavaScript. Но теперь такое поведение можно задать с помощью атрибутар l а с е h о l d е r . В спецификации говорится: «Для добавления более подробной подсказки или совета лучше использовать атрибут- i t 1 е », КОГДА БРАУЗЕРАМ ТРЕБУЕТСЯ ПОМОЩЬ в старые - и иногда даже новые - браузеры некоторые из этих возможностей не встроены . Но это не такая уж большая проблема, ведь большинство новых возможностей HTMLS можно реализовать с помощью JavaScript (или других технологий, таких как Flash и Silverlight). Это не относится ни к изящному ухудшению качества, ни к прогрессивному улучшению; это что-то другое. Это то, что я мои коллеги называем «заполнением», при котором во время создания кода мы опираемся на встроенные возможности, а затем заполняем «дыры» В поддержке, ис пользуя внешнюю библиотеку. Библиотекаможет быть универсальнойили специализированной. Например, если вы хотите воспользоватьсяатрибутами. 'с -;. i;,.., ;.-. . ;; или) ; ·" c e ~ ·; .l j ·3 r .досгаточ но добавить маленькую JаvаSсгiрt-библиотеку, и все современные браузеры от IE6 до Firefox 3.6 будут поддерживать эти атрибуты !lttР://iпtгоduсiпghtmIS.соm/ехаmDlеs/сhО3/Dоllyfilliп g.html ). Формы Сейчас этот атрибут поддерживается в браузерах на движке WebКit (который изначально был собственностью Аррlе)-И'бе та-версии Firefox 4. АТРИБУТ REQUIRED Новый атрибут rеquirеdможно использовать для <textarea> type И большинстваполей ввода (кроме случаев, когда атрибут hiddeI1 imаgеили задает кнопочный тип, submi t). Браузер не разрешит пользователю отпра принимаетзначения такой как вить форму, если обязательные поля будут пустыми. Также мы рекомендуем добавлять к таким полям АRIA-атрибут ariarequireq которыйбудет полезен для вспомогательныхтехно логий (ARIA подробно обсуждалась в главе 2). АТРИБУТ 1Ип <input MULTIPL:E HTML5, но теперь i р 1 е пользователь может заrpужать tуре=filе>иеявляетсяновым в благодаря атрибуту ти 1 t несколько файлов. <input type=file multiple> Этот атрибутможно добавлятьи к другим типам ввода данных: например, <input type=email multiрlе>позволяетвводить несколько адресов электронной почты. На сегодняшнийдень зто реализованотолько в браузерах WebKit. ~ТРИБУТ PATJERN Некоторые типы ввода данных, о которых говорилось вы ше, - email, number, url и т. д. - на самом деле являются «встроенными» регулярными выражениями, так как браузер просто проверяет, что введенные данные выглядят так, как должны. А что если вы хотите использовать другой шаблон? Атрибут ра t t е rn позволяет вам самим создавать регулярные выраже ния, которым должны соответствоватьвводимые данные. Так что если пользовательдолжен ввести одну цифру и три заrлав ных.символаалфавита,регулярноевыражениебудет содержать одно число [0-9] и три буквы [A-Z]{3}, каждая из которых должна быть в верянемрегистре, тогда для элемента ввода будет' использоваться такой код. <input pattern=" [О-9] [A-Z] {З}" name=part title="A part number is а digit followed ~ three uppercase letters."> Ьу • "Oi 106 • Глава 3 ПРИМЕЧАНИЕ ' Если регулярные выражения пугают вас, но вы хотите побольше о них узнать или просто подкрепить свои знания, можете взглянуть на блог Стивена Левитана: http://bIog.stevenlevithan.com/. Можно, кстати, добавить placeholder="9AAA " или другую короткую подсказку. В спецификации говорится, что регулярные выражения атрибу та pattern строятся в выражений в соответствиис синтаксисомрегулярных JavaScript за исключением умевается использование л ( : того, что в них подраз ? в начале и ) $ в конце. Так что если вы привыкли работать с регулярными выраже ниями, вы, скорее всего, уже знаете, что нужно делать . Если нет, перед вами открывается интереснейший мир регулярных выражений. В Интернете вы почти всегда сможете найти то регулярное выражение JavaScript, которое вам нужно . Но с регулярными выражениями на самом деле довольно легко работать, если смотреть на это проще . Например, для поля ввода ZIР-кода в формате 9999 (считая, что 99999 или 999999 соответствует любой цифре) можно исполь зовать такой код . ~ Это регулярное выражение ищет последовательности из пяти цифр с необязательным суффиксом - дефисом и еще одной последовательностью из четырех цифр. Можно расширить наш шаблон так, чтобы он позволял вводить почтовые коды Соединенного Королевства (используя упро щенный вариант) . Тогда нам потребуется усложнить регулярное выражение . Теперь наше регулярное выражение стало гораздо более сложным и поэтому проверить его в шаблоне будет не очень просто. Но так как здесь используется тот же синтаксис, что и в JavaScript, мы можем выполнить проверку в консоли бра узера (например, в чистый Firebug или Орега Dragonfly), используя JavaScript. Приведенный ниже при мер - тест, опреде- Формы ляющий правильность проверки почтового кода Соединенного Королевства; в нем используется JavaScript-метод test. Обратите внимание на то, что я добавил Л (?: в начало и )$ в конец (об этом говорится в спецификации). ? [а - zA- Z] {1, 2 }\ d {1, 2 }\ s ? \ d [а - zA- Z] {1, 2 } ) $ / . test ("Ьп14 8рх") > true /Л (:? [a-zА-Z] {1, 2} \d{ 1,2} \s?\d [a-zА-Z] {1, 2}) $/ ~ test ("Ьп149 8рх") > false / Л ( : ~ Эти результаты верны, поскольку «Ьп149» не соответствует стандартупочтовых кодов (и, безусловно, недопустим с точки зрения нашего надуманногопримера).Наконец,стоит отметить, что атрибут pattern восприимчивК регистру, и так как у нас нет возможности переключить его в режим невосприимчиво сти, в этом примере нам приходитсяявно указывать символы в нижнем и верхнем регистре. АТРИБУТ AUTOCOMPLETE в большинстве браузеров есть свои функции автозаполнения. Новый атрибут autocomplete позволяет вам контролировать его работу. По умолчаниюполе ввода наследуетсостояниеавтозаполнения формы, к которой оно относится.Для форм автозаполнениепо умолчаниювключено. Если атрибут autocomplete элемента формы включен, поле может автоматическизаполняться. Я приведу фрагмент спецификации,описывающийсостояние off (его можно отнести к разрядумрачногоюмора): «Состояние off можно использовать либо когда вводимые данные строго конфиденциальны (например, если это код активации ядерно го оружия), либо когда эти данные никогда не будут повторно использоваться (например, разовый ключ для входа в систему банка), и пользователь должен будет каждый раз вводить их явно». АТРИБУТbI MIN И МАХ Как мы уже видели, когда говорили о <input type=number>, эти атрибуты позволяют ограничивать диапазон вводимых значений; форма не будет отправлена, если значение мень ше min или больше птах, Их можно использоватьи с другими - например, поле <input type=date типами ввода данных • 107 108 • Глава 3 min=2010-01-01 mах=2010-12-Зl>приметтолько даТУ,.01 носящуюся к 2010 году. Часто бывает полезно делать так, чтобы при создании HTML сервер присваивал атрибуту minдату ce~ годняшнего дня, и тогда вводить можно было бы только после дующие даты (например, на сайте бронирования авиабилетов), или же чтобы сервер присваивал это значение атрибуту mах (например, для поля ввода даты рождения). АТРИБУТ Атрибут STEP s tеротвечает за степень подробности вводимых дан ных. Если вы хотите, чтобы пользователь ввел число в процентах (между О и 100) с точностью до 5, можно использовать такой код. <input type=number mix=O mах=100 step=5> Тогда счетчик будет увеличиватьсяс шагом 5. В примере с элементом управления для ввода времени вы може те использовать step=any. Это позволит пользователю выбрать любое время с любой точностью (например, с точностью до тысячных долей секунды или более); но обычно такие элемен ты управления требуют ввода времени с точностью до одной минуты. <input name=favtime type=time step=any> КАК СОБРАТЬ ВСЕ 3ТО ВМЕСТЕ Достаточно сложно разобраться, к каким типам ввода данных относятся те или иные атрибуты, особенно когда вы знакоми тесь со всеми ними одновременно (как в данном случае). 'Но когда вы начнете их использовать, все встанет на свои места. К примеру, ясно, что для <textarea> нельзя использовать min requ i red - можно. и тах, потому что это бессмысленно, а 'ФОРМА КОММЕНТАРИЯ БЛОГА Давайте рассмотрим классический пример формы, с которой знаком каждый. Практически во всех блогах есть раздел ком ментариев, в котором есть поля для имени пользователя, оста вившего комментарий (обязательное), адреса его электронной почты (обязательное), URL (не обязательное) и самого ком ментария (обязательное). Если бы мы создавали валидацию вручную, нам потребовалось бы написать много JavaScript-кода. Впрочем, в HTML5 можно воспользоваться автоматической валидацией: для этого требуется всего лишь несколько новых Формы типов форм, каждая их которых должна содержать атрибут пате (согласно спецификации). Кроме того, мы добавим кнопку от правки формы - в настоящее время в Opera процесс валидации полей происходит только после отправки формы. <form> <label for=form-nаmе>Nаmе</lаЬеl> <input name=form-name id=form-name type=text -, required> <label for=form-еmаil>Еmаil</lаЬеl> <input name=form-email id=form-email -, type=email required> <label for=form-url>URL</lаЬеl> <input name=form-url id=form-url type=url> <label for=form-соmmеnt>Соmmеnt</lаЬеl> <textarea name=form-comment id=form-comment -, required> Раз, два -

и готово! И никакого

JavaScript!

ПОЛ3УНОК СО СКРИПТОМ ДЛЯ ВЫВОДА Мы уже знакомы с

, так что давайте на

пишем код для следующегослучая. Пусть нам нужно показать пользователюдиапазондопустимыхзначенийв виде ползунка,

причем мы хотим добиться автоматическоговывода значений верхней и нижней границы и динамическоговывода текущего значения ползунка.

Ползунокбудет перемещатьсяот

1 до 11, как и все нормальные

элементы управления (будь то гитарный усилитель или что либо другое), с шагом

1, и поскольку это значение используется

по умолчанию, мы можем вообще не добавлять атрибут э т ер ,

mах=11

name=tap>

Чтобы отобразитьзначения верхней и нижней границы, будем использоватьгенерируемыйконтент (который не работаетдля

ползунковв браузерахWebКit).

input[type=range] ::before {content: attr(min)i} input[type=range] ::after {content: attr(max)i} Этот код отобразитнужныезначенияи создастдля них оформ

ление с помощью CSS. в качестве примера (рис.

3.10) приведем

результат работы следующего кода.

input[type=range] {width:500pXi color:redi font-family: cursivei font-size:2emi} 111

I

• ,01

110

•

Глава

3

Рис.

3.10.

и rенерируемые значения

min

иmахвОреrа

Чтобы отобразить текущее значение ползунка, мы будем ис пользовать новый элемент

.

~ЛЕМЕНТ Элемент

предназначендля вывода результатов вы

числений (или чего-то другого) с помощью скрипта, Он может относитьсяк какой-нибудьформе, и тогда он должен либо рас полагатьсявнутри нее, либо содержатьее атрибут. для удобства взаимодействияс пользователемк форме могут быть также привязаны новые элементы

И <me t e r>.

Чтобы привязать этот элемент к ползунку, будем использовать имя ползунка

(name=tap)

которой принадлежит

и событие onforminput. Когда форма,

,

получит вводимые данные

(это произойдет при перемещении ползунка), мы сможем ото

бразить значение этих данных.

S Фактическоесодержимоеэлемента (в нашем случае

«5») будет

отображаться только до тех пор, пока ползунок не

будет перемещен. Необходимо внимательно следить за тем, чтобы это значение совпадало со значением атрибута v a l u e соответствующего поля ввода. В нашем примере часть

value=...

задает в качестве отображаемого значения то, которое вы вы

берете с помощью ползунка. Это похоже на this . innerHTMk а v a l ue выступает в роли краткой формы записи. для элемента можно создать таблицы стилей (правда, сейчас это не поддерживаетсяв

Opera) .

ИСПОЛЬЗОВАНИЕ WAI-ARIA ДЛЯ ВРЕМЕННОГО ОБЕСПЕЧЕНИЯ ДОСТУПНОСТИ

Хотя мы говорили о том , что
type=range > снимает

с разработчика ответственность за обеспечение доступности, это будет верно только тогда, когда

HTML5

будет обладать

широкой поддержкой, а вспомогательные технологии будут понимать этот новый тип ввода.

Сейчас, когда мы находимся на переходном этапе, при исполь

зовании НТМL5-ползунков вам следует также добавлять кое какую информацию WAI-ARIA (на данном этапе придется ду блировать некоторые сведения).

Формы

value=O role=slider aria-valuemin=l aria-valuemax=ll aria-vаluеnоw=О>

ro 1 е =s 1 i de r сообщает вспомогательным технологиям, как со поставить этот элемент управления и элементы управления опе

рационной системы. При изменении положения ползунка зна

чение aria-vаluепоwнуЖНО обновить с помощью

JavaScript. change

в таком случае вы захотите обратиться к событию

ползунка; но в нашем примере мы будем просто использовать атрибут

onchange. К сожалению,для правильногообновления

значения aria-vаluепоwМbIне можем использоватьсинтаксис

этого свойства -

нам придется обновлять атрибут

DOM.

value=O role=slider aria-valuemin=l aria-valuemax=ll aria-vаluеnоw=О onchange="this.setAttribute('aria-vаluеnоw'

-. this.value)"> Такой код будет обновлятьзначение атрибута а г д а-гоа Гцепом это можно проверить,проследивза элементомс помощью DOM

Inspector.

ОБРАТНАЯ СОВМЕСТИМОСТЬ С УСТАРЕВШИМИ БРАУ3ЕРАМИ Остается главный вопрос: Что мы можем сделать для устарев

ших браузеров! Ответ звучит так: пока не отправляйте на пенсию вашу старую JavaScript-валидацию; оставьте ее в ка честве запасного варианта и выполните проверку возможно

стей. Например, чтобы определить, поддерживается ли

, вы создаете новый С по мощью JavaScript, но не добавляете его на страницу. Далее вы

•

111

112

•

Глава

3 просите ваш новый элемент сообщить, какой у него тип. Если в ответ вы получаете

можность

-

«email», то браузер

поддерживает эту воз

и тогда пусть он делает все сам без JavaScript-вали

дации. Если вы получаете в ответ

«text», это

значит, что было

выбрано значение по умолчанию и эта возможность не под держивается. Так что в идеале ваш код должен загружать аль

тернативную библиотеку валидации, используя метод загрузки по требованию

HTML5,

(lazy load), и тогда браузерам,

поддерживающим

не нужно будет загружать и обрабатывать

JavaScript,

который им не нужен.

в качестве альтернативного варианта можно использовать библиотеку Моdеrпizг, и она сделает всю работу за вас. Это н ебол ьша я библиотека (в настоящий момент 7 Кбайт), которая выполняет проверку возможностей и возвращает булевы значения г

1 t • ~ ре з

l rrа 1 j

JavaScript (например,

). в ней есть сбои (осторожнее с WebКit), но она пока еще находится в про

цессе разработки. Загрузить ее можно с....... v.'Ii.moc](·,:l,l:.t.i::>m/ .

var i = document.createElement( "input") ; i .setAttribute("type", "email"); return . t yp e !== "text"; Атрибутытоже можно проверять.

return 'autofocus' in document . createElement("input");

• • •• Стоит отметить, что современные браузеры WebКit для ПК, а именно Safari и Chrome, судя по результатам проверки возможностей, поддерживаюттипы : г. ,;. ::.. ..., ~ :.i.,

, · С .'. И ', ·П.Г. - l: . На самом

деле, в «живых» версиях этой поддержки еще нет, а причиной путаницы является тот факт, что

Moblle Safari (тоже на движке WebКit) поддерживает эти типы ввода данных, чтобы настраивать клавиатуру в зависимости от типа (такая клавиатура показана на рис. 3.8). То есть сам браузер добавляет специфическую для устройства поддержку, обычно в виде клавиатуры (особенно на

iPhone), зависящей от типа ввода данных.

Итак, что вам это дает? Во-первых, вы создаете код, ориентиро

ванный на будущее -

время, когда все браузеры будут поддер

живать эти дополнения к формам. Во-вторых, вы выигрываете в удобстве использования и доступности.

Формы

ОФОРМЛЕНИЕ НОВЫХ ПОЛЕЙ ФОРМЫ И СООБЩЕНИЙ ОБ ОШИБКАХ

Каждый раз, когда мы рассказываем о наших новых логичных

полях форм на конференциях, кто-то спрашивает, как создавать стили для таких полей. Практически ко всем новым элементам

управления можно добавлять базовое оформление: шрифты, цвета и т. п. К этим элементам также применимы некоторые

возможности ТR/сssЗ-ui/) -

CSS Basic User Interface Module (httр://www.wЗ.огg/

в частности, псевдоклассы : invalid и : required.

Но если вы хотите, к примеру, сделать выходныедни в поле вы

бора даты зеленымиили сделать сообщенияоб ошибкахфиоле товыми, у вас это не получится. Селекторы и дополнительные

СSS-средствадля этих частей элементов управления формами еще не определены.

Но это не плохо. Специалисты по брендингу, конечно, рас строятся, если текст-подсказкав поле не будет оформлена

в корпоративномстиле. Но зато вы выигрываете в удобстве использованияи доступности. Хотя иногда очень хочется са

мому создать стили для содержимогополей формы (что может

иногда доходить до безумия - см. http://meyerweb.com/eric/ thoughts/2007/05/15/formal-weirdness/), лучше, по возможности, оставлять их оформление наиболее близким к тому, что брау эер используетпо умолчанию,

-

и не важно, что на это скажут

специалисты по брендингу. Ползунок и поле выбора даты будут выглядеть в браузере одинаково на разных сайгах, и благодаря этому они будут более понятны пользователю. Гораздо лучше, когда поле выбора даты на сайте Х выглядит и работает так же, как на сайте У или на сайте

z.

И наконец, в большинстве случаев использование встроенных элементов управления вместо их имитации с помощью

JavaScript

делает ваши формы более доступными для пользователей, поль зующихся вспомогательными технологиями.

ПЕРЕОПРЕДЕЛЕНИЕУМОЛЧАНИЙ БРАУ3ЕРА Когда мы добавляем новые НТМL5-типы элементов управления

формами или атрибут re qu i r е d, браузер использует готовую валидацию со встроенными сообщениями об ошибках. Это замечательно,но что если вы хотите изменить эти сообщения

в соответствиис требованиямизаказчика?Что если они напи саны так, как будто сегодня день подражанияпиратам? Может

•

113

114

•

Глава

3 быть, я хочу, чтобы все сообщения проверки были написаны на пиратском языке.

Это возможно

-

нужно всего лишь немного JavaScript-кода.

С помощью атрибутов контента (которые трудно добавлять в разметку) вы не сможете создать ваши собственные сообще ния валидации, однако для этого можно использовать атрибуты

DOM

(которые доступны благодаря

JavaScript).

Так что у вас

есть два варианта: добавить их до запуска валидации или же

сразу после отправки формы добавить специальное сообщение валидации и в этот момент динамически создать это сообщение, добавив в него значение, вызвавшее ошибку. Итак, пусть мы нехотим, чтобы на экране отображался такой текст.

humptydumpty is not а legal e-mail address Тогда мы изменим валидацию так, чтобы сообщение соответ ствовало правилам «традиционной» речи пиратов.

humptydumptybe not а legal e-mail address Метод

setCustomValidi t упозволяетзадать ваше собственное

сообщениевалидации.

var email = document .getElementById('email') ; email.form .onsubmit = functi on () { email.setCustomValidit y(email .value + Ье ~ not а legal e-mail address") ; };

На рис.

3.11 и 3.12 показано, как Opera отображает специальное

сообщение валидации.

~

_ _-

Тyp.cal val idвtton

Plrate speak val ldaUon

~

G.......... .... ... .....

J <.bn

~-= r-------- - - - -

I

)~

_.....1( '"-

.,...~.~On

. . . . . . . . . 8O:hU

·Ii·

Рис. 3 .11.Сообщениевалидации

••

·

ц' l О<Ж

У

Рис. 3.12 .Ваше собственное

ДЛЯ адреса электроннойпочты

сообщение валидации,

в

имитирующее речь пиратов,

Opera

в

Сейчас

Opera

Opera

является единственным браузером с поддерж

кой встроенных сообщений валидации, так что здесь нечего

Формы сравнивать. Я говорю это потому, что вы наверняка заметили,

что перед специальным сообщением валидации добавлено еще одно: «1he value humptydumpty is not allowed Ьу а script оп the page!». Его добавил сам браузер, и мы никак не можем этого изменить (сейчас). Это стоит учитывать, если вы собираетесь

использовать свои собственные сообщения валидации. Однако, если вас не устраивает то, как работают специальные сообщения валидации, вы можете задать поведение вашей ва лидации так, чтобы оно соответствовало вашему приложению. Когда вы запускаете setCustomValidi ty, метод создает DOM-

атрибут validationMessage, доступный только для чтения. Это можно использоватьдля управлениявалидацией,о чем мы и поговорим в следующемразделе.

ИСПОЛЬ30ВАНИЕJAVASCRIPT ДЛЯ DIУ-ВАЛИДАЦИИ Наряду с атрибутами контента, которые позволяют осущест влять валидацию со стороны клиента и создавать качествен

ные виджеты для веб-форм (как в большинстве

HTML5-

спецификаций), существует дополнительный интерфейс

JavaScript API, который дает нам возможность полностью управ лять валидацией и отправкой формы. С помощью

JavaScript API

мы можем регулировать то, как ре

зультат валидации будет представлен пользователю, но мы также можем передать весь фактический код валидации в веде ние

API

новых форм. Также

API

позволяет точно определить,

почему конкретное поле формы не проходит валидацию.

КАКИНИЦИИРОВАТЬВАЛИДАЦИЮ Все элементы форм и элементы ввода данных (включая

<select> и
валидации и обратной связи, использующихся в браузере по умолчанию.

Метод

checkValidi ty возвращает значение true или false

в зависимости от успешности выполнения проверок валида

ции, но в то же время он заставляет браузер выполнять эту проверку. Если вы хотите самостоятельноуправлять отобра жением результатов валидации, то вам не стоит использовать этот метод.

•

115

116 •

Глава

3 ВАnИДНОСТЬ~nЕМЕНТОВ у отдельных полей формы помимо метода checkValidi ty есть

DОМ-атрибут,который возвращает объект ValidityState. у объекта валидности есть несколько атрибутов состояния, но самым простым и самым важным из них является атрибут

valid. Проверяяего значениес помощью JavaScript, вы можете управлять специальной системой валидации с обратной связью. Если мы подключимся к обработчику события отправки нашей

формы, мы сможем вручную просматривать все поля ввода и проверять атрибут валидности. Но что если у поля нет правил

валидации? Вам повезло: в АРI есть атрибут will Validate, с помощью которого мы можем узнать, следует ли проверять

это конкретноеполе. Приведупример (слегка надуманный):

var email = docuement.getElementById('email'); if (email .willValidate) { if (!email.validity.valid) ( alert("Yarr, уе old email Ье invalid");

.4 П Р И М Е Ч А Н И Е

.

Следует обратить внимание на то, что у элементов :.Ц? l ... ~ ":,':-- тоже есть атрибут ","" ' ::. .:: , " , но он, к сожалению, ничего не делает: атрибут ',''-'- - : .::' всегда имеет значение ё r'Jc:' . Для элемента
Если У вас есть состояние валидации отдельного поля фор мы, вы можете получить сведения о специально заданных

сообщениях, для которых использовался метод element. validationMessage, или проверить другие состоя ния валидации, такие как valueMissing, typeMismatch, patternMismatch,tooLong,rangeUnderflow,rangeOverflow, stepMismatch И customError.

КАК И36ЕЖАТЬВАЛИДАЦИИ Последний вопрос, на который мы должны ответить: Что если

вы хотите отправить форму, но не хотите,.чтобы браузер про водил ее валидацию? Такое тоже возможно. Но зачем вам это

может понадобиться? Что если у вас есть многоуровневая форма для регистрации или отправки каких-либо данных? В длинных

формах удобно выделять уровни (так, например, делает еВау,

Формы когда вы что-то продаете). Также пользователю может понадо биться сохранить состояние заявки, даже если форма еще не заполнена или заполнена неправильно.

Существует два способа отменить валидацию. Это можно сде лать применительно к отдельному элементу управления или

к целой форме. Атрибут nonvalidateJ который может быть задан только для элементаформы, отменяетвалидациюданного конкретногополя. На практике это пока не используется,и все примерыявляютсячисто теоретическими.Представьте.что вы

используете type="email", причем в браузерах,поддерживаю щих этот

t уре=" email ", который позволяет пользователю вы

полнять поиск В записной книге. Но вас не интересует правиль ность текста, введенного вручную

-

возможно, потому, что этот

адрес-может относиться к внутренней сети, и, следовательно, не

похож на обычные электронные адреса. И в таком случае вам

понадобится атрибут nonvalidateВторой метод сейчас,

-

formnovalidateJ который используетсяуже

можно применять к отдельным элементам ввода

данных и кнопочным элементам (хотя, возможно, это имеет

смысл только для type="submi t"И type="button"). Атрибут f о rmn ov а 1 i da te позволяетотправитьформу без выполнения валидации,которая требуетсядля полей формы. Приведенный

ниже фрагмент кода создает для каждого элемента
кнопку «save везвюп», благодаря чему пользователь может каж дый раз сохранять введенные данные, и валидация не выполня ется до тех пор, пока не нажата заключительная кнопка отправки.

Some bits about you
Email:

Homepage:
--, />

С помощью свойства HTMLFieldSetElement. elements мож но сделать так, чтобы при нажатии кнопки «save веввюп» вы полнялась JavaScript-валидация только полей, расположенных

•

117

118

•

Глава

3 внутри этого элемента fieldset (это свойство является новым

в спецификацииHTML5, так что, возможно, вам придется вос пользоваться

fieldset. getElementsByTagName

И найти все

нужные поля формы).

СОБЫТИЕ«ВСЯКИЙ РА3, КОГДА ЧТО-ТО МЕНЯЕТСЯ» Одно практическинезаметноеизменение,касающеесяэлемента

, -

добавление нового события oninputchange. На

самом деле, это очень полезное событие: оно запускается для

элемента формы всякий раз при изменении какого-либо поля.

Благодаря этому вам не придется добавлять множество обра ботчиков onchange к каждому элементууправления формой. Например,если бы мне нужно было создать поле выбора цвета одновременнов модели

RGBA

и

HSLA,

мне бы, скорее всего,

пришлось добавить приемника событий к каждому ползунку. Но с помощью события oninputchange я могу добавить один

обработчик событий к форме и пересчитать значения RGBA и

HSLA одним

методом.

Результат использования одного или нескольких обработчиков

событий будет выглядеть почти одинаково. Однако вариант без дублирования обработчиков событий выглядит лучше и акку ратнее.

При передвижении ползунка будут сгенерированы значения

RGBA и HSLA, и образец

цвета будет обновлен. Ниже приведен

JavaScript-код, который для этого потребуется.

form.onforminput = function () { var i = this.length, values = [ ] , value О; while (i--, value = this[i] .value) if (this[i] .type == 'range') { switch (this[i] .name) { // альфа-канал имеет значение -, от О до 1 case 'alpha_channel' -, values.push(value / 100);break; // тон имеет простое значение от -,

О

до

360

case 'hue' values.push(value); -1 break; // по умолчанию насыщенность -, и яркость указываются -, в процентах default: values.push(value + -, , %' ) ;

Формы

}

h sla . v alue = ' h s l a (' + ..., v a l ue s . r e verse () . j oi n (', ' } + ' ) ' preview . style .backgroundC ol or = h sla . value; rgba . val ue = getC omputedStyle(preview, null) ..., backgroundCol or; };

в итоге мое поле выбора цвета использует тип ввода данных

range, новое событие onf orminput и новые элементы вывода для отображениязначения (хотя это можно было сделать с по мощью . innerHTML). Результат показан на рис. 3.13.

.

-

~

',

'. г

-,..-

.-

~'

.

Colou r picker ---.-----------------.--------------.-------------------,

i J

j I

~

!

I! II !:

Нue •

3600

!.IJmlnancв

•

•

~ешпnel

%

j

~

!

0-1

'!

70

•

НSLA: hsla(16. 87%. 39% , 0.8)

!i

!!

I ~ . . . :_~~~_~_~~~~:_~:_~~:~:~} Рис .

i J

Saturвtion

3.13. Поле выбора цвета в

i

i i

...!

HSLA с использованием

события

onforminput

ЗАКЛЮЧЕНИЕ я надеюсь, вы поняли, что формы

HTML5

позволяют разра

ботчикам существенно увеличить производительность, а поль зователям

-

последовательно взаимодействовать с системой.

Эти формы предлагают вам огромное множество встроенных возможностей, для которых раньше потребовался бы дополни

тельный код (например, валидация форм и создание ползунков). Реализация этих возможностей варьируется , она растет в Орега

и браузерах WebКit

(Safari, Chrome), а

в

Firefox находится на IE9 можно ком

начальной стадии . Отсутствие реализации в

пенсировать с помощью

JavaScript,

поскольку новые свойства

устроены по принципу «изящного ухудшения» .

А теперь мы перейдем к еще более интересным вопросам .

•

119

Глава

4

ВИДЕО И АУДИО

БрюсЛоусон И Реми Шарп

Видео и аудио Давным-давно, в далекой-далекой галактике мультимедиа во

Всемирной паутине была ограничена проигрыванием

MIDI-

мелодий и анимированнымиGIF-фаЙлами. По мере совершен ствования компьютерных технологий музыка в формате МР3 вытеснила MIDI, и стало появляться привычное нам видео.

Разнообразные плееры боролись за место под солнцем - Real Player, Windows Media и так далее, - пока в 2005 году не появил ся победитель: Adobe Flash, в основном благодаря тому, что его плагин был широко распространен и именно он использовался для

YouTube.

H1iML5 предлагает

конкурирующий открытый стандарт для

размещения мультимедийных данных в Сети с оригинальными

видео-, аудиоэлементами и

API. В этой главе, по большей части,

обсуждается элемент

Изучаем HTML5. Библиотека специалиста

Yesterday

Tuesday

Yesterday

Tuesday

Sесопd-sехiеst man concedes defeat

Tran5cript

On l i ne Dat ing

Spo ns o r e d Features

Spons o r e d Features

HTML5 Canvas

Smashing HTML5

HTML5 Geolocation

HTML5 Solutions: Essential Techniques for HTML5 Developers

HTML5 Solutions: Essential Techniques for HTML5 Developers

HTML5 Hacks

HTML5 Media

Decoding HTML5

HTML5 Media

HTML5 Geolocation

HTML5 Architecture

Decoding HTML5

HTML5 Canvas

Introducing HTML5

HTML5 Hacks

HTML5 Canvas

HTML5 Digital Classroom,

Pro HTML5 Accessibility

HTML5 Cookbook (O'Reilly Cookbooks)

Teach Yourself VISUALLY HTML5

HTML5 For Web Designers

HTML5: Up and Running

HTML5 – Leitfaden für Webentwickler

HTML5: Up and Running

HTML5: Up and Running

Practical HTML5 Projects

What Is HTML5?

Practical HTML5 Projects

HTML5 for Web Designers

Start Here! Learn HTML5

Recommend Documents