Синтаксис HTML5

144

Веб-программирование --- HTML5 --- Синтаксис HTML5

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

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

Ослабленные правила

При нашем первом знакомстве с разметкой HTML5 мы узнали, что использования элементов <html>, <head> и <body> не является обязательным для этой разметки. Но ослабление правил в HTML5 на этом не заканчивается.

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

<P>В тегах <EM>можно использовать</eM> как прописные, так и строчные буквы.</p>

Также можно не использовать закрывающую обратную косую черту в пустых элементах, т.е. элементах без содержимого, таких как <img> (изображение), <br> (разрыв строки) или <hr> (горизонтальная линия). Далее приведены три равнозначных способа вставить разрыв строки:

Пример <br />
разрыва <br>
строки <br/>

В HTML5 также подверглись изменениям правила для атрибутов. Значения атрибутов больше не требуется брать в кавычки, но только при условии, что они не содержат запретных символов (обычно это символы >, = или пробел). Вот пример использования элемента <img> таким образом:

<img alt="Стандартное значение атрибута" src=myimage.jpg>

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

<!-- XHTML -->
<input type="checkbox" checked="checked" />

то в HTML5 это можно делать в традициях HTML 4.01, указывая только одно название атрибута:

<input type="checkbox" checked >

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

Далее дается краткое изложение основных принципов хорошего стиля создания разметки HTML5:

Использование элементов <html>, <body> и <head>. В элементе <html> удобно размещать определение естественного языка страницы, а элементы <head> и <body> позволяют отделить информацию о странице от собственно содержимого страницы.
Строчные буквы в тегах. Использование строчных букв в тегах не является обязательным, но такие теги намного больше распространены, их легче вводить (т. к. не требуется задействовать клавишу <Shift>), а также не так режут глаз, как теги с прописными буквами.
Взятие в кавычки значений атрибутов. Значения атрибутов берутся в кавычки потому, что на это есть причина — помочь избежать ошибок, которые в противном случае очень легко допустить. Без кавычек один неправильный символ значения атрибута может испортить всю страницу.

Проверка кода HTML5

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

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

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

отсутствие обязательных элементов (например, элемента <title>);
отсутствие закрывающего тега;
неправильно внедренные теги;
отсутствие атрибутов у тегов, для которых они обязательны (например, атрибута src тега <img>);
неправильное расположение элементов или содержимого (например, текста в блоке <head>).

Инструменты для разработки веб-страниц, такие как Dreamweaver и Expression Web, оснащены собственными валидаторами, но только самые последние версии поддерживают HTML5. В таком случае можно воспользоваться одним из онлайновых валидаторов. Далее даются инструкции по использованию популярного валидатора от организации W3C:

Откройте в своем браузере страницу W3C Markup Validation Service. Валидатор предложит три способа проверки разметки, каждая на своей вкладке: Validate by URI (для страницы, которая уже размещена в интернете), Validate by File Upload (для страницы, сохраненной в файле на вашем компьютере) и Validate by Direct Input (для кода, вводимого или вставляемого в окно валидатора):
Выберите нужную вкладку и предоставьте свою HTML-разметку. Прежде чем приступить к проверке кода, можно щелкнуть по ссылке More Options, чтобы изменить некоторые параметры, но это нежелательно. В частности, будет лучше предоставить возможность валидатору определить тип документа автоматически. Таким образом валидатор использует описание типа документа, указанное в проверяемой веб-странице. Также лучше предоставить валидатору самому определить кодировку страницы, за исключением страниц с кодировкой, которую валидатор затрудняется определить.
Нажмите кнопку Check.

Ваш код будет отправлен на проверку, и после короткого ожидания в браузере будет выведен отчет с результатами валидации. Если код не прошел проверку, то в отчете будут указаны выявленные валидатором ошибки:

Даже для полностью правильного HTML-документа в отчете может быть указано несколько предупреждений (хотя полностью безобидных), включая такие, что кодировка была определена автоматически и услуга валидации кода HTML5 является экспериментальной и не совсем доведенной до логического конца.

