Валидация HTML5 документов

Валидация HTML5 документов

От автора: в предыдущей главе мы рассказали вам про ряд изменений синтаксиса в HTML5, а также затронули проблемы валидации. Давайте более подробно разберем эти вопросы, чтобы вы имели лучшее представление о том, как изменилась валидация страниц.

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

И вы задаетесь вопросом, а что же считается ошибкой в HTML5 валидаторе? Валидатор предупредит вас о неправильном использовании элементов, о включении их в тех местах, где они быть не должны, он предупредит вас о пропущенных обязательных атрибутах, неправильных значениях атрибутов и т.д. Вкратце, валидатор предупредит вас, если ваша разметка будет конфликтовать со спецификацией. Так что это все еще ценный инструмент при разработке веб-страниц.

Чтобы вы поняли, как HTML5 отличается от слишком строгого XHTML, давайте разберем конкретику. Так вы поймете, что считается валидным в HTML5:

Некоторые элементы, которые были обязательны в XHTML синтаксисе, теперь необязательны для прохождения проверки на HTML5. В качестве примеров можно взять html и body. Так произошло, потому что даже если исключить их, браузер автоматически пропишет их в документе за вас.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Пустые элементы (т.е. элементы без соответствующего закрывающего тега или без контента) можно не закрывать с помощью закрывающего слэша. Примеры – meta и br.

Элементы и атрибуты можно писать в верхнем, нижнем и смешанном регистре.

Кавычки на значениях атрибутов больше не нужны. Исключение – несколько значений, разделенные пробелом, а также URL со строкой запроса, в которой есть символ равно (=).

Некоторые обязательные элементы из XHTML синтаксиса больше необязательны в HTML5. Примеры – атрибут type для тега script и атрибут xmlns для тега html.

Некоторые устаревшие и потому невалидные элементы в XHTML теперь валидны. Пример – embed.

Бродячий текст, который не включен в теги, а помещен прямо в тег body был невалиден в XHTML. В HTML5 это исправили.

Некоторые элементы, которые нужно было закрывать в XHTML, теперь можно оставлять открытыми без ошибок в HTML5 валидации. Примеры – p, li и dt.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Атрибут 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

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree