HTML5 имеет два режима синтаксиса или синтаксиса : HTML и XML. Разница зависит от того, подается ли документ с заголовком Content-type: text/html или Content-type: application/xml+xhtml .
Если он используется как text/html , применяются следующие правила:
- Стартовые теги не обязательны для каждого элемента.
- Конечные теги не обязательны для каждого элемента.
- Только пустые элементы, такие как
br,imgиlinkмогут быть «закрыты» с помощью />. - Теги и атрибуты не чувствительны к регистру.
- Атрибуты не должны быть в кавычках.
- Некоторые атрибуты могут быть пустыми (например,
checkedиdisabled). - Специальные символы или объекты не должны быть экранированы.
- Документ должен включать HTML5 DOCTYPE.
Синтаксис HTML
Давайте посмотрим на другой документ HTML5.
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Hi</title> <!-- This is an example of a comment. The lines below show how to include CSS --> <link rel=stylesheet href=style.css type=text/css> <style> body{ background: aliceblue; } <style> </head> <body> <p> <img src=flower.jpg alt=Flower> Isn't this a lovely flower? <p> Yes, that is a lovely flower. What kind is it? <script src=foo.js></script> </body> </html>
Опять же, наша первая строка — это объявление DOCTYPE. Как и все теги HTML5, он не зависит от регистра. Если вам не нравится тянуться к Shift, вы можете вместо этого набрать < !doctype html> . Если вам действительно нравится использовать Caps Lock , вы также можете ввести < !DOCTYPE HTML> .
Следующий элемент head . Элемент head обычно содержит информацию о документе, такую как его заголовок или набор символов. В этом примере наш элемент head содержит meta который определяет набор символов для этого документа. Включение набора символов не является обязательным, но вы должны всегда устанавливать его, и рекомендуется использовать UTF-8 .
Наш head элемент также содержит заголовок нашего документа () . В большинстве браузеров текст между тегами title отображается в верхней части окна или вкладки браузера.
Комментарии в HTML — это фрагменты текста, которые не отображаются в браузере. Они доступны только для просмотра в исходном коде и, как правило, используются для того, чтобы оставлять заметки для себя или коллег по поводу документа. Некоторые программы, которые генерируют HTML-код, также могут содержать комментарии. Комментарии могут появляться где угодно в документе HTML. Каждый должен начинаться с ,
Заголовок документа может также содержать элементы link которые указывают на внешние ресурсы, как показано здесь. Ресурсы могут включать таблицы стилей, изображения favicon или RSS-каналы. Мы используем атрибут rel чтобы описать отношения между нашим документом и тем, на который мы ссылаемся. В этом случае мы ссылаемся на каскадную таблицу стилей или файл CSS. CSS — это язык таблиц стилей, который мы используем для описания внешнего вида документа, а не его структуры.
Мы также можем использовать элемент style (здесь
и ) включить CSS в наш файл. Однако использование элемента link позволяет нам совместно использовать один и тот же файл таблицы стилей на нескольких страницах.
Кстати, и meta и link являются примерами пустых HTML-элементов; мы могли бы также закрыть их, используя /> . Например, станет , но это не обязательно делать.
«XHTML5»: синтаксис XML в HTML5
HTML5 также может быть написан с использованием более строгого XML-подобного синтаксиса. Вы можете помнить из главы 1, что XHTML 1.0 был «переформулировкой HTML 4 как приложения XML 1.0». Это не совсем верно в отношении того, что иногда называют «XHTML5». XHTML5 лучше всего понимать как HTML5, который написан и проанализирован с использованием правил синтаксиса XML и Content-type: application/xml+xhtml заголовком ответа Content-type: application/xml+xhtml .
Следующие правила применяются к «XHTML5»:
- Все элементы должны иметь начальный тег.
- Не пустые элементы с начальным тегом должны иметь конечный тег (например,
pиli). - Любой элемент может быть «самозакрытым» с помощью
/>. - Теги и атрибуты чувствительны к регистру, как правило, строчными.
- Значения атрибута должны быть заключены в кавычки.
- Пустые атрибуты запрещены (
checkedдолжна бытьchecked="checked"или «checked="true"). - Специальные символы должны быть экранированы с использованием символьных сущностей.
Наш начальный тег html также нуждается в атрибуте xmlns (пространство имен XML). Если мы переписываем наш документ сверху для использования синтаксиса XML, это будет выглядеть как пример ниже.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Hi</title> </head> <body> <p> <img src="flower.jpg" alt="Flower" /> Isn't this a lovely flower? </p> <script src="foo.js" /> </body> </html>
Здесь мы добавили пространство имен XML с атрибутом xmlns , чтобы браузер знал, что мы используем более строгий синтаксис. Мы также самостоятельно закрыли теги для наших пустых или пустых элементов, meta и img . В соответствии с правилами XML и XHTML все элементы должны быть закрыты либо с помощью конечного тега, либо путем автоматического закрытия с помощью пробела, косой черты и угловой скобки, направленной вправо ( /> ).
В этом примере мы также самостоятельно закрыли наш тег script . Мы могли бы также использовать нормальный тег, как мы сделали с нашими другими элементами. Элемент script немного странный. Вы можете встроить сценарии в свои документы, поместив их между начальным и конечным тегами script . Когда вы делаете это, вы должны включить конечный тег.
Однако вы также можете ссылаться на внешний файл script используя тег script и атрибут src . Если вы сделаете это и будете обслуживать ваши страницы как text/html , вы должны использовать закрывающий тег. Если вы используете свои страницы как application/xml+xhtml , вы также можете использовать самозакрывающийся синтаксис.
Не забывайте: чтобы браузер анализировал этот документ в соответствии с правилами XML / XHTML, наш документ должен быть отправлен с сервера с заголовком ответа Content-type: application/xml+xhtml . Фактически, включение этого заголовка вызовет синтаксический анализ XHTML5 в соответствующих браузерах, даже если DOCTYPE отсутствует.
Как вы, возможно, поняли, правила синтаксического анализа XML более привередливы. Намного проще использовать MIME-тип text/html и его более слабый синтаксис HTML.