Как можно видеть на рисунке, валидатор выявил в документе четыре нарушения правил HTML5, являющиеся результатом двух ошибок в коде. Первая ошибка — отсутствует обязательный элемент <title>. Вторая — элемент <р> закрывается до закрытия вложенного в него элемента <em>. Тем не менее, несмотря на эти ошибки, эта разметка правильная, и все браузеры будут отображать эту страницу должным образом.

Возвращение XHTML

Как мы уже узнали, восхождение спецификации HTML5 знаменует, по идее, закат предыдущего короля Всемирной паутины — стандарта XHTML. Но действительность не так проста, и поклонникам XHTML не нужно отказываться ни от чего, что им мило в языках разметки предыдущего поколения.

Прежде всего, вспомним, что синтаксис XHTML продолжает существовать. Налагаемые XHTML правила либо продолжают использоваться в качестве руководящих принципов (например, правила правильного вложения элементов), либо поддерживаются в виде необязательных соглашений (например, соглашение об использовании закрывающей косой черты с пустыми элементами).

Но что, если вы хотите сделать следование правилам XHTML-синтаксиса обязательным? Возможно, вы беспокоитесь, что вы (или ваши коллеги по работе) неосознанно потихоньку впадете в использование ослабленных соглашений обычного HTML. Чтобы не допустить этого, вам нужно использовать XHTML5, это менее распространенный стандарт, который, по сути, является HTML5, облаченным в ограничения, основанные на XML.

Чтобы сделать документ HTML5 документом XHTML, нужно явно указывать пространство имен XHTML в элементе <html>, закрывать каждый элемент, обязательно использовать строчные буквы в тегах и т. д. В следующем листинге приводится пример кода, в котором выполнены все эти требования:

<!DOCTYPE HTML>
<html lang="ru" xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="utf-8">
   <title>Крошечный документ HTML5</title>
   <link href="style.css" rel="stylesheet">
   <script src="script.js"></script>
</head>
<body>
   <p>Дадим встряску браузеру в стиле HTML5!</p>
   <p>В тегах XHTML <em>нельзя использовать прописные буквы.</em></p>
</body>
</html>

Для проверки этого кода требуется валидатор XHTML, который контролирует следование строгим старым правилам XHTML. Валидатор от W3C для этого не подойдет, но зато подойдет валидатор на сайте http://validator.nu, где нужно указать требуемый стандарт (т.е. XHTML) в раскрывающемся списке Preset. Также нужно установить флажок Be lax about HTTP Content-Type, если только вы не вставляете проверяемый код непосредственно в текстовое поле.

Следуя этим шагам, вы сможете создать документ XHTML и выполнить его проверку. Тем не менее браузеры все равно будут обрабатывать этот документ, как обычную страницу HTML5, которая просто пыжится походить на XML-документ. Никаких дополнительных правил при обработке такой страницы применять они не будут.

Если же вы хотите, чтобы и браузеры обрабатывали страницу согласно правилам XHTML, то вам нужно настроить свой веб-сервер для подачи страниц с MIME-типом application/xhtml+xml или application/xml, вместо стандартного типа text/html. Кстати, браузеры, поддерживающие XHTML5, обрабатывают такую разметку по-другому, чем обычный код HTML5. Они пытаются обрабатывать страницу как документ XML, и если это им не удается (по причине ошибки в коде), браузер прекращает обработку оставшейся части документа.

Какой из этого следует вывод? Для подавляющего большинства веб-разработчиков, от любителей до серьезных профессионалов, игра по строгим правилам XHTML не стоит требуемых для этого свеч. Единственным исключением является разработка специальных решений, например страниц с содержимым, которым нужно манипулировать посредством XML-инструментов, таких как, например, XQuery и XPath.

Если вам интересно, можно обмануть браузер и заставить его переключиться в режим XHTML. Для этого нужно лишь переименовать файл с расширением xhtml или xht, а потом открыть его с жесткого диска вашего компьютера. Большинство браузеров (включая Firefox, Chrome и IE 9) будут обрабатывать такую страницу, как будто бы она была загружена с веб-сервера с настройками MIME XML. Если страница содержит любую незначительную ошибку, в браузере отобразится частично обработанная страница (IE 9), сообщение об ошибке XML (Firefox) или то и другое вместе (Chrome).