Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.

• семантика на уровне текста;

• устаревшие функции;

• внедрение новых элементов;

• соответствие уровня доступности требованиям Руководства по обеспечению доступности веб-контента (Web Content Accessibility Guidelines (WCAG)) и Стандарта предоставления возможности полноценного использования Интер нета людьми с физическими ограничениями (Web Accessibility Initiative-Accessible Rich Internet Applications (WAI-ARIA)) для повышения общей доступности веб-приложений;

• встраиваемое медиасодержимое;

• адаптивное видео и iFrames;

• замечание по поводу приоритета автономности.

примечание

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

Разметку на HTML5 понимают все современные браузеры

Сегодня основная масса просматриваемых мною сайтов (и все сайты, созданные моими руками) написаны с использованием HTML5, без применения старого стандарта HTML 4.01.

Новые семантические элементы HTML5 (новые элементы структуры, видео- и аудиотеги) понятны всем современным браузерам, и даже старые версии Internet Explorer (предшествующие Internet Explorer 9) могут пользоваться небольшими дополнениями (полифиллами), позволяющими выводить эти новые элементы.

Что такое полифиллы?

Термин «полифилл» придуман Реми Шарпом (Remy Sharp) как намек на заполнение трещин в старых браузерах с помощью Polyfilla (известной в США шпатлевки). То есть полифилл является своеобразной прокладкой, написанной на JavaScript и предназначенной для эффективного воспроизводства новейших функций в устаревших браузерах. Но при этом важно понимать, что полифиллы утяжеляют код. Поэтому даже возможность добавления 15 полифилльных сценариев, способных заставить Internet Explorer 6 выводить сайт на экран не хуже любых других браузеров, не означает необходимости подобного добавления.

Если нужно включить в работу структурные элементы HTML5, то я бы посоветовал обратить внимание на исходный сценарий Реми Шарпа (http://remysharp.com/2009/01/07/html5-enabling-script/) или создание заказной сборки Modernizr (http://modernizr.com). Если инструментальное средство Modernizr вам еще не попадалось или не использовалось вами, то в следующей главе ему посвящен целый раздел.

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

Как правильно написать начало страницы на HTML5

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

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

doctype

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

Наш документ открывается HTML5-объявлением doctype:

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

По сравнению с HTML 4.01, где в начале страницы использовалось что-то вроде

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

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

А вот в HTML5 объявление doctype радует своей краткостью, ограничиваясь лишь формой . Интересный факт (во всяком случае, для меня): все закончилось тем, что был избран самый короткий способ сообщения браузеру о необходимости вывода страницы в стандартном режиме.

совет

Если вас интересует, что такое режим совместимости и стандартный режим, зайдите на страницу «Википедии» по адресу http://en.wikipedia.org/wiki/Quirks_mode.

Тег HTML и атрибут lang

После объявления doctype открывается тег html, являющийся корневым тегом документа. В нем также используется атрибут lang, указывающий на язык документа, а после него открывается раздел

Указание альтернативных языков

В соответствии со спецификациями W3C (http://www.w3.org/TR/html5/dom.html#the-lang-and-xml:lang-attributes) атрибут lang указывает основной язык содержимого элементов и любого из атрибутов элемента, содержащего текст. Если вы не пишете страницы на английском, то лучше указать правильный код языка. Например, для японского HTML-тег должен выглядеть так: . Полный перечень языков можно найти на сайте http://www.iana.org/assignments/language-subtag-registry.

Кодировка символов

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

Для charset без веской причины для чего-нибудь другого почти всегда указывается значение utf-8. Любознательные могут найти дополнительные сведения по этому вопросу на сайте http://www.w3.org/International/questions/qa-html-encoding-declarations#html5charset.

Покладистость HTML5

Помню, в школьные времена, когда порой наш учитель математики, по прозвищу Супермин (образовано от его фамилии Mean, то есть «средний», хотя на самом деле он был весьма неплохим учителем), не выходил на работу, все вздыхали с облегчением. В отличие от мистера Мина (фамилия изменена, дабы не нанести вреда) заменявший его учитель был покладистым и дружелюбным человеком. Он сидел тихо и обходился без крика и постоянных назиданий. Он не требовал тишины во время занятий и особо не зацикливался на нашем поведении, если мы вникали в способы решения предлагаемых им задач. Для него имели смысл наши ответы и объяснение того, как мы к ним пришли. Если бы HTML5 был учителем математики, он был бы именно таким вот покладистым по характеру. И я сейчас поясню эту странную аналогию.

Если уделяется особое внимание способу написания кода, то обычно применяются символы в нижнем регистре, значения атрибутов заключаются в кавычки, а для сценариев и таблиц стилей используется объявление типа (type). Например, вполне возможно, что для ссылки на таблицу стилей используется следующая запись:

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

Заметили? В теге отсутствует закрывающий слеш, нет кавычек вокруг значений атрибутов и нет объявления типа. Но покладистому HTML5 этого и не надо. Второй пример так же работоспособен, как и первый.