Теперь обратим наше внимание к двум, возможно, наиболее неправильно понимаемым элементам HTML5

. При первом знакомстве различие может показаться нечетким, но на самом деле не все так плохо. В основном элемент

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

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

Introduction

History

Discography

Но можно также структурировать следующим образом:

Rock bands

Jazz bands

Hip hop bands

Где остается

? Итак, со всеми этими прекрасными новыми элементами, которые можно использовать на страницах Web, дни простого элемента

сочтены, не так ли? НЕТ. Фактически,

по-прежнему имеет совершенно законное применение. Его следует использовать, когда не существует другого более подходящего доступного элемента для объединения области контента, что часто происходит, когда вы используете элемент только для объединения контента в группу с целью стилевого или визуального оформления. Элемент предназначен для выделения терминов, значимых в данный момент, или выделения частей контента, к которым вы просто хотите привлечь внимание, но не хотите изменять семантическое значение. Это похоже на то, как при просмотре напечатанной статьи вы выделяете важные для вас строки с помощью цветного маркера. Поэтому, например, вы можете захотеть использовать этот элемент для выделения строк в wiki, которые требуют редакторской правки, или выделения экземпляров термина поиска, который пользователь только что искал на странице, и задание затем для них подходящего оформления в CSS. Атрибут hidden Атрибут hidden, когда применяется к любому элементу, скрывает его полностью от любых форм представления/медиа, и должен использоваться, если вы намерены показать контент позже (например, используя JavaScript для удаления этого атрибута), но не хотите, чтобы он отображался в данный момент. Он не должен использоваться для скрытия такого контента, как скрытые вкладки интерфейса с вкладками, так как это совершенно другой способ представления контента в меньшем пространстве, а не скрытие контента вообще. Разбивка HTML5 и алгоритм заголовков HTML5 Прежде чем продолжить путешествие в направлении более глубокого овладения HTML5, необходимо обсудить одно важное отличие, которое существует между HTML5 и предыдущими версиями спецификации. В HTML существует имеем концепцию разбивки документа, которая является в основном разбивкой документа по его заголовкам, и их иерархии относительно друг друга, точно таким же образом, как при записи документа в текстовом процессоре вы просматриваете документ в виде плана-конспекта. HTML5 создает иерархию заголовков на основе относительного вложения различных разделов документа. Новый раздел документа создается, когда вы используете так называемый разделяющий контент – элементы

, и

. Возьмем следующий пример.

My title

My subtitle

HTML 4 будет считать это заголовком первого уровня, за которым следует заголовок второго уровня, но HTML5 будет считать это как два заголовка первого уровня. Почему? Так как

не является разделяющим элементом, то новый раздел в иерархии не создается. Чтобы исправить это, необходимо заменить

на разделяющий элемент:

My title

My subtitle

Как заставить это работать в старых браузерах Старые браузеры: всегда бедствие для самого нашего существования, когда пытаешься справиться с новыми блестящими игрушками в Web! Фактически проблема здесь со всеми браузерами – ни один браузер в настоящее время по существу не распознает и не поддерживает новые структурные элементы HTML5. Тем не менее, можно заставить их работать сегодня в разных браузерах с минимальными усилиями. Прежде всего, если вы помещаете неизвестный элемент на web-страницу, по умолчанию браузер будет интерпретировать его просто как , т.е. анонимный встроенный элемент. Предполагается, что большинство рассмотренных в этой статье элементов HTML5, ведут себя как блочные элементы, поэтому простейший способ заставить их вести себя правильно в старых браузерах, состоит в задании для них display:block; в коде CSS: article, section, aside, hgroup, nav, header, footer, figure, figcaption { display: block; } Это решает все проблемы для всех браузеров, за исключением IE. Исправление для IE кажется нелогичным, но достаточно простым. Для каждого используемого элемента HTML5 необходимо вставить строку JavaScript в заголовок документа следующим образом: Теперь IE будет применять стили для этих элементов. 1.3. Новые свойства форм в HTML5 Язык HTML5 содержит много новых свойств, которые должны существенно облегчить создание форм в Web, и сделать их значительно более мощными и совместимыми в Web. Плохая форма? Формы HTML всегда были проблемой. Они не слишком интересны для разметки, и могут требовать кропотливой работы для оформления – особенно, если вы хотите, чтобы они были совместимы с разными браузерами и соответствовали общему виду вашего сайта. И они могут создавать трудности при заполнении для конечных пользователей, даже если они были созданы с заботой и вниманием, чтобы сделать их как можно удобнее и доступнее. Создание хорошей формы состоит в большей степени в ограничении ущерба, чем в обеспечении приятного взаимодействия пользователя. Ранее, когда HTML 4.01 стал стабильной рекомендацией, сеть web была по большей части стабильным местом. Да, существовала странная форма для комментариев или сценарий для гостевой книги, но обычно web-сайты предназначались посетителям для простого чтения. С тех пор сеть web существенно изменилась. Для многих людей браузер уже стал окном в мир сложных приложений на базе web, которые стараются обеспечить взаимодействие почти на уровне настольного компьютера. Несколько сложных элементов управления формой, созданных с помощью JavaScript: Чтобы удовлетворить потребность в более развитых элементах управления, которые нужны для таких приложений, разработчики использовали библиотеки JavaScript и рабочие среды (такие как jQueryUI или YUI). Эти решения, конечно, существенно развились за прошедшие годы, добавляя богатую функциональность на страницы Web, начиная включать даже поддержку считывателей экрана с помощью таких технологий как WAI-ARIA. Но, по сути, они являются обходными путями, чтобы компенсировать ограниченные возможности элементов управления форм, которые имеются в HTML. Они "имитируют" более сложные виджеты (такие как выбор даты и ползунки), создавая дополнительный слой разметки (не всегда семантической), и дополнительный код JavaScript поверх страниц. HTML5 нацелен на стандартизацию некоторых из наиболее распространенных элементов управления форм, делая их отображение в браузерах простым, исключая необходимость решений, которые существенно используют сценарии. Внешний вид новых элементов управлении форм и контрольные сообщения варьируются в различных браузерах, поэтому оформление форм для согласованного представления в различных браузерах будет попрежнему требовать тщательного рассмотрения. Новые элементы управления форм Так как формы являются основным инструментом ввода данных в приложениях Web, а требуемые для сбора данные стали более сложными, возникла необходимость создать элементы ввода с дополнительными возможностями, чтобы собирать эти данные с дополнительной семантикой и лучшим определением, и предоставить более простое, более эффективное управление ошибками и проверкой. Первый новый тип элемента ввода - тип ввода number (числа): Он создает специальный вид поля ввода для числа – в большинстве поддерживающих браузеров оно появляется как текстовое поле ввода со счетчиком, который позволяет увеличивать и уменьшать его значение. Тип элемента ввода number Создание элемента управления ползунка, позволяющего выбирать в диапазоне значений, было обычно сложным, семантически неясным предложением, но в HTML5 все стало легко – вы используете просто тип ввода range (диапазон): Тип элемента ввода range Отметим, что, по умолчанию, этот элемент ввода обычно не показывает выбранное в данный момент значение, или даже диапазон значений, который он охватывает. Автору нужно будет предоставить их с помощью других средств – например, для отображения текущего значения можно было бы использовать элемент вывода вместе с некоторым кодом JavaScript для обновления вывода, когда пользователь взаимодействует с формой: и другие элементы управления датой/временем HTML5 имеет ряд различных типов элементов ввода для создания сложных средств выбора даты/времени, например, показанное ниже средство выбора даты имеется почти на каждом существующем сайте бронирования самолета/поезда. Такие средства обычно создавались с помощью несемантического путаного кода, поэтому здорово, что теперь существует стандартизованный простой способ сделать это. Например: Соответственно эти коды создают полностью функциональное средство выбора даты, и элемент ввода текста, содержащий разделитель для часов, минут и секунд (в зависимости от указанного атрибута step ), который позволяет вводить только значение времени. Типы элементов ввода date и time Но на этом все не кончается – доступен ряд других связанных типов элементов ввода: datetime: объединяет функции обоих рассмотренных выше элементов, позволяя выбрать дату и время. month: позволяет выбрать месяц, сохраняя его внутренне как число между 1-12, хотя различные браузеры могут предоставлять более развитый механизм выбора, например, как прокручиваемый список названий месяцев. week: позволяет выбрать неделю, сохраняемую внутренне в формате 2010-W37 (37 неделя 2010 года), и выбирать с помощью элемента выбора даты. Этот тип элемента ввода предоставляет элемент выбора цвета. Реализация в Opera позволяет пользователю выбрать из набора цветов, ввести шестнадцатеричные значения прямо в текстовое поле, или вызвать собственную процедуру выбора цвета операционной системы. Элемент ввода color, и собственные инструменты выбора цвета в Windows и OS X Тип элемента ввода search является, возможно, ничем иным, чем иначе оформленным текстовым элементом ввода. Предполагается, что браузеры будут оформлять эти элементы ввода таким же образом, как оформляются любые функции поиска в конкретной операционной системе. Тем не менее, помимо этих чисто эстетических соображений, важно отметить, что явная разметка полей поиска открывает для браузеров, вспомогательных технологий, и автоматизированных сканеров возможность сделать в будущем что-то полезное с помощью этих элементов ввода – например, браузер мог бы, возможно, предложить пользователю возможность автоматически создать индивидуальный поиск для определенного сайта. Элемент ввода search, как он выглядит в браузере Opera в OS X Элемент и атрибут list Элементы Создание элемента ввода с предложениями с помощью datalist , и Как предполагают названия, эти новые типы элементов ввода имеют отношение к телефонным номерам, адресам e-mail, или URL. Браузеры будут отображать их как обычные текстовые поля ввода, но явное указание, какой вид текста ожидается в этих полях, играет важную роль в проверке формы на стороне клиента. Кроме того, на некоторых мобильных устройствах браузер будет переключаться из своей обычной экранной клавиатуры для ввода обычного текста в более контекстно-подходящие варианты. Здесь также возможно, что в будущем браузеры будут использовать дополнительные преимущества этих явно размеченных элементов ввода, чтобы предложить новые возможности, такие как автозавершение адресов email и телефонных номеров на основе списка контактов пользователя или адресной книги. Новые атрибуты Кроме явно новых типов элементов ввода HTML5 определяет ряд новых атрибутов для элементов управления форм, которые помогают упростить некоторые общие задачи и дополнительно уточнить ожидаемые значения для определенных полей ввода. placeholder Обычный удобный прием в формах Web состоит в размещении замещаемого контента в текстовых полях ввода – например, чтобы предоставить дополнительную информацию об ожидаемом типе информации, ввод которой должен выполнить пользователь – который исчезает, когда элемент управления формы получает фокус. Хотя это обычно требует использования JavaScript (удаление контента поля формы в фокусе и восстановление текста по умолчанию, если пользователь покидает поле, не вводя ничего), мы можем теперь использовать просто атрибут placeholder: Текстовое поле ввода с замещаемым текстом autofocus Другим обычным свойством, которое ранее требовало использования сценария, является автоматическое помещение поля формы в фокус при загрузке страницы. Теперь это можно сделать с помощью атрибута autofocus: Помните, что вы не должны иметь на странице более одного элемента управления формы с автофокусом. Необходимо также использовать функциональность такого вида с осторожностью в ситуациях, когда форма представляет основную область интереса на странице. Страница поиска является хорошим примером – при условии, что нет большого количества контента и пояснительного текста, имеет смысл задавать фокус автоматически на текстовом поле ввода формы поиска. min и max Как предполагают имена, эта пара атрибутов позволяет задать нижнюю и верхнюю границы для значений, которые могут вводиться в числовое поле формы, например, типы элементов ввода number, range, time или date (можно даже использовать их для задания верхней и нижней границы дат – например, в форме бронирования путешествия можно ограничить элемент выбора даты, позволяя выбирать только будущие даты). Для элементов ввода range, min и max необходимо, на самом деле, определять, какие значения возвращаются при отправке формы. Код вполне простой и не требует пояснений: step Атрибут step можно использовать с числовым значением ввода, чтобы определить точность возможных вводимых значений. Например, может потребоваться, чтобы пользователи вводили определенное время, но только с шагом 30 минут. В этом случае можно использовать атрибут step, помня о том, что для элементов ввода time значение атрибута задается в секундах: Новые механизмы вывода Кроме новых элементов управления форм, с которыми может взаимодействовать пользователь, HTML5 определяет ряд новых элементов, предназначенных специально для вывода и визуализации информации для пользователя. Ранее было написано про элемент вывода output, когда речь шла об элементе ввода range – этот элемент служит средством вывода "результата вычислений", или в более общем смысле для предоставления явно определенного вывода сценария (вместо простого выталкивания некоторого текста в случайный span илиdiv с помощью innerHTML, например). Чтобы еще более явно указать, каким конкретно элементам управления формы соответствует output, можно – аналогично тому как для label – передать список ID в дополнительном атрибуте for элемента. и Два этих новых элемента очень похожи, оба в результате создают индикатор/панель, выводимую пользователю. Отличие их состоит в их назначении. Как предполагает название, progress предназначен для представления индикатора выполнения, чтобы указать процент завершения определенной задачи, в то время как meter является более общим индикатором скалярного измерения или дробного значения. Панель индикатора выполнения Проверка Проверка формы является очень важной, как на стороне клиента, так и на стороне сервера, чтобы помочь законным пользователям избежать и исправить ошибки, и чтобы остановить злоумышленных пользователей от отправки данных, которые могут нанести вред приложению. Так как браузеры могут теперь иметь представление о том, какой тип значений ожидается из различных элементов управления форм (по их собственному типу, или каким-либо верхним/нижним границам, заданным для числовых значений, дат и времени), они могут также предложить собственную проверку формы – еще одна утомительная задача, которая, до сих пор, требовала от авторов написания большого объема кода JavaScript или использования каких-либо готовых сценариев/библиотек проверки. Примечание: Чтобы можно было проверять элементы управления формы, они должны иметь атрибут name, так как без него они в любом случае не могут быть отправлены как часть формы. required Одним из наиболее общих аспектов проверки формы является принудительное заполнение требуемых полей – недопущение отправки формы, пока определенные элементы информации не будут введены. Это можно теперь легко реализовать, добавляя атрибут required к элементам input, select или textarea. Клиентская проверка показывающая ошибку для требуемого поля, которое было оставлено пустым type и pattern Авторы могут теперь определять тип записи, который они ожидают из полей формы – вместо простого определения текстового элемента ввода, авторы могут явно создавать элементы ввода для таких вещей как числа, адреса e-mail и URL. Как часть клиентской проверки, браузеры могут теперь проверять, что ввод пользователя в эти более специфические поля соответствует ожидаемой структуре – по существу, браузеры оценивают значения ввода в соответствии со встроенным шаблоном, который определяет, как выглядят допустимые значения в полях ввода этого типа, и будут предупреждать пользователя, когда его ввод не соответствует критериям. Сообщение об ошибке для неверного адреса e-mail в поле ввода Для других текстовых полей ввода, которые, тем не менее, должны следовать определенной структуре (например, формы регистрации, где имя пользователя может содержать только определенную последовательность букв нижнего регистра и цифр), авторы могут использовать атрибут pattern для определения своего собственного регулярного выражения. Стилевое оформление с помощью CSS3 Соответственно встроенной проверке форм HTML5, Модуль Базового Интерфейса Пользователя CSS3 (http://www.w3.org/TR/css3-ui/) определяет последовательность новых псевдо-классов, которые могут использоваться для различения требуемых полей и для динамического изменения внешнего вида элементов управления формы на основе того, были они заполнены правильно или нет:  :required и :optional позволяют явно оформить элементы управления на основе того, имеют они или нет требуемый атрибут  :valid и :invalid будут применять стили к элементам управления формы в зависимости от клиентской проверки  :in-range и :out-of-range работает специально с элементами управления, которые имеют атрибут min и/или max. Можно применить специальное оформление проверки и диапазона на элементах ввода текста, e-mail, url и чисел, только когда они имеют в текущий момент фокус, поэтому пользователи будут получать некоторую немедленную визуальную реакцию во время ввода информации в эти поля, не влияющую на общий вид формы в целом. input[type=text]:focus:valid, input[type=e-mail]:focus:valid, input[type=number]:focus:in-range { outline: 2px #0f0 solid; } input[type=text]:focus:invalid, input[type=e-mail]:focus:invalid, input[type=number]:focus:out-of-range { outline: 2px #f00 solid; } Стили :valid и :invalid, применяемые динамически во время ввода адреса e-mail.

Разместил пособие