Doctype в HTML, объявление типа документа
В первой части из стартового тренажёра мы увидели как работает HTML и CSS, а заодно заслужили доверие инструктора Кекса. Поэтому босс поручил нам ответственное задание: спроектировать сайт начинающего верстальщика. Там вы будете вести свой дневник обучения, а Кекс следить за вашими успехами.
Ваша задача на эту часть — разработать прототипы главной и внутренней страниц сайта. Вы познакомитесь с устройством HTML-страниц и изучите теги, отвечающие за их крупные структурные блоки. В конце части у вас получится такой результат как на иллюстрации справа.
Каждый HTML-документ начинается с декларации типа документа, или «доктайпа». Тип документа необходим, чтобы браузер мог определить версию HTML и правильно отобразить страницу.
Для старой версии HTML доктайп выглядел так:
А для современной версии HTML уже намного проще:
Давайте потренируемся задавать документу правильный доктайп.
Декларации типа документа
В этой главе рассказывается, как идентифицировать правильный документ XHTML.
Декларация типа документа
В самом начале веб-страницы вы должны определять декларацию типа документа при помощи элемента DOCTYPE. Да, да, именно должны.
Без определения типа документа ваш HTML не полноценен и большинство браузеров будут отображать его в так называемом «режиме обратной совместимости», который означает, что браузеры будут уверены в вашей некомпетентности, и будут исполнять ваш код по своему усмотрению. Будь вы хоть гуру в HTML, ваш код пусть будет безупречен, а CSS идеален, но без декларации типа документа или если она неверна, то ваша веб-страница может выглядеть так, как будто ее делал неграмотный первоклашка.
Декларация для строгого XHTML 1.0 (XHTML 1.0 Strict) выглядит следующим образом:
Ниже приводится декларация для документа XHTML 1.1, который может показаться более предпочтительным, однако так как это последняя версия XHTML, здесь кроется несколько проблем, которые мы объясним в конце этой главы…
Если вы по какой-либо причине хотите использовать HTML 4 или Netscape 4 для вас эталон браузеров, вы можете декларировать документ для переходного XHTML 1.0 (XHTML 1.0 Transitional):
Правда единственной причиной такой декларации может быть желание поддержать старые и редко используемые браузеры. Переходный XHTML 1.0 разрешает использование старых элементов представления HTML 4, что может улучшить представление страницы в таких браузерах как Netscape 4, однако использование таких элементов способно пагубно сказаться на эффективности и доступности вашей веб-страницы.
Наконец, если вы один из тех эксцентричных людей, которые используют фреймы, то специально для вас существует декларация для фреймового XHTML 1.0 (XHTML 1.0 Frameset):
Обратите внимание, что тег DOCTYPE – своего рода бунтовщик, и его необходимо писать в верхнем регистре с восклицательным знаком перед ним. Также он нарушает еще одно правило – это единственный тег, который не нужно закрывать.
Языковая декларация
Например, языковая декларация для документа с русским основным языком будет выглядеть следующим образом:
После декларации основного языка, если на веб-странице есть контент на другом языке, то нужно использовать атрибут xml:lang линейно (например, HTML Hund).
Типы контента
Также необходимо определять медиатип и набор символов документа HTML, и делается это в заголовке HTTP:
Content-Type: text/html; charset=UTF-8
Первая часть (в данном примере text/html) – это MIME тип файла. Это позволяет браузеру понять, с каким типом файла он имеет дело, и решить, что с ним делать. У всех файлов есть свой MIME тип. Например, у изображения JPEG тип image/jpeg, у файла CSS — text/css, а обычный тип HTML документа — text/html.
Вторая часть заголовка HTTP (в данном примере UTF-8) – это набор символов.
Самый простой способ установить заголовок HTTP – это использовать метатег, например, следующим образом:
Немного более сложный, но и более предпочтительный (так как в этом случае получается правильный заголовок HTTP и при этом размер кода HTML никак не изменяется) способ – это сформировать заголовок и затем отослать его при помощи скриптового языка, работающего на стороне сервера. Например, при помощи PHP это делается следующим образом:
Если вы не хотите (или не можете) использовать скриптовый язык, работающий на стороне сервера, то можно обратиться к самому серверу при помощи файла ‘.htaccess‘. У большинства серверов (совместимых с Apache) есть специальный текстовый файл с именем ‘.htaccess‘, расположенный в корневой директории. Если добавить в него следующую строку, то все файлы с расширением ‘.html’ будут ассоциироваться с указанным MIME типом и набором символов:
AddType text/html;charset=UTF-8 html
Основное правило выбора набора символов заключается в том, чтобы использовать тот набор, который будет распознаваться аудиторией вашего сайта. Наборов символов достаточно много (например, ‘ISO-8859-1’ – для большинства западных, основанных на латинице, языков, ‘SHIFT_JIS’ – для японского языка, а ‘UTF-8’ – в значительной степени универсальный набор, в котором есть огромное число уникальных символов, использующихся в большинстве языках). Здесь можно посоветовать использовать набор ‘UTF-8’, так как он может отображать почти все символы большинства языков и можно с большой долей вероятности быть уверенным, что текст вашей веб-страницы увидят большинство пользователей.
Документы XHTML должны обрабатываться как MIME тип application/xhtml+xml. Это именно тот тип, чем они и являются – приложениями XML. К несчастью, большинство браузеров совсем не знают, что это такое. Поэтому считается вполне нормальным обрабатывать их по типу text/html. Согласно стандартам документы XHTML 1.0 могут обрабатываться по типу text/html, а вот документы XHTML 1.1 нет. Вот почему все примеры в учебниках на этом сайте имеют декларацию XHTML 1.0 Strict, предполагающую обработку по типу text/html. Но вы можете назначать правильный MIME тип для тех браузеров, которые умеют работать с соответствующими документами, прибегнув к небольшой обработке на стороне сервера.
Скрипт на PHP, который для браузеров, понимающих стандарт XHTML 1.1, (как Mozilla) присваивает документу соответствующую декларацию и MIME тип application/xhtml+xml, а для остальных браузеров (как IE) — XHTML1.0 Strict и MIME тип text/html, может выглядеть следующим образом:
'); > else < header ("Content-Type: text/html; charset=UTF-8"); echo (''); > ?>
Этот скрипт следует вставлять в начале каждой веб-страницы. Он проверяет, принимает ли браузер MIME тип application/xhtml+xml, и если принимает, то отсылается именно этот MIME тип, а в декларации прописывается тип документа XHTML 1.1. Если же MIME тип не распознается браузером, тогда отсылается MIME тип text/html, а в декларации прописывается тип документа XHTML1.0 Strict.
22 ноября 2005
Любой, кто хоть раз заглядывал в код страниц, наверняка замечал, что многие из них начинаются со строчки Это так называемое «объявление типа документа» или Document Type Declaration (не путать с DTD Document Type Definition).
Авторы умных книг по HTML, автоматические валидаторы и Джеффри Зельдман (Jeffrey Zeldman) утверждают, что по правилам хорошего тона использовать его нужно всегда. Если учесть тот факт, что многие сайты прекрасно отображаются в браузерах и без него, возникает резонный вопрос: «А нужен ли на самом деле?». Путем несложных рассуждений попытаемся это выяснить.
Откуда он взялся?
Объявление типа документа можно встретить даже в древней версии HTML, не имевшей порядкового номера и носившей странное название HTML Internet Draft. Тогда уже существовало несколько языков разметки (TEX, PostScript и SGML), которые использовались в основном для работы с научными документами (что нисколько не удивляет, так как веб вообще родился в Европейском центре ядерных исследований путем скрещивания простого гипертекста с еще более простым протоколом).
Поскольку эти языки были сложными, разработчики задумались над тем, как облегчить жизнь людям и графическим терминалам, упростив разметку. И придумали HTML, построив его на основе правил «стандартного обобщенного языка разметки» или, как его чаще называют, SGML (Standard Generalized Markup Language).
Именно в SGML было указано, что каждый документ должен начинаться с объявления его типа. В первой публичной версии спецификации HTML 2.0 говорилось о том, что следует начинать с объявления (использовалось слово should), в версии HTML 3.2 его использование стало обязательным (must start with the declaration).
Но ни один браузер тех времен не требовал явного указания типа документа для отображения HTML-страницы. А раз браузеры не требовали, то и разработчикам было все равно они с легким сердцем игнорировали (справедливости ради стоит сказать, что речь идет о тех разработчиках, которые код «писали руками», а не посредством HotDogа).
Стандарты и обратная совместимость
Первым браузером, обратившим внимание на тип документа, стал Internet Explorer 5.0 для Mac OS (движок Tasman). Появился он в начале 2000 года и сразу же стал лучшим с точки зрения поддержки HTML-стандартов (оговорка для зануд: Mozilla была далека от версии 1.0, а Opera продолжала безнадежно копировать MSIE для Windows).
Но на тот момент никому не был нужен браузер, умеющий «рендерить» HTML согласно стандартам. Потому что стандарты не соответствовали тому, как браузеры на практике интерпретировали HTML-код.
В результате Internet Explorer 5.0 для Mac OS показывал страницы не так, как они были задуманы, и понадобился специальный переключатель, с помощью которого можно было сказать: вести себя как обычные браузеры или по стандартам.
И таким переключателем стало объявление типа документа. Правило при этом было простое: если тип документа не объявлен или объявлен без указания адреса DTD (на этот раз речь идет о Document Type Definition), то HTML интерпретировался в режиме совместимости со «старыми» браузерами (quirky mode, впоследствии quirks mode), если же адрес DTD указывался, то элементы отображались согласно стандартам HTML 4.01 и CSS 1.
Вот и началась новая эра эра борьбы за стандартный код. Появились сообщения о слишком маленьких шрифтах во вложенных таблицах, о «разъезжающихся» сайтах box-модели, о загадочных зазорах между картинками (Mozilla, прости) и т. д. И все это было связанно с тем, что разработчики не задумывались о том, что написано внутри замечательной конструкции .
Internet Explorer 6.0 для Windows узаконил переключение между режимами, и теперь почти все браузеры знают, что такое «стандартный режим» (standards mode) и «режим совместимости со старыми браузерами» (quirks mode). Mozilla и Safari пошли дальше: у них есть «почти стандартный режим», почти соответствующий стандартному режиму Internet Explorer 6.0. Но это уже совсем другая история.
Так указывать или не указывать?
Если вы считаете нужным указать , будьте любезны сделать так, чтобы ваш HTML соответствовал стандартам без исключений. Либо допустите исключения, если вам нужен «стандартный режим» отображения. Во всех остальных случаях вам не требуется. Поверьте на слово.
DOCTYPE: история и варианты применения
DOCTYPE чем-то похож на заголовок для статьи. Он пишется в начале HTML-документа. Если его не будет, то браузер может отобразить вашу страницу в неожиданном виде. Читайте о том, из чего состоит DOCTYPE, и как его использовать правильно.
Определение и значение
Если вы хоть раз работали с HTML-файлом, то наверняка видели в начале страницы ключевое слово DOCTYPE . Если разобрать его по частям, то получается DOC (сокращение от слова document) + TYPE (с английского «тип»). Ключевое слово DOCTYPE в файле HTML — это декларация типа документа. Так браузер узнает, на каком языке и с какими технологиями он был создан. Если не укажете DOCTYPE, то ваша страница может отображаться некорректно.
История
Из истории HTML мы знаем, что спецификация менялась с момента первой публикации в 1992-м году и до наших дней. Вместе с ней, соответственно, менялись и типы документов. Актуальная версия HTML сейчас — это HTML Living Standard. Начиная с версии 4.0 многие элементы стали устаревшими (их рекомендовали не использовать на страницах) — стандарт очистился.
Типы синтаксиса в DOCTYPE
Синтаксис HTML-документа бывает:
- свободным — переходный (transitional);
- строгим — strict. По его правилам парные теги обязательно надо закрывать, атрибуты «заворачивать» в кавычки, нельзя пользоваться устаревшими тегами;
- «рамочным» — frameset. Когда используются фреймы.
Сравниваем DOCTYPE для HTML 1.0 и HTML 4.01 на примерах
Переходный синтаксис
Строгий синтаксис
Фреймы
Формула с расшифровкой параметров (элементов)
- [Элемент верхнего уровня] — корневой элемент на веб-странице, часто html / HTML ;
- [Публичность] — этот параметр для файла может принимать два значения: PUBLIC (публичный) и SYSTEM (локальный);
- [Регистрация] — указывает на наличие регистрации у разработчика DTD внутри ISO (международная организация). Может быть + или .
- [Организация] — название организации стандартизации (W3C);
- [Тип] — определение типа страницы, например DTD ;
- [Имя] — имя документа;
- [Язык] — язык описания объектов (по умолчанию английский EN );
- [URL] — адрес страницы, на которой находится описание для указанного типа документа. Из этой спецификации браузер узнает, как отображать страницу с допустимыми тегами.
И что теперь?
Время проходит, мы во многом стараемся двигаться к упрощению и унификации. В HTML5 декларация типа документа выглядит очень просто:
DOCTYPE для него самый простой из существовавших.
Что происходит, если указать DOCTYPE неправильно или не указывать его вообще
Браузеры покажут страницу по совместимости со своими старыми версиями.
Формально регистр тут значения не имеет. Но корректнее всё же писать заглавными буквами. Потому что в XHTML5 есть разница между именами элементов, написанными в нижнем регистре и ключевыми словами, которые пишут в верхнем регистре.
— запомнить слишком просто.
Напоминалка на дорожку
- DOCTYPE — инструкция, которая ассоциирует веб-страницу с типом документа (DTD).
- Document Type Definition — это близко к DOCTYPE, но не путайте.
- Пример: формальное определение частной версии HTML 2.0 — 4.0.
Простыми словами, прописывая DOCTYPE, мы говорим браузерам/валидаторам, каким языком разметки мы писали свой документ. Вы помните, что кроме простого HTML бывает XHTML и XML. Кроме этого мы можем указать и степень строгости синтаксиса.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.