Ниже приводится выдержка из нашей книги « HTML5 и CSS3 для реального мира», 2-е издание , написанной Алексисом Гольдштейном, Луи Лазарисом и Эстель Вейль. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .
После этого быстрого знакомства с разметкой HTML5 у вас наверняка возникнет куча вопросов. Вот некоторые ответы на некоторые из наиболее вероятных.
Почему эти изменения все еще работают в старых браузерах?
Чтобы понять, почему это не проблема, мы можем сравнить HTML5 с некоторыми новыми функциями, добавленными в CSS3, о которых мы поговорим в следующих главах.
В CSS, когда добавляется новая функция (например, свойство border-radius Если пользователь просматривает страницу в браузере без поддержки border-radius Это происходит потому, что по умолчанию используются квадратные углы, а браузер игнорирует объявление border-radius Другие функции CSS3 ведут себя аналогично, что в некоторой степени ухудшает восприятие.
Многие разработчики ожидают, что HTML5 будет работать аналогичным образом. Хотя это может быть справедливо для некоторых расширенных функций и API, которые мы рассмотрим позже в книге, это не относится к изменениям, которые мы рассмотрели до сих пор; то есть, более простой синтаксис, меньше лишних атрибутов и новый тип документа.
Синтаксис HTML5 был более или менее определен после тщательного изучения возможностей старых браузеров. Например, 15 символов, составляющих объявление doctype в HTML5, — это минимальные символы, необходимые для того, чтобы каждый браузер отображал страницу в стандартном режиме.
Аналогично, хотя XHTML требовал более длинного объявления кодировки символов и дополнительного атрибута в элементе html Опять же, поведение старых браузеров было тщательно изучено, и было установлено, что кодировка символов может быть упрощена, а атрибут xmlns
В отличие от изменений в CSS3 и JavaScript, где дополнения поддерживаются только тогда, когда производители браузеров действительно их реализуют, нет необходимости ждать выпуска новых версий браузера, прежде чем использовать синтаксис разметки HTML5. И когда дело доходит до использования новых семантических элементов, небольшой фрагмент JavaScript — это все, что требуется для приведения в соответствие любых действительно старых браузеров.
Примечание: режим стандартов и режим причуд
Когда основанный на стандартах веб-дизайн находился в зачаточном состоянии, производители браузеров столкнулись с проблемой: поддержка новых стандартов во многих случаях нарушала бы обратную совместимость с существующими веб-страницами, которые были разработаны для более старых нестандартных реализаций браузера. Производителям браузеров нужен сигнал, указывающий, что данная страница должна отображаться в соответствии со стандартами. Они обнаружили такой сигнал в типе документа: новые страницы, соответствующие стандартам, содержат правильно отформатированный тип документа, в то время как старые нестандартные страницы, как правило, этого не делают. Используя doctype в качестве сигнала, браузеры могут переключаться между режимом стандартов (в котором они пытаются следовать стандартам буквам в способе визуализации элементов) и режимом причуд (где они пытаются подражать «причудливым» возможностям рендеринга старых браузеров для убедитесь, что страница отображается так, как она была задумана).
Можно с уверенностью сказать, что в современных условиях разработки почти каждая веб-страница имеет правильный тип документа и, следовательно, будет отображаться в режиме стандартов; поэтому маловероятно, что вам когда-либо придется иметь дело со страницей, отображаемой в режиме причуд. Конечно, если пользователь просматривает веб-страницу, используя очень старый браузер (например, IE4), страница будет отображаться с использованием режима рендеринга этого браузера. Это то, что имитирует причудливый режим, и это будет происходить независимо от используемого типа документа.
Хотя XHTML и более старые типы документов HTML содержат информацию о точной версии спецификации, на которую они ссылаются, браузеры фактически никогда не использовали эту информацию. Пока присутствует правильный, на первый взгляд, тип документа, они будут отображать страницу в стандартном режиме. Следовательно, тип документа HTML5 был сокращен до минимума, необходимого для запуска стандартного режима в любом браузере. Дополнительную информацию, а также диаграмму, в которой показано, что заставит разные браузеры отображать в режиме причуд, можно найти в Википедии. Вы также можете прочитать хороший обзор стандартов и режимов при помощи ссылки SitePoint на CSS.
Разве все теги не должны быть закрыты?
В XHTML все элементы должны были быть закрыты — либо с соответствующим закрывающим тегом (например, html Пустые элементы — это элементы, которые не могут содержать дочерние элементы (такие как inputimglink
Вы по-прежнему можете использовать этот стиль синтаксиса в HTML5 — и вы можете предпочесть его из соображений согласованности и удобства сопровождения — но добавление завершающей косой черты в пустые элементы больше не требуется для проверки. Продолжая тему «разрезания жира», HTML5 позволяет вам исключить косую черту из таких элементов, возможно, оставляя вашу разметку более чистой и менее загроможденной.
Стоит отметить, что в HTML5 большинство элементов, которые могут содержать вложенные элементы, но просто оказываются пустыми, все равно должны быть связаны с соответствующим закрывающим тегом. Есть исключения из этого правила (например, теги pli
А как насчет других синтаксических обычаев на основе XHTML?
Пока мы говорим на эту тему, пропуск закрывающей косой черты — это только один аспект синтаксиса на основе HTML5, который отличается от XHTML. На самом деле, проблемы с синтаксическим стилем полностью игнорируются валидатором HTML5, который будет выдавать ошибки только за ошибки кода, которые угрожают каким-либо образом нарушить ваш документ.
Это означает, что глазами валидатора следующие пять строк разметки идентичны:
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/styles.css">
<LINK REL="stylesheet" HREF="css/styles.css">
<Link Rel="stylesheet" Href="css/styles.css">
<link rel=stylesheet href=css/styles.css>
В HTML5 вы можете использовать имена или атрибуты тегов в нижнем, верхнем или смешанном регистре, а также значения атрибутов в кавычках или без кавычек (если эти значения не содержат пробелов или других зарезервированных символов), и все они будут проверяться только хорошо.
В XHTML все атрибуты должны были иметь значения, даже если эти значения были избыточными. Например, в XHTML вы часто видите разметку так:
<input type="text" disabled="disabled" />
В HTML5 атрибуты «on» или «off» (называемые логическими атрибутами) могут быть просто указаны без значения. Итак, вышеупомянутый элемент input
<input type="text" disabled>
Следовательно, HTML5 предъявляет очень слабые требования к валидации, по крайней мере, с точки зрения синтаксиса. Означает ли это, что вы должны просто сходить с ума и использовать любой синтаксис, какой хотите, для любого данного элемента? Нет, мы, конечно, не рекомендуем это.
Мы призываем разработчиков выбирать стиль синтаксиса и придерживаться его, особенно если вы работаете в командной среде, где поддержка кода и удобочитаемость имеют решающее значение. Мы также рекомендуем (хотя это необязательно) выбрать минималистский стиль кодирования, оставаясь неизменным.
Вот несколько рекомендаций для вас, чтобы рассмотреть возможность использования:
-
Используйте строчные буквы для всех элементов и атрибутов, как в XHTML.
-
Несмотря на то, что некоторые элементы не требуют закрывающих тегов, мы рекомендуем закрывать все элементы, содержащие содержимое (как в
<p>Text</p> -
Хотя вы можете оставить значения атрибутов без кавычек, весьма вероятно, что у вас будут атрибуты, которые требуют кавычек (например, при объявлении нескольких классов, разделенных пробелами, или при добавлении значения строки запроса в URL). В результате мы рекомендуем всегда использовать кавычки для согласованности.
-
Пропустите косую черту из пустых элементов (таких как
metainput -
Избегайте предоставления избыточных значений для логических атрибутов (например, используйте
<input type="checkbox" checked><input type="checkbox" checked="checked">
Опять же, эти рекомендации ни в коем случае не являются общепринятыми; тем не менее, мы считаем, что это разумные предложения по синтаксису для достижения чистой, легко читаемой и поддерживаемой разметки.
Если вы запускаете amok со своим стилем кода, включая слишком много ненужного, вы просто добавляете дополнительные байты без всякой причины. Вы также потенциально усложняете поддержку своего кода, особенно если вы работаете с другими разработчиками в той же кодовой базе.