Ниже приводится выдержка из нашей книги « HTML5 и CSS3 для реального мира», 2-е издание , написанной Алексисом Гольдштейном, Луи Лазарисом и Эстель Вейль. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .
В предыдущей главе мы познакомили вас с некоторыми изменениями синтаксиса в HTML5 и затронули некоторые вопросы, связанные с проверкой. Давайте еще немного углубимся в эти концепции, чтобы вы могли лучше понять, как изменилась проверка страниц.
Валидатор HTML5 больше не связан со стилем кода. Вы можете использовать верхний или нижний регистр, исключать кавычки из атрибутов, исключать необязательные закрывающие теги и быть настолько непоследовательным, насколько вам нравится, и ваша страница все равно будет действительной.
Итак, вы спросите, что считается ошибкой для валидатора HTML5? Он предупредит вас о неправильном использовании элементов, включенных там, где их не должно быть, об отсутствующих обязательных атрибутах, неправильных значениях атрибутов и т.п. Короче говоря, валидатор сообщит вам, если ваша разметка конфликтует со спецификацией, поэтому он все еще является ценным инструментом при разработке ваших страниц.
Чтобы дать вам хорошее представление о том, чем HTML5 отличается от чрезмерно строгого XHTML, давайте рассмотрим некоторые особенности. Таким образом, вы можете понять, что считается верным в HTML5:
-
Пустые элементы (то есть элементы без соответствующего закрывающего тега или без содержимого) не обязательно закрывать закрывающей косой чертой; примеры включают в себя
metabr -
Элементы и атрибуты могут быть в верхнем, нижнем или смешанном регистре.
-
Кавычки не нужны вокруг значений атрибутов. Исключения составляют случаи, когда используются несколько значений, разделенных пробелом, или URL-адрес отображается как значение и содержит строку запроса с символом равенства (=).
-
Некоторые атрибуты, которые требовались в синтаксисе на основе XHTML, больше не требуются в HTML5. Примеры включают атрибут
typescriptxmlnshtml -
Некоторые элементы, которые устарели и, следовательно, недопустимы в XHTML, теперь являются действительными; Одним из примеров является элемент
embed -
Случайный текст, который не появляется внутри какого-либо элемента, но размещается непосредственно внутри элемента
bodyэто не так в HTML5. -
Некоторые элементы, которые должны были быть закрыты в XHTML, можно оставить открытыми, не вызывая ошибок проверки в HTML5; примеры включают
plidt -
Элемент
formaction -
Элементы формы, такие как
inputformв XHTML для переноса элементов формы требовался другой элемент (например,fieldsetdiv -
Элементы
textarearowscols -
Атрибут
targetТеперь он действителен в HTML5. -
Как обсуждалось ранее в этой главе, элементы уровня блока могут быть размещены внутри элементов link (
a -
Символ амперсанда (&) не нужно кодировать как
&если он отображается в виде текста на странице.
Некоторые элементы, которые требовались в синтаксисе на основе XHTML, больше не требуются для документа, чтобы пройти проверку HTML5; примеры включают элементы htmlbody Это происходит потому, что даже если вы исключите их, браузер автоматически включит их в документ для вас.
Это довольно полный, хотя и не исчерпывающий список различий между строгим XHTML и проверкой HTML5. Некоторые из них — выбор стиля, поэтому рекомендуется выбирать стиль и быть последовательным. Мы описали некоторые предпочтительные варианты стилей в предыдущей главе, и вы можете включить эти предложения в свои собственные проекты HTML5.
Примечание: более строгие инструменты проверки
Если вы хотите проверить синтаксический стиль вашей разметки, используя более строгие рекомендации, есть инструменты, которые могут вам помочь. Одним из таких инструментов является HTML-инспектор Филиппа Уолтона . Чтобы использовать его, вы можете включить скрипт на своих страницах на этапе разработки, затем открыть консоль JavaScript вашего браузера в инструментах разработчика и запустить команду HTMLInspector.inspect() Прямо в консоли отобразится ряд предупреждений и рекомендаций по улучшению разметки. HTML Inspector также позволяет изменить конфигурацию, чтобы настроить инструмент в соответствии с вашими потребностями.
Резюме
К настоящему времени мы разбираемся со всеми новыми семантическими и синтаксическими изменениями в HTML5. Часть этой информации может быть немного трудно переварить сразу, но не волнуйтесь! Лучший способ познакомиться с HTML5 — это использовать его — начать с вашего следующего проекта. Попробуйте использовать некоторые структурные элементы, которые мы рассмотрели в предыдущей главе, или некоторые семантики текстового уровня, которые мы видели в этой главе. Если вы не уверены в том, как должен использоваться элемент, вернитесь и прочитайте раздел о нем, а еще лучше — прочитайте саму спецификацию. Хотя язык определенно более сухой, чем текст в этой книге (по крайней мере, мы на это надеемся!), Спецификации могут дать более полную картину того, как данный элемент предназначен для использования. Помните, что спецификация HTML5 все еще находится в разработке, поэтому часть того, что мы рассмотрели, все еще может быть изменена в новой версии HTML5.1 (или в «живом стандарте» HTML5, если вы придерживаетесь определения WHATWG). Спецификации всегда будут содержать самую актуальную информацию.
В следующей главе мы рассмотрим важнейший сегмент новой функциональности, представленной в HTML5: формы и функции, связанные с формами.