<p>Здесь так <em>мило</em>.</p>
<small>Размещение не предоставляется.</small>
Из этого получается следующее содержание:
• An Event Apart
• Города
• Сиэтл
• Бостон
• Миннеаполис
Это работает достаточно неплохо. Все содержимое, следующее за элементом заголовка, считается связанным с этим заголовком.
Теперь посмотрим на элемент small. Он должен быть связан со всем документом. Но браузер никак не может об этом узнать. Он ниоткуда не может узнать, что элемент small не должен относиться к заголовку «Миннеаполис».
Добавленное в HTML5 содержимое-разделитель позволяет вам явно размечать начало и конец взаимосвязанного содержимого:
<h1>An Event Apart</h1>
<section>
<header>
<h2>Города</h2>
</header>
<p>Присоединяйтесь к нам в 2010 году в этих городах.</p>
<h3>Сиэтл</h3>
<p>Идите в изумрудныйгород по дороге из желтого кирпича.</p>
<h3>Бостон</h3>
<p>Для друзей – Beantown.</p>
<h3>Миннеаполис</h3>
<p>Здесь так <em>мило</em>.</p>
</section>
<small>Размещение не предоставляется.</small>
Теперь ясно, что элемент small подпадает под заголовок “An Event Apart”, а не «Миннеаполис».
Я могу разделить это содержимое на еще более мелкие части: тогда каждый город окажется в своей собственной секции:
<h1>An Event Apart</h1>
<section>
<header>
<h2>Города</h2>
</header>
<p>Присоединяйтесь к нам в 2010 году в этих городах.</p>
<section>
<header>
<h3>Сиэтл</h3>
</header>
<p>Идите в изумрудныйгород по дороге из желтого кирпича.</p>
</section>
<section>
<header>
<h3>Бостон</h3>
</header>
<p>Для друзей – Beantown.</p>
</section>
<section>
<header>
<h3>Миннеаполис</h3>
</header>
<p>Здесь так <em>мило</em>.</p>
</section>
</section>
<small>Размещение не предоставлятся.</small>
Содержание при этом будет таким же:
• An Event Apart
• Города
• Сиэтл
• Бостон
• Миннеаполис
Алгоритм содержания
Пока новое содержимое-разделитель не дает нам ничего такого, чего мы не могли бы делать с предыдущими версиями HTML. Вот самое интересное: в HTML5 у каждого содержимого-разделителя есть свое собственное внутреннее содержание. Таким образом, вам не нужно следить, на каком уровне заголовков вы находитесь, – можете просто каждый раз начинать с h1:
<h1>An Event Apart</h1>
<section>
<header>
<h1>Города</h1>
</header>
<p>Присоединяйтесь к нам в 2010 году в этих городах.</p>
<section>
<header>
<h1>Сиэтл</h1>
</header>
<p>Идите в изумрудныйгород по дороге из желтого кирпича.</p>
</section>
<section>
<header>
<h1>Бостон</h1>
</header>
<p>Для друзей – Beantown.</p>
</section>
<section>
<header>
<h1>Миннеаполис</h1>
</header>
<p>Здесь так <em>мило</em>.</p>
</section>
</section>
<small>Размещение не предоставляется.</small>
В предыдущих версиях HTML содержание было бы построено неправильно:
• An Event Apart
• Города
• Сиэтл
• Бостон
• Миннеаполис
В HTML5 содержание строится правильно:
• An Event Apart
• Города
• Сиэтл
• Бостон
• Миннеаполис
hgroup
Бывают времена, когда вы хотите использовать элемент заголовка, но не хотите, чтобы его содержимое появлялось в содержании документа. Именно это позволяет вам сделать элемент hgroup:
<hgroup>
<h1>An Event Apart</h1>
<h2>Для людей, которые создают вебсайты</h2>
</hgroup>
В этом случае заголовок второго уровня («Для людей, которые создают веб-сайты») – это на самом деле слоган. В элементе hgroup только первый заголовок войдет в содержание. Первый заголовок не обязательно должен быть h1:
<hgroup>
<h3>Скрипты для DOM</h3>
<h4>Веб-разработка на JavaScriptдля Document Object Model</h4>
</hgroup>
Корневые элементы разделов
Некоторые элементы не появляются в сгенерированном содержании. Другими словами, неважно, сколько заголовков вы используете внутри своих элементов, – в содержании документа они не появятся.
Элементы blockquote, fieldset и td являются исключениями для алгоритма составления содержания. Эти элементы называются «корневыми элементами разделов» – это не нужно путать с элементами-разделителями.
Переносимость
Так как каждый элемент, относящийся к типу контента-разделителя, создает собственное содержание, теперь в вашем документе может быть гораздо больше заголовков, чем просто от h1 от h6. Теперь нет никакого ограничения на то, как глубоко могут спускаться уровни ваших заголовков. Что более важно, теперь вы можете начать представлять свое содержимое в более модульном ключе.
Предположим, у меня есть запись в блоге под названием «Бутерброд с сыром». До HTML5 мне нужно было бы знать контекст, в котором расположена запись, чтобы определить, какой уровень заголовков использовать для заголовка записи. Если запись находится на главной странице, то она появляется вслед за элементом h1, который содержит название моего блога:
<h1>Мой клёвый блог</h1>
<h2><a href="cheese.html">Бутерброд с сыром</a></h2>
<p>Моя кошка съела бутерброд с сыром.</p>
Но если я публикую запись в блоге на отдельной странице, то я хочу, чтобы заголовок записи был заголовком первого уровня:
<h1>Бутерброд с сыром</h1>
<p>Моя кошка съела бутерброд с сыром.</p>
С HTML5 мне не нужно волноваться о том, какой уровень заголовков использовать. Мне нужно просто использовать содержимое-разделитель: в данном случае – элемент article:
<article>
<h1>Бутерброд с сыром</h1>
<p>Моя кошка съела бутерброд с сыром.</p>
</article>
Теперь это содержимое по-настоящему переносимо. Неважно, где оно появляется, на отдельной странице или на главной странице блога:
<h1>Мой клёвый блог</h1>
<article>
<h1>Бутерброд с сыром</h1>
<p>Моя кошка съела бутерброд с сыром.</p>
</article>
Новый алгоритм составления HTML5 выдает правильный результат:
• Мой клёвый блог
• Бутерброд с сыром
Локальные стили
То, что у каждого элемента-разделителя есть свое собственное содержание, делает эти элементы прекрасно подходящими для решений на Ajax. И снова HTML5 показывает свое происхождение из спецификации для веб-приложений.
Однако если вы попытаетесь перенести кусочек содержимого из одного документа в другой, то столкнетесь с рядом проблем. CSS-правила, примененные к главному документу, будут применены и к вставленному содержимому. Это в настоящий момент одна из главных проблем с распространением виджетов в вебе.
HTML5 предлагает решение этой проблемы в виде атрибута scoped, который можно применить к элементу style. Все стили, объявленные внутри этого элемента style, будут применены только к ближайшему родительскому элементу-разделителю:
<h1>Мой клёвый блог</h1>
<article>
<style scoped>
h1 { font-size: 75% }
</style>
<h1>Бутерброд с сыром</h1>
<p>Моя кошка съела бутерброд с сыром.</p>
</article>
В этом примере только у второго элемента h1 будет значение размера шрифта, равное 75%. По крайней мере теория такова. Ни один браузер еще не поддерживает атрибут scoped.
В этом-то и загвоздка. Перед тем как начать использовать какое-либо новое добавление в HTML5, вам нужно учесть, какие браузеры поддерживают эту функцию. Впрочем, какой бы ни была браузерная поддержка, у меня есть несколько стратегий, которые помогут вам начать работать с HTML5. В следующей, последней главе я хотел бы поделиться с вами этими стратегиями.
6. Использование HTML5 сейчас
Если вы хотите начать использовать новые структурные элементы HTML5 прямо сейчас, вам ничто не мешает. Большинство браузеров позволят вам назначать стили новым элементам. Дело не в том, что браузеры активно поддерживают эти элементы, а в том, что большинство браузеров позволяют использовать и назначать стили любому элементу, который вы захотите изобрести.
Стили
Браузеры по умолчанию не применяют к новым элементам никаких CSS-стилей. Так что по крайней мере вы, скорее всего, захотите объявить, что все новые структурные элементы должны начинаться с новой строки:
section, article, header, footer, nav, aside, hgroup {
display: block;
}
Для большинства браузеров этого достаточно. Internet Explorer требует к себе особого внимания. Он решительно отказывается признать новые элементы, если только экземпляр каждого элемента не создан заранее с помощью JavaScript, вот так:
document.createElement('section');
Реми Шарп (Remy Sharp), гений JavaScript, написал очень полезный скриптик, который генерирует все новые элементы HTML5. Загрузите этот скрипт внутри условного комментария, так что он будет исполняться только в нуждающемся Internet Explorer:
<!-[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]->
Теперь вы можете назначать стили новым элементам сколько душе угодно.
Заголовки
Браузеры еще не начали поддерживать новый алгоритм содержания в HTML5, но вы все равно можете начать использовать доступные вам дополнительные уровни заголовков.
Джоффри Снеддон (Geoffrey Sneddon) написал очень полезную онлайн-утилиту, которая сгенерирует содержание по спецификациям HTML5 (http://bkaprt.com/html5/9)[14].
Если вы последуете совету, изложенному в спецификации HTML5, и начнете с нуля, начиная с h1, внутри каждого раздела вашего содержимого CSS-правила, которые вы напишете, очень быстро станут очень запутанными:
h1 {
font-size: 2.4em;
}
h2, section h1, article h1, aside h1 {
font-size: 1.8em;
}
h3, section h2, article h2, aside h2,
section section h1, section article h1, section aside h1,
article section h1, article article h1, article aside h1,
aside section h1, aside article h1, aside aside h1 {
font-size: 1.6em;
}
Это только первые три уровня, и приведенный код не покрывает все возможные комбинации заголовков внутри содержимого разделов. К счастью, алгоритм содержания HTML5 довольно гибок. Если вы хотите использовать уровни заголовков по старинке, это никоим образом не отразится на содержании.
Aria
Новые структурные элементы HTML5 будут очень полезны для технологии специальных возможностей. Вместо того чтобы создавать ссылки «пропустить навигацию», все, что нужно делать, – правильно использовать элемент nav. Это позволит пользователям программ для чтения с экрана пропустить навигацию, а нам не придется создавать для этого отдельную ссылку.
По крайней мере план именно такой. Но прямо сейчас мы должны работать с технологиями, которые браузеры и программы чтения с экрана уже поддерживают.
К счастью, в настоящий момент отличную поддержку имеет стандарт ARIA (доступные насыщенные интернет-приложения, Accessible Rich Internet Applications).
На самом высоком уровне ARIA позволяет технологиям специальных возможностей в полной мере работать с самыми разнообразными Ajax-взаимодействиями с веб-приложением. На самом простом уровне ARIA позволяет нам добавить семантической насыщенности в наши документы.
Самая основная единица ARIA – атрибут role. Вы можете добавить role="search" к вашей форме поиска, role="banner" к красивому заголовку вашего сайта и role="contentinfo" – к подвалу страницы. Полный список значений в спецификации ARIA можно посмотреть здесь: http://bkaprt.com/html5/10[15].
Вы можете использовать эти значения ролей в HTML 4.01, XHTML 1.0 и любом другом типе разметки, но тогда ваш документ не будет проходить валидацию – если только вы не создадите собственный доктайп, а это страшное занятие.
Но роли ARIA – часть спецификации HTML5, так что можно и использовать ARIA, и проходить валидацию.
Вы также можете использовать дополнительную семантику атрибута role для добавления стилей. Здесь вам поможет селектор по атрибутам. Такие селекторы позволят вам отличать заголовки и подвалы документов от заголовков и подвалов внутри содержимого разделов:
header[role="banner"] { }
footer[role="contentinfo"] { }
Валидация
Если использовать его с умом, валидатор – очень мощный инструмент для веб-разработчика. Если нет, то валидатор дает ботаникам и занудам повод показывать пальцем на чужую разметку и смеяться над ней.
Анри Сивонен (Henri Sivonen) разработал полнофункциональный валидатор HTML5. Он находится по адресу: http://validator.nu/.
Вам даже не нужно обновлять свои закладки, ведущие на валидатор W3C (http://validator.w3.org/). Этот валидатор тоже использует парсер Анри, как только находит доктайп HTML5.
Тестирование функций
Если вы хотите начать использовать продвинутые типы ввода HTML5, вам нужен способ тестирования поддержки браузеров, чтобы вы могли вставить в код альтернативные варианты на JavaScript.
Modernizr – очень полезная JavaScript-библиотека, которая определяет поддержку различных типов ввода, а также audio, video и canvas (http:// www.modernizr.com/).
Этот скрипт создает в JavaScript объект с названием Modernizr. Запрашивая свойства этого объекта, вы можете определить, поддерживает браузер тот или иной тип ввода или нет:
if (!Modernizr.inputtypes.color) {
// Запасное решение на JavaScript.
}
Modernizr также исполнит маленький шулерский трюк, который позволит вам применять стили к новым структурным элементам Internet Explorer, – так что если вы используете Modernizr, то не нужно использовать вместе с ним скрипт Реми.
Выберите собственную стратегию
Только вы решаете, как будете использовать HTML5 – осторожно или, наоборот, амбициозно.
По крайней мере что вы можете сделать без всяких проблем – это взять ваши текущие HTML– или XHTML-документы и изменить доктайп на:
<!DOCTYPE html>
Ну вот, вы только что сделали первый шаг в большой мир.
Теперь можете начать использовать роли ARIA – что вам, собственно, терять?
Если вы беспокоитесь по поводу новых структурных элементов, все равно можете начать привыкать к новой семантике, потренировавшись на именах классов:
<div class="section" >
<div class="header" >
<h1>Hello world!</h1>
</div><!– /.header – >
</div><!– /.section – >
По мере того как вы будете дальше продвигаться в мир HTML5, когда будете чувствовать себе более уверенно относительно новых элементов HTML5, можете заменить эти элементы div и имена классов соответствующими структурными элементами.
Если, пожалуй, еще слишком рано использовать более продвинутые типы ввода, такие как date, range и color, нет ничего плохого в том, чтобы использовать search, url, email и другие простые типы ввода. Не забывайте, что браузеры, которые не понимают этих значений, будут просто отображать поле ввода, как если бы оно было обозначено как type="text".
Если вы чувствуете в себе дух искателя приключений, можете начать играть с audio, video и canvas. Может быть, они не вполне готовы для крупных аудиторий, но это точно забавные игрушки, с которыми можно поэкспериментировать на вашем личном сайте.
Ресурсы
Я довольно часто пишу о HTML5 на своей личной страничке: http://adactio.com/journal/tag/html5
Я не единственный человек в мире, который с нетерпением ждет HTML5. Невероятный Брюс Лосон (Bruce Lawson) тоже записывает свои мысли: http://brucelawson.co.uk/category/html5/
Брюс – только один из активных участников HTML5 Doctor – отличного ресурса, сообщество которого пишет здесь множество прекрасных статей: http://html5doctor.com/
Если вы раздумываете, не взглянуть ли на более сложную сторону HTML5, то Реми Шарп выжимает из этого языка разметки все, что возможно: http://html5demos.com/
Марк Пилгрим (Mark Pilgrim) написал исчерпывающую книгу под названием «Погружение в HTML5» (Dive Into HTML5). Вы можете купить ее на сайте издательства O’Reilly или прочитать онлайн: http://diveintohtml5.org/
На тот случай, когда вам нужно отправиться напрямую к исходной точке, держите спецификацию HTML5 на кнопке быстрой загрузки: http://whatwg.org/html5
Спецификация HTML5 включает в себя большое количество информации, предназначенной для производителей браузеров. На сайте W3C есть актуальная версия спецификации специально для веб-разработчиков: http://www.w3.org/TR/html-markup
Включайтесь!
Отправляясь в путешествие по стране HTML5, вам может показаться, что какие-то разделы спецификации запутанны. Это нормально. Более того, это будет очень полезной обратной связью.
Над HTML5 работают очень умные люди, но веб-разработчиков среди них не так много. Ваша точка зрения будет крайне ценной.
Вы можете вступить в рабочую группу HTML при W3C в качестве приглашенного эксперта – не обращая внимания на кафкианский язык приглашения, которое вам нужно будет выписать себе от своего же лица, – но я бы не советовал этого делать. В списке рассылки для экспертов огромное количество писем, и большинство из них касается политики и различных внутренних процедур.