От автора: в предыдущей главе мы рассказали вам про ряд изменений синтаксиса в HTML5, а также затронули проблемы валидации. Давайте более подробно разберем эти вопросы, чтобы вы имели лучшее представление о том, как изменилась валидация страниц.
HTML5 валидатор больше не смотрит на стиль кода. Можно писать все в верхнем регистре, в нижнем, пропускать кавычки, опускать необязательные закрывающие теги, писать код абы как, но страница будет оставаться валидной.
И вы задаетесь вопросом, а что же считается ошибкой в HTML5 валидаторе? Валидатор предупредит вас о неправильном использовании элементов, о включении их в тех местах, где они быть не должны, он предупредит вас о пропущенных обязательных атрибутах, неправильных значениях атрибутов и т.д. Вкратце, валидатор предупредит вас, если ваша разметка будет конфликтовать со спецификацией. Так что это все еще ценный инструмент при разработке веб-страниц.
Чтобы вы поняли, как HTML5 отличается от слишком строгого XHTML, давайте разберем конкретику. Так вы поймете, что считается валидным в HTML5:
Некоторые элементы, которые были обязательны в XHTML синтаксисе, теперь необязательны для прохождения проверки на HTML5. В качестве примеров можно взять html и body. Так произошло, потому что даже если исключить их, браузер автоматически пропишет их в документе за вас.
Пустые элементы (т.е. элементы без соответствующего закрывающего тега или без контента) можно не закрывать с помощью закрывающего слэша. Примеры – meta и br.
Элементы и атрибуты можно писать в верхнем, нижнем и смешанном регистре.
Кавычки на значениях атрибутов больше не нужны. Исключение – несколько значений, разделенные пробелом, а также URL со строкой запроса, в которой есть символ равно (=).
Некоторые обязательные элементы из XHTML синтаксиса больше необязательны в HTML5. Примеры – атрибут type для тега script и атрибут xmlns для тега html.
Некоторые устаревшие и потому невалидные элементы в XHTML теперь валидны. Пример – embed.
Бродячий текст, который не включен в теги, а помещен прямо в тег body был невалиден в XHTML. В HTML5 это исправили.
Некоторые элементы, которые нужно было закрывать в XHTML, теперь можно оставлять открытыми без ошибок в HTML5 валидации. Примеры – p, li и dt.
Атрибут action стал необязательным для тега form.
Элементы формы типа input теперь можно делать прямыми дочерними элементами тега form. В XHTML элементы нужно было изолировать другими тегами (например, fieldset и div).
У элементов textarea больше можно не указывать атрибуты rows и cols.
Атрибут target для ссылок был устаревшим в XHTML. В HTML5 он валиден.
Ранее в этой главе говорилось, что блочные элементы теперь можно помещать в ссылки (a).
Символ амперсанда больше не нужно кодировать в &, если нужно отобразить его на странице.
Довольно большой, хотя и вряд ли исчерпывающий список отличий строгого XHTML от валидации HTML5. Некоторые изменения зависят от вашего стиля кода, вы сами выбираете стиль и придерживаетесь его по коду. В предыдущей главе мы выделили несколько предпочитаемых стилей кода, можете включить эти предложения в свои HTML5 проекты.
Заметка: более строгие инструменты валидации
Если вы хотите проводить более строгую валидацию стиля разметки, то есть специальные инструменты. Один из них — HTML Inspector от Philip Walton. Для работы с ним подключите скрипт на свои страницы в процессе разработки, откройте JS консоль браузера в панели разработчика и запустите команду HTMLInspector.inspect(). После выполнения прямо в консоли отобразится ряд предупреждений и рекомендаций о том, как исправить разметку. Также HTML инспектор позволяет менять конфигурацию инструмента под свои нужды.
Заключение
На данный момент мы изучили всю новую семантику и синтаксические изменения в HTML5. Может, часть информации трудно переварить сразу, но не бойтесь! Лучший способ изучить HTML5 – использовать его. Начните свой новый проект на HTML5. Попробуйте применить структурные элементы или текстовую семантику, о которых мы узнали из последней главы. Не уверены в правильности использования элемента, вернитесь и прочитайте раздел еще раз, а еще лучше почитайте саму спецификацию. Текст в ней более сухой, чем в нашей книге (по крайней мере, надеемся!), но спецификация даст вам более полную картинку правильного использования элемента. Не забывайте, что спецификация HTML5 все еще в разработке. Часть изученного нами может поменяться в HTML5.1 (или в HTML5 «living standard», если вернуться к определению WHATWG). Спецификации всегда содержат самую последнюю информацию.
В следующей главе мы рассмотрим важнейший сегмент нового функционала, представленного в HTML5: формы и их функции.
Автор: Louis Lazaris
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
