!DOCTYPE. Стандарты HTML
Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы,
которые не меняются от вида и направленности сайта. В примере 4.1 показан
код простого документа, содержащего основные теги.
Пример 4.1. Исходный код веб-страницы
Пример веб-страницы
Заголовок
Первый абзац.
Второй абзац.
Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под
именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть
файл (Ctrl+O)
. В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.
Рис. 4.1. Результат выполнения примера
Элемент
предназначен для указания типа текущего документа -
DTD (document type definition, описание типа документа). Это необходимо, чтобы
браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML
существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText
Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но
различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал,
согласно какому стандарту отображать веб-страницу и необходимо в первой строке
кода задавать
.
Существует несколько видов
, они различаются в зависимости
от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные
типы документов с их описанием.
Табл. 4.1. Допустимые DTD
| DOCTYPE
|
Описание
|
|---|
| HTML 4.01
|
|
|
Строгий синтаксис HTML.
|
|
|
Переходный синтаксис HTML.
|
|
|
В HTML-документе применяются фреймы.
|
| HTML 5
|
|
|
В этой версии HTML только один доктайп.
|
| XHTML 1.0
|
|
|
Строгий синтаксис XHTML.
|
|
|
Переходный синтаксис XHTML.
|
|
|
Документ написан на XHTML и содержит фреймы.
|
| XHTML 1.1
|
|
|
Разработчики XHTML 1.1 предполагают,
что он постепенно вытеснит HTML. Как видите, никакого деления на виды
это определение не имеет, поскольку синтаксис один и подчиняется четким
правилам.
|
Разница между строгим и переходным описанием документа состоит в различном
подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения
спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится
к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать
предпочтительнее.
Например, в строгом HTML и XHTML непременно требуется наличие тега
,
а в переходном HTML его можно опустить и не указывать. При этом помним, что
браузер в любом случае покажет документ, независимо от того, соответствует
он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора
и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки
в документе.</p>
<p>В дальнейшем будем применять преимущественно строгий <!DOCTYPE>
, кроме
случаев, когда это оговаривается особо. Это позволит нам избегать типичных
ошибок и приучит к написанию синтаксически правильного кода.</p>
<p>Часто можно встретить код HTML вообще без использования <!DOCTYPE>
,
веб-страница в подобном случае все равно будет показана. Тем не менее, может
получиться, что один и тот же документ отображается в браузере по-разному при
использовании <!DOCTYPE>
и без него. Кроме того,
браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется»,
т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы
не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE>
в начало документа.</p><p>Тег <html>
определяет начало HTML-файла, внутри него хранится заголовок
(<head>
) и тело документа (<body>
).</p><p>Заголовок документа, как еще называют блок <head>
, может содержать текст
и теги, но содержимое этого раздела не показывается напрямую на странице, за
исключением контейнера <title>
.</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</p><p>Тег <meta>
является универсальным и добавляет целый класс возможностей,
в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять
кодировку страницы, добавлять ключевые слова, описание документа и многое другое.
Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.</p><p>
<title>Пример веб-страницы
Тег
определяет заголовок веб-страницы, это один из важных элементов
предназначенный для решения множества задач. В операционной системе Windows
текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).</p>
<p><img src='https://i0.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy></p>
<p>Рис. 4.2. Вид заголовка в браузере</p>
<p>Тег <title>
является обязательным и должен непременно присутствовать
в коде документа.</p><p>Обязательно следует добавлять закрывающий тег </head>
, чтобы показать,
что блок заголовка документа завершен.</p><p>Тело документа <body>
предназначено для размещения тегов и содержательной
части веб-страницы.</p><p>
<h1>Заголовок</h1>
</p><p>HTML предлагает шесть текстовых заголовков разного уровня, которые показывают
относительную важность секции, расположенной после заголовка. Так, тег <h1>
представляет
собой наиболее важный заголовок первого уровня, а тег <h6>
служит
для обозначения заголовка шестого уровня и является наименее значительным.
По умолчанию, заголовок первого уровня отображается самым крупным шрифтом
жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>...<h6>
относятся
к блочным элементам, они всегда начинаются с новой строки, а после них другие
элементы отображаются на следующей строке. Кроме того, перед заголовком и
после него добавляется пустое пространство.</p><p>
<!-- Комментарий -->
</p><p>Некоторый текст можно спрятать от показа в браузере, сделав его комментарием.
Хотя такой текст пользователь не увидит, он все равно будет передаваться
в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки.</p>
<p>Сегодня, уважаемый читатель, мы поговорим о такой загадочной вещи, как объявление стандарта, в соответствии с которым написан HTML-документ. Выполнять поставленную задачу призвана первая HTML-директива в коде веб-страницы, под названием <b>!DOCTYPE
</b>.</p>
<p>Вот пример этой строки:</p><p>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
</p><p>Если вы не знаете, зачем нужна такая абракадабра и какой DOCTYPE выбрать в вашем случае, то в данной статье вы найдете ответы на эти вопросы, я, по крайней мере, постарался осветить проблему подробно 🙂</p>
<p>Первое, что может сделать добросовестный начинающий веб-мастер, пытающийся разобраться в назначении директивы DOCTYPE, это сходить на сайт htmlbook.ru и прочитать , из которой станет ясно, что <i>доктайпов
</i> существует несколько (строгие и не очень, для HTML и XHTML). Ясно, что данная директива необходима для уведомления браузера о том, в соответствии каким стандартам сверстан HTML-документ, а вот какой стандарт выбрать и на что это влияет – большой вопрос.</p>
<p>Для того, чтобы большой вопрос превратился в подробный ответ, давайте познакомимся с интереснейшей историей появления всех этих стандартов (не пугайтесь, я кратенько).</p>
<h2>История стандартов HTML</h2>
<p>Давным-давно, когда интернет только зарождался, обозначилась проблема <i>каким образом превращать набор букв, передаваемый по сети, в заголовки, абзацы, ссылки
</i>. Ответ нашел физик Тим Бернерс-Ли придумав <b>язык гипертекстовой разметки HTML
</b> (обратите внимания, товарищи блондинки, HTML – это не язык программирования). Документацию к языку HTML опубликовали в 1991 году.</p>
<p>HTML прижился на столько, что стал стандартом разметки документов в интернете, и был одобрен международной организацией по стандартам W3C , которая была основана и возглавляется, как не странно, все тем же создателем HTML сером Тимом Бернерсом-Ли.</p>
<p>В своей первой редакции HTML представлял язык разметки содержимого web-страницы, сообщающий браузеру – где заголовок, где абзац, где ссылка при помощи наших добрых знакомых, HTML-тегов. Браузеры, при этом, самостоятельно должны были решать, каким образом им визуально представлять все элементы содержимого, структурированные тегами. Иными словами, первая редакция HTML не имела никакой власти над визуальным представлением гипертекста на стороне клиента, эта функция полностью ложилась на плечи браузера.</p>
<p>Прошло немного времени буйного развития интернет-технологий, как в интернет хлынул бизнес. Бизнес-сайтам совсем не хотелось быть похожим один на другой, им нужна была яркость, запоминаемость.</p>
<p>Популярные в то время браузеры (конечно IE и, тогда еще живой, Netscape) начали придумывать свои собственные теги, которые позволяли задавать индивидуальные свойства дизайна веб-документу. Да, уважаемый читатель, никакой кроссбраузерности в то время не было. Я еще помню те времена, когда по сайтам можно было лазить только с помощью IE, все остальные браузеры показывали страшные вещи. Но сейчас не об этом.</p>
<p>W3C принимает новый стандарт HTML, в который уже входят средства визуального представления.</p>
<p>Семимильными шагами начинает развиваться технология CSS, призванная восстановить порядок и отделить представление (выравнивание, цвета, шрифты, которые теперь будут задаваться CSS-стилями) от структуры (заголовки, абзацы, ссылки, которые идеологически задаются в HTML).</p>
<p>Начинающий веб-мастер спросит <i>зачем отделять визуальную часть от структуры
</i>, и мы ему ответим:</p>
<ul><li>В простеньком сайте необходимость этого не очевидна, но если проект крупный, то разделением удастся избежать путаницы и каши в HTML-коде.</li>
<li>Не нужно повторять один и тот же код на разных страницах, если визуальное представление блоков одинаково. Достаточно воспользоваться CSS-файлом, где один раз указать стиль отображения для данного семейства блоков.</li>
<li>Отделив инструкции, касающиеся внешнего вида, в кешируемый файл, можно избежать бессмысленных нагрузок на мировую паутину (хе-хе, какое нам дело до мировой паутины, свой сервак не перегружать бы; CSS спасает сервера высоконагрузочных проектов).</li>
<li>Теперь уже мощность CSS неоспоримо больше, в плане работы с логикой представления, чем у искусственно впертвых в HTML инструментов изменения внешнего вида страницы.</li>
</ul><p>Так, о CSS достаточно, вернемся к HTML.</p>
<p>Актуальный, на данный момент, <b>стандарт HTML 4.01
</b> запрещает использовать HTML для манипуляций с отображением элементов. Попрощайтесь с HTML-директивами <i>align, font
</i>; внешний вид нужно задавать при помощи CSS-стилей. Все возвращается на круги своя.</p>
<p>Но, интернет продолжает свое развитие и вместе с ним развиваются и перерождаются стандарты.</p>
<p>Организация W3C решила, что наиболее удовлетворяющим современным веяниям будет новый расширяемый <b>стандарт XHTML
</b>. Данная штуковина – это некий симбиоз HTML с принципами XML.</p>
<p>XML – это способ хранения структурированных данных в текстовом файле. Придуманные теги, определенным образом, в соответствии стандартам XML, формируют структуру данных:</p><p>
<kontakty>
<zapis nomer="1">
<familiya>Морковин</familiya>
<imya>Андрей</imya>
<site>сайт</site>
</zapis>
<zapis nomer="2">
<familiya>Волож</familiya>
<imya>Аркадий</imya>
<site>yandex.ru</site>
</zapis>
</kontakty>
</p><p>При помощи простенькой программы, легко можно разделить данные, структурированные средствами XML. При этом данные могут быть проанализированы в любой операционной системе, на любом устройстве (ведь это всего-на-всего текстовый файл, структурированный соответствующими разделителями-тегами, согласно известному стандарту).</p>
<p>Организация W3C посчитала вышеописанную особенность очень крутой и раздумья о тупике в развитии HTML, привели к рождению XHTML. Это будет такой язык разметки, который безболезненно должен расширяться новыми тегами и сможет обрабатываться любым устройством (мобильник, компьютер, телевизор), ведь в основе лежит XML, который это пропагандирует (думали наивные сотрудники организации W3C).</p>
<p>Сказано, сделано – в мае 2001 года появился <b>новый стандарт расширяемой гипертекстовой разметки XHTML 1.0
</b>. Он впитал в себя строгости XML, теперь HTML-код должен соответствовать следующим требованиям:</p>
<ul><li>Все теги, должны быть закрыты. Если тег одиночный, например <i><img>
</i>, то он должен выглядеть вот таким образом: <i><img src='/doctype-standarty-html-validnaya-verstka.html' loading=lazy>
</i>.</li>
<li>Должна строго выполняться иерархия. Вот так нельзя: <i><div>…</div>
</i>. Можно только так: <i><div>…</div>
</i>. Нельзя забывать про теги <i><html>, <body>
</i> – все должно быть аккуратно.</li>
<li>Атрибуты тегов нужно обязательно заключать в кавычки. Так нельзя: <i><a href=http://сайт>
</i>. Можно только так: <i><a href=”http://сайт”>
</i>.</li>
<li>Теги и CSS-свойства можно писать только маленькими буквами.</li>
<li>В случае присутствия ссылки, содержащей знак <i>&
</i>, его нужно преобразовать в <i>&.
</i></li>
<li>У изображений, формируемых тегом <i><img>
</i>, обязательно нужно указать свойство <i>alt
</i>.</li>
</ul><p>И, также как в HTML 4.01, никаких воспоминаний о внешнем виде в XHTML-коде быть не должно.</p>
<p>Конечно, это не полная спецификация языка XHTML, в нем есть ряд ограничения, связанный со скриптами и еще Бог знает с чем. С полной спецификацией можно ознакомится в соответствующем разделе сайта W3C (хоть там все и на английском, но с красочными примерами правильного и ошибочного синтаксиса, так что желающий понять – поймет).</p>
<p>Как я говорил ранее XHTML – это <b>расширяемый
</b> язык гипертекстовой разметки. Однако, вся эта расширяемость плохо воспринимается поисковиками, некорректно работает в IE6 и IE7, возникает необходимость настраивать заголовки, передаваемые сервером и выполнять строгие правила формата XML, чтобы все достоинства XTML работали в полную силу.</p>
<p>Достоинства языка XHTML – это вовсе не строгость синтаксиса, а возможность использовать хитрые теги разметки, например, принадлежащие пространству имен <i>MathML
</i> (пример , который нужно запускать только в нормальных браузерах; IE6, вместо интерпретации XHTML кода, поднимет диалог сохранения файла) или придумывать теги самостоятельно в своем собственном пространстве имен (этот процесс детально описан на сайте W3C , анг. язык).</p>
<p>Дальнейшее развитие революционной ветки XHTML – это выход <b>стандарта XTML 2.0
</b>, значительно отличающегося от привычного HTML и несовместимого с XHTML 1.0. Окончание работ над XHTML 2.0 планировалось на 2009 год.</p>
<p>Стандарт XHTML 2.0 был заброшен и организация W3C переключил на разработку HTML 5.</p>
<p>Утвердить стандарт HTML 5 планируется не ранее 2020 года.</p>
<h2>Какой DOCTYPE выбрать</h2>
<p>Теперь, вооружившись знаниями истории стандартов, снова вернемся к статье на htmlbook.ru про DOCTYPE .</p>
<p>Мы знаем, что такое HTML 4.01 и XHTML 1.0. Остаются открытыми три вопроса:</p>
<ul><li>Что такое строгий и переходный синтаксис?</li>
<li>Какой стандарт выбрать?</li>
<li>Как научится верстать в соответствии с выбранным стандартом?</li>
</ul><p>Теперь я последовательно отвечу на все поставленные вопросы.</p>
<p><b>Что такое строгий и переходный синтаксис
</b></p>
<p>Оказывается, чтобы ломка при переходе на новый стандарт не была такой уж болезненной, придуманы <b>переходные синтаксисы
</b>.</p>
<p>Вы же помните, что в стандарте HTML 4.01 запрещены HTML-инструкции, касающиеся внешнего вида? Да, помните конечно, я просто хотел в этом убедиться.</p>
<p>Теперь поэкспериментируем.</p>
<p>Сначала я выберу <b>строгий синтаксис формата HTML 4.01
</b> и укажу соответствующую директиву DOCTYPE:</p><p>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
</p><p>Эта абракадабра означает, что HTML-код, идущий ниже, соответствует стандарту 4.01, принятому организацией W3C (вот этот кусок абракадабры <i>"-//W3C//DTD HTML 4.01//EN"
</i>). Инструкции, написанные организацией W3C, касательно данного стандарта, находятся вот там: <i>"http://www.w3.org/TR/html4/strict.dtd"
</i>и браузер может прогуляться по этому адресу для уточнения.</p>
<p>Экспериментировать будем с вот таким HTML-кодом:</p><p>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Проверочка
Немного текста