Синтаксис html5. !DOCTYPE

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

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

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

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

Крошечный документ HTML5

Дадим встряску браузеру в стиле HTML5!

В тегах XHTML нельзя использовать прописные буквы.

Для проверки этого кода требуется валидатор 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).

Синтаксис HTML

В этой статье мы рассмотрим синтаксис HTML и как правильно записывать код языка HTML.

При написании HTML-кода в блокноте, желательно придерживаться одного стиля. Схема стандартного HTML-документа, выглядит следующим образом:

Название страницы Заголовок статьи

Абзац статьи

Каждый HTML-документ должен начинаться со строки , она означает что код в документе будет написан на языке HTML. Затем идёт сам HTML-код .

Между тегами располагаются два основных блока, первый блок — это голова HTML-документа , который начинается и заканчивается тегами , второй блок — это тело HTML-документа , который начинается и заканчивается тегами .

В голове HTML-документа содержится различная служебная информация, которую пользователь не видит (кроме тега title ), там находятся следующие теги:
— название HTML-страницы,
— мета-теги, в них содержится служебная информация о странице,
— тег ссылающийся на внешние файлы, например .css , .ico и т.д.,
— теги могут содержать JavaScript-код или ссылаться на внешний файл .js

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

Рассмотрим некоторые правила написания HTML-кода. Данные правила нужны для того, чтобы потом удобно было разбираться в собственном коде.

• Блочные теги которые находятся внутри других тегов, лучше размещать на одну строку ниже и на один пробел (табуляцию, как вам удобней) правее от тега в котором он размещен. Например таким образом расположены заголовок h1 и абзац p , по отношению к тегу body , в схеме HTML-документа расположенной в начале этой статьи.
• Закрывающий и открывающий теги одного элемента, могут находится либо на одном уровне, как например теги , либо закрывающий тег может находится в конце текста, как например закрывающие теги элементов title , h1 и p .
• Равнозначные между собой элементы тоже можно размещать на одном уровне, в схеме HTML-документа что расположена выше, равнозначными по отношению друг к другу, являются head и body , h1 и p .
• На самом деле, весь HTML-код можно записать в одну строку и браузер всё равно правильно покажет HTML-страницу. Правила синтаксиса языка HTML, где теги нужно записывать друг под другом и левее, существуют лишь для того, чтобы вебмастеру было удобнее создавать и изменять в дальнейшем код HTML-страницы.

Вот еще некоторые моменты, которые нужно учитывать при создании кода:

указывает, в соответствии с каким стандартом HTML написана ваша Web-страница.

Итак, доктайпов существует несколько (строгие и переходные, для HTML и XHTML). Какой стандарт выбрать - вот в чем вопрос.

HTML - стандартный язык разметки Web-документов.

В HTML 4.01 и HTML5 внешний вид страницы отделен от ее содержания. Содержание и структура (заголовки, абзацы, ссылки) задаются в HTML. Оформление (выравнивание, шрифты, цвета) задаются CSS-стилями.

Например, тег и атрибут align объявлены устаревшими.

XHTML - расширяемый язык разметки Web-документов, созданный на базе XML . Стандарт XHTML представляет собой перечень различий между HTML 4.01 и XHTML.

Все теги должны быть закрыты.
Все теги, атрибуты и CSS-свойства должны быть набраны в нижнем регистре.
Все значения атрибутов тегов должны быть заключены в кавычки.
Должна строго выполняться иерархия: первый тег закрывается последним.	...	...
Блочный тег не может быть вложен в строчный. (После блочного элемента дальнейший вывод на странице осуществляется с новой строки. Строчный элемент перевода строки не делает.)	...	...
Булевы атрибуты записываются в развёрнутой форме.
У изображений обязательно должно быть указано описание

Достоинства языка XHTML - не строгость синтаксиса, а возможность придумывать собственные теги.

Однако, 2 июля 2009 года Консорциум Всемирной паутины (W3C) сообщил о прекращении работ над XHTML 2.0, посчитав концепцию XHTML неверной. Группа программистов переключилась на работу над стандартом HTML5. И хотя стандарт HTML5 всё ещё не утверждён, на нём уже написано множество сайтов.

Кому интересно, когда же HTML5 будет закончен, могут ознакомиться с первоисточниками:

Официальная версия стандарта HTML5 находится по адресу: www.w3.org/TR/html5/

Определимся с выбором. Сделать его несложно: использовать XHTML-стандарт не стоит, если вы не собираетесь расширять язык HTML.

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

Следующий вопрос: какой выбрать синтаксис - строгий или переходный?

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

Понять, что тут к чему, проще на примере. Сначала зададим строгий синтаксис.

красным цветом.

Соответствие HTML-кода объявленному стандарту называют валидностью , а проверку на это соответствие - валидацией .

Чтобы отслеживать ошибки верстки, установим дополнение к FireFox Html Validator .

Откроем нашу страницу в браузере FireFox, наведем мышку на знак валидатора:

Двойной щелчок на знаке валидатора даст развернутый список ошибок:

Поменяем!DOCTYPE на переходный синтаксис:

Часть текста понадобилось выделить красным цветом.

Запускаем FireFox. Ошибок нет:

Вроде все прекрасно. Может, на этом и остановиться?

Мой совет: делать валидную верстку или в соответствии со строгим синтаксисом HTML 4.01, или сразу на HTML5. HTML надо использовать по его прямому назначению, а оформление оставить CSS. Кроме того, если у сайта валидная верстка, а он неправильно отображается в каком-либо браузере, то это однозначно проблема браузера. Новые версии браузера будут лучше соответствовать стандарту и не ошибаться в интерпретации валидного кода. Если же сложная верстка реализована невалидным способом, то нет гарантий, что новые версии браузеров не рассыпят ее на кусочки.

Не соблазняйтесь лояльностью переходного синтаксиса, только строгое соответствие стандартам!

Казалось бы, зачем мучиться? Ведь маленькие недочеты верстки браузеры часто исправляют автоматически, и сайт работает абсолютно нормально. Но эти мелкие, практические незаметные ошибки тем не менее замечают поисковые системы. Даже один отсутствующий тег

Именно из-за способности поисковых систем замечать любые недочеты HТML-кода и рекомендуется соблюдать валидность верстки. Кроме того, проверяя код на валидность, можно обнаружить наряду с мелкими недочетами еще и серьезные ошибки, которые были не замечаны ранее.

Последнее обновление: 18.11.2019

При создании документа HTML5 мы можем использовать два различных стиля: HTML и XML.

Стиль HTML предполагает следующие моменты:

Начальные открывающие теги могут отсутствовать у элементов

Конечные закрывающие теги могут отсутствовать у элементов

Только пустые элементы (void elements) (например, br , img , link) могут закрываться с помощью слеша />

Регистр названий тегов и атрибутов не имеет значения

Можно не заключать значения атрибутов в кавычки

Некоторые атрибуты могут не иметь значений (checked и disabled)

Специальные символы не экранируются

Документ должен иметь элемент DOCTYPE

Это так называемый "разрешительный" стиль, основанный на послаблениях при создании документа.

Документ HTML5 также может быть описан с помощью синтаксиса XML. Такой стиль еще называют "XHTML". Он используется, если заголовок content-type имеет значение application/xml+xhtml . Для данного стиля характерны следующие правила:

Каждый элемент должен иметь начальный открывающий тег

Непустые элементы (non-void elements) с начальным открывающим тегом также должны иметь конечный закрывающий тег

Любой элемент может закрываться с помощью слеша />

Названия тегов и атрибутов регистрозависимы, как правило, используются в нижнем регистре

Значения атрибутов должны быть заключены в кавычки

Атрибуты без значений не допускаются (checked="checked" вместо просто checked)

Специальные символы должны быть экранированы

Сравним два подхода. Подход HTML5:

Заголовок

Содержание документа HTML5

И аналогичный пример с использованием подхода XHTML:

Заголовок

Содержание документа HTML5

При использовании синтаксиса XHTML нам также надо указать пространство имен для данного документа:

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

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

Также заключение значений атрибутов в кавычки поможет избежать потенциальных ошибок. Так, атрибут class может принимать несколько значений подряд. Например: . Но если мы опустим кавычки, то в качестве значения будет использоваться "navmenu", а "bigdesctop" браузер будет пытаться интерпретировать как отдельный атрибут.

Если же возникают затруднения, насколько правильной является создаваемая разметка html, то ее можно проверить с помощью валидатора по адресу https://validator.w3.org :

Мы можем вставить в текстовое поле код веб-страницы, и после нажатия на кнопку "Check" внизу валидатор либо отобразит нам ошибки красным цветом, либо зеленым цветом уведомит, что ошибок нет, и код прошел валидацию.

Начинаем изучение языка. Текст на HTML представляет собой "простой текст". Все гипертекстовые особенности документа задаются с помощью тегов - особых пометок, включаемых в этот текст.

Пусть есть текст:

Запишем этот текст по-другому, вставив указания о том, как надо отображать текст. Указания выделим угловыми скобками.

В языке HTML указания называются тегами. Браузер выполняет указания-теги, то есть, не показывая их, производит изменения текста. Поэтому на экране мы увидим следующее:

«Мама мыла раму, а котик играл с клубком. Мальчик забрал у котика клубок».

Тег – команда в угловых скобках. Имя тега – первое, что пишется после открывающей угловой скобки, без пробелов перед ним! Существуют теги одиночные и теги контейнеры. Одиночные теги – некоторая команда браузеру, выполняемая в том месте, где указана, например, команда «нарисовать линию»:

Теги контейнеры состоят из открывающего тега и закрывающего, и их указание относится ко всему тексту, расположенному между ними, говорят: «вложенному в контейнер». Закрывающий тег имеет то же имя, что и открывающий, но перед именем ставится символ «слэш»: «/»:

Мама мыла раму.

У тега могут быть атрибуты. Атрибут дополняет и поясняет тег. Порядок атрибутов не важен. Например, у тега HR есть атрибут WIDTH, обозначающий ширину линии, SIZE – толщину линии, ALIGN – расположение (выравнивание) и COLOR – цвет. Значения атрибутов конкретизируют заданную характеристику. Синтаксическое правило звучит следующим образом: после имени тега может следовать, по крайней мере, один пробел, затем, через пробелы, могут следовать тройки: атрибут, символ «=», значение. Значение рекомендуется заключать в кавычки, хотя стандарт HTML позволяет значения, состоящие только из латинских букв и цифр, не заключать в кавычки.

Изображение на экране будет примерно следующим.

_____________________________________

Стандарт позволяет не писать закрывающий тег, если он подразумевается. Например, тег

Имеет закрывающий, но его можно не писать перед открытием следующего абзаца. Тег

Обозначает абзац.

Мама мыла раму.

Дочка играла с мячиком.

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

Теги (элементы) в HTML могут быть вложены друг в друга аналогично циклам или условным операторам в языках программирования. Пересечения тегов без вложенности запрещены.

Пример ошибочной записи:

пример блока

с вложенным абзацем

Пример правильной записи:

пример блока

С вложенным абзацем

Кроме тегов и простого текста в HTML-коде могут встретиться так называемые символьные объекты или Escape последовательности: именованные и нумерованные сущности. Они нужны для представления в документе символов, запрещенных синтаксически или физически, а также символов, которые невозможно ввести с клавиатуры. Например,

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

Очень важное замечание! Цель браузера – показать клиенту вашу страницу. Обычная реакция браузера на ошибку – попытка исправить ошибку, а если не удалось, то пропустить не понятные для него слова или теги. Это и хорошо и плохо. Так как, с одной стороны, в результате браузер постарается показать пользователю максимум текста, но, с другой стороны, в этот текст может попасть часть с тегами и скриптами или не попасть собственно текст, если его браузер воспримет, например, как комментарий. Разработчику сайта такое поведение браузера очень мешает. Будьте готовы к тому, что сначала браузер будет старательно исправлять ваши ошибки, но через некоторое время он запутается, и у вас перестанут работать ранее работавшие фрагменты. Поэтому совет: не делайте ошибок, а лучше используйте современные редакторы, осведомленные о html-правилах, и указывающие вам на ошибки.