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

Я собираюсь рассмотреть с вами «словарную» часть HTML5, то есть семантику этого языка. Если конкретнее, то способ использования новых элементов HTML5 для описания содержимого, помещаемого в разметку. Основная часть содержимого главы не имеет прямого отношения к адаптивному веб-дизайну. Но HTML является основой, на которой строятся все веб-проекты и приложения. А кому же не хочется возводить свое здание на самом крепком из фундаментов?

К тому же вас может заинтересовать, что представляет собой HTML5. В таком случае я скажу, что HTML5 — это всего лишь название самой последней версии HTML, языка тегов, используемого для создания веб-страниц. Сам HTML является постоянно развивающимся стандартом, предыдущая основная версия которого имела номер 4.01.

О предшествующих версиях и путях развития HTML можно узнать в «Википедии» по адресу http://en.wikipedia.org/wiki/HTML#HTML_versions_timeline.

совет

В настоящее время HTML5 является рекомендацией консорциума W3C. Соответствующую спецификацию можно найти по адресу http://www.w3.org/TR/html5/.

В этой главе будут рассмотрены следующие вопросы:

• насколько широка поддержка HTML5;

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

• покладистость HTML5;

• новые семантические элементы;

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

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

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

• соответствие уровня доступности требованиям Руководства по обеспечению доступности веб-контента (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 html>

<html lang="en">

<head>

<meta charset=utf-8>

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

doctype

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

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

<!DOCTYPE html>

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

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

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

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

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

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

совет

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

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

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

<html lang="en">

<head>

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

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

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

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

<meta charset="utf-8">

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

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

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

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

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

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

<link href=CSS/main.css rel=stylesheet >

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

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

<div id=wrapper>

И это будет вполне приемлемый код HTML5. То же самое касается вставки изображения:

<img SRC=frontCarousel.png aLt=frontCarousel>

Это также вполне приемлемый код HTML5. Без закрывающего тег слеша, без кавычек и с использованием вперемешку символов в нижнем и верхнем регистре. Можно даже опустить такие элементы, как открывающий тег <head>, и страница все равно будет полноценной. Что бы сказали об этом приверженцы XHTML?

совет