!DOCTYPE. Стандарты HTML. Валидная верстка


Содержание

4 причины для использования валидной верстки вашего сайта

Скорее всего большинство из читателей данной статьи, которые серьезно интересуются сайтостроением, слышали о таком понятии, как валидная верстка. Что это такое и для чего она нужна? Об этом и пойдет речь далее.

Что такое валидный код и зачем он нужен?

Любая страница в Интернете является интерпретацией исходного кода, на котором она создана. Прежде всего, это язык гипертекстовой разметки HTML и возможно несколько других языков веб-программирования. Если код вашего веб-ресурса полностью удовлетворяет требованиям W3C (Консорциума Всемирной Паутины), то только в этом случае он является валидным. Стремится привести код вашего сайта в полное соответствие с имеющимися стандартами однозначно имеет смысл.

Какие преимущества дает валидная верстка сайта?

Рассмотрим 4 основных преимущества сайтов с 100%-но валидным кодом.

  1. Увеличение эффективности SEO-оптимизации.
    Если взять два разных, но одинаково хорошо оптимизированных сайта, то в поисковой выдаче валидный вариант займет позицию выше. Существенное усиление действия валидной верстки на продвижение сайта в поисковых системах можно достичь вкупе с правильным использованием тегов для акцентирования текста.
  2. Одинаковое отображение и стабильная работа сайта в разных интернет-браузерах.
    Причем с заделом на будущее. Есть все основания быть уверенным, что ваш сайт будет корректно не только отображаться, но и работать в будущих типах и версиях браузеров. В существующих на сегодняшний день браузерах невалидный код будет грамотно отображаться только в тех случаях, если в них есть функция автоисправления кода. Однако если попадаются совсем уж невалидные фрагменты кода, то исправить его в автоматическом режиме довольно проблематично. В результате картинки не отображаются, скрипты не работают и вообще отображение сайта в окне браузера оставляет желать лучшего. Хорошая новость заключается в том, во всех 50-80 более не менее распространенных браузерах сайты с валидным кодом будут работать и отображаться как нужно. Поэтому к валидности кода следует стремиться и по этой причине.
  3. Быстрая загрузка страниц.
    Существующие технологии передачи данных способны обеспечить за короткое время загрузку веб-страниц с даже внушительными объемами информации. Но почему бы это время не сократить до предела? Кроме того, от медленных Интернет-подключений мир пока полностью не избавился. А еще могут наблюдаться неполадки с сервером. «Плохая» в плане исходного кода страница будет загружаться в последнем случае в разы медленнее.
  4. Показатель профессионализма вебмастера.
    Если вы занимаетесь изготовлением сайтов на заказ, неплохо бы этот аспект принять во внимание. Валидность сайта, который вы сделали, подчеркнет ваш высокий уровень и компетентность.

В заключении следует сказать о работе с популярными нынче CMS. Какой бы идеальной верстка не была, все равно движок внесет в код ошибки. К сожалению, без «побочек» не обойтись. С другой стороны, представьте себе колоссальный объем работы, котрый выполняет за вас тот же WordPress! Некоторые ошибки поддаются исправлению, некоторые — нет. Что здесь можно сделать? Займитесь валидацией созданного кода, и те фрагменты, которые можно исправить, измените на правильные.

В сети существуют так называемые валидаторы. На них вы всегда можете проверить соответствие кода вашего сайта требованиям международных стандартов. Можете сделать это прямо сейчас, перейдя по ссылке: http://validator.w3.org.

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

Правильный DOCTYPE в HTML5

В HTML-нотации HTML5 регистр DOCTYPE-объявления формально не имеет значения, поэтому встречаются разные варианты его написания, например:

Но в HTML5 предусмотрена XML-нотация, называемая XHTML5. В XML ключевые слова (в данном случае DOCTYPE ) набираются заглавными буквами, а имена элементов чувствительны к регистру символов: например,

— не одно и то же. В XHTML имена элементов должны быть в нижнем регистре. Подстрока html в составе DOCTYPE — имя корневого элемента документа, значит для неё тоже следует использовать нижний регистр:

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

Что такое DOCTYPE

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

Без DOCTYPE (либо при неправильном DOCTYPE) браузеры отображают страницу в режиме совместимости со старыми браузерами — вплоть до имитации их ошибок (багов). Кроме того, современные возможности (например, поддержка CSS-свойства padding для элемента IMG ) доступны только в режиме соответствия стандартам. Следует всегда снабжать HTML-документы DOCTYPE-объявлением.

Прошу прощения, но где именно задокументировано такое странное требование? В текущей спеке W3C (п. 9.1, http://www.w3.org/TR/html5/the-xhtml-syntax.html#writing-xhtml-documents) вроде бы четко сказано, что «XML documents may_contain a DOCTYPE if desired, but this is not required to conform to this specification.» Генри Сивонен, автор HTML5-парсера для FF и валидатора validator.nu, дает еще более радикальный совет (http://hsivonen.iki.fi/doctype/#choosing): «The simple guideline for application/xhtml+xml is not to use a doctype at all.» В стандартный режим браузеры при application/xhtml+xml (отличительный признак XML-сериализации aka XHTML5) и так перейдут, а больше никакой значимой информации «огрызок» Doctype не несет, независимо от регистра…

Вопрос необходимости DOCTYPE-объявления при использовании XML-нотации HTML5 здесь не затрагивается.

Если же DOCTYPE есть, то регистр символов обуславливается следующим:

  • ключевые слова ( DOCTYPE в данном случае) в XML пишутся в верхнем регистре;
  • имена элементов в XML пишутся в нижнем регистре ( html в DOCTYPE-декларации — имя корневого элемента HTML-документа).


Сама спецификация HTML5 в данный момент тоже предлагает именно вариант .

Спасибо за разъяснения! Правда, в чем миссия DOCTYPE, не содержащего никаких DTD и сущностей, для меня по-прежнему вопрос… но, действительно, если вопрос о необходимости DOCTYPE для xml-варианта HTML5 вынести за угловые скобки), то всё логично. Меня смутила лишь фраза про «единственно правильный вариант для XHTML5», но теперь я ее понял как надо (надеюсь:).

Ну вот у меня обычный сайт в системе укоз. Какой доктайп должен быть? Вот сайт [ссылка удалена]

Александр, правильное DOCTYPE-объявление сейчас одно: . Что касается конкретно Ucoz, в рамках бесплатных услуг хостинга он принудительно вставляет в начало страницы код своего рекламного скрипта, поэтому сайт в любом случае будет отображаться в режиме совместимости с IE5, словно DOCTYPE отсутствует.

Спасибо за информацию.

Перепечатка любых материалов сайта в любом объёме запрещена

Тег в html

Тег отвечает за тип документа в HTML (DTD «document type definition», описание типа документа). Если быть точнее, то это инструкция для браузера, что за тип документа представлен ниже.

Возникает логичный вопрос: а что html разве бывает разный? Дело в том, что в разных версиях html появлялись новые теги. Также и в CSS появлялись новые свойства. Чтобы браузер корректно смог понять какому стандарту соответствует страница, рекомендуется четко указывать тип документа в .

Илон Маск рекомендует:  Создание APK-файла

Располагается в самом начале html-кода (перед тегом ).

  • Элемент верхнего уровня — элемент верхнего уровня в документе (для HTML это тег )
  • Публичность — значение PUBLIC (объект является публичным) или SYSTEM (системным ресурсом). Например, таким как локальный файл. Для HTML/XHTML указывается значение PUBLIC.
  • Регистрация — принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и минус (-) — разработчик не зарегистрирован. Для W3C значение ставится минус.
  • Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это название и пишется в .
  • Тип — тип описываемого документа (для HTML/XHTML значение DTD).
  • Имя — уникальное имя документа для описания DTD.
  • Язык — язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Например, EN.
  • URL — адрес документа с DTD.

Рассмотрим какие стандартные значения встречаются чаще всего.

Таблица со значениями и описания к ним

DOCTYPE Описание
Строгий синтаксис HTML
Переходный синтаксис HTML
В HTML-документе применяются фреймы
Стандарт HTML5. Для всех документов. Рекомендуется использовать его на своих сайтах.
Строгий синтаксис XHTML. Включает все HTML элементы и атрибуты, кроме устаревших презентационных. Фреймсеты также не разрешены.
Переходный синтаксис XHTML. Включает все HTML элементы и атрибуты, вместе с устаревшими презентационными. Фреймсеты не разрешены.
Тоже что и XHTML 1.0 Transitional, но разрешает фреймы.
Тоже что и XHTML 1.0 Strict, но разрешает добавление модулей.

Какой выбрать

Подводя итоги можно сказать, что не является обязательным элементом, но его использование снижает риски возникновения проблем с отображением html-страницы в разных браузерах.

Фактически всем подойдет следующий вариант:

Про DOCTYPE и стандарты html.

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

Многие начинающие веб-дизайнеры не знают, а прогрессирующие не помнят что было когда-то такое время когда чётких правил написания разметки гипертекста не было, а тех которые были браузерам и пользователям не хватало и они выдумывали свои теги и атрибуты какие хотели. Чтобы как-то разгрести всю эту кашу все теги описывались в так называемые спецификации, в которых группа w3c пытаясь урегулировать хаос предписывала браузерам что и как они должны отображать. Чтобы эти каши не путались в браузерах и заодно в головах вебмастеров было предложено (в спецификации HTML2.0) а потом стало обязательным (в спецификации HTML3.2) указание типа спецификации которой нужно придерживаться при отображении страницы. Указать это можно с помощью тега в начале документа.

Естественно были популярные браузеры которые на спецификации плевали, ну или по крайней мере не очень придерживались. И были разработчики которые верстали под популярные браузеры и на спецификации ещё больше плевали. Чтобы их сайты не разваливались, если вдруг кто-то на эту страницу свёрстанную не по стандарту зайдёт, в браузеры ввели опцию отображать страницу «по старинке», если этот самый DOCTYPE не был указан. И было это во время Internet Explorer 5 под макось. С тех самых вариант отображения «по старинке» (quirks mode — англ. «причудливый режим») у всех браузеров менялся, и в общем до сих пор у всех разный. Поэтому чтобы верстать в quiks mode нужно учитывать особенности всех популярных браузеров.

Технолог лебедева в статье «тип документа объявлять или не объявлять» (2005 г.) утверждают » вам не требуется», глупенький, к счастью сейчас не 2005й год и эти слова в серьёз принемать не стоит. Сейчас все браузеры научились корректно отображать HTML в стандартном режиме, как написано в спецификации и как отображают другие браузеры. Старый браузер IE6 ежемесячно теряет больше чем по 5% всей аудитории и к концу года надеюсь сойдёт на нет. Тем более что недавно вышел IE8 который не то что HTML, а научился поддерживать CSS2.1 сразу и весь.

В «режиме соответствия стандартам» браузеры отображают код практически одинаково, без дополнительных ухищрений и хаков — это необходимая и достаточная причина для того чтобы уже начать его использовать. Для тех кто ранее верстал без него некоторые вещи необходимо будет выучить заново (ну 1-2 дня), например новую блочную модель и т.п.


Для начинающих советуется использовать «переходный» доктайп HTML 4.01 Transitional. Он учитывает все стандарты, но не отменяет устаревшие теги типа и и т.п. Выглядит он так:

обязательно использовать именно такую строчку, не указание ссылки на .dtd считается ошибкой(!) и отображается «по старинке»!

Для тех кто со всеми стандартами знаком рекомендуется вариант Strict (строгий), верстать им — признак хорошего тона.

В данном варианте допускается не использование ссылки на .dtd, но всё таки хороший тон оставить ссылку =).

Новый стандарт HTML5 пока что в состоянии черновика, и официально не должен поддерживаться, хотя поддерживается даже в IE6. Выглядит он так:

Вот так вот просто, без всяких указаний DTD (document type declaration).

Далее о главном — буду плевать в верстальщиков (динозавров) которые его не поддерживают:

1) GOOGLE — гугл состоит в рабочей группе whatwg которая занимается составлением стандарта HTML5. Уже сегодня можно найти доктайп этого стандарта на страницах результата поиска . А вот на главной странице поставить забыли. Сэкономили 15 байт видимо. Можно оправдать что там и вёрстки-то нет, однако хочется чтобы гугл являл нам свет в непросвещённые умы, да.

2) яндекс — на всех страницах указан , а то и вовсе не указан (например в панели вебмастера). Позор стыд и срам. Уже много лет так и висит. Когда я только начинала верстать я брала доктайп именно оттуда, и думала «ну. ничего не изменилось, фигня какая-то». Вот. И люди многие оттуда берут доктайп, я думаю.

Надо взять да и скачать главные страницы для всех доменов рунета (UPD: Скачала, см. статистику), хе-хе =) кто хочет посодействовать пишите в feedback предложения.

Ну и напоследок старенькое:

Крис Уилсон (Chris Wilson), архитектор платформы Internet Explorer, поделился с посетителями мероприятия информацией о том, что Microsoft планирует призвать создателей Web-сайтов к приведению сайтов к стандартам при разработке сайтов под IE 8.0. «Пять лет назад ни один из 200 самых популярных Web-сайтов не прибегал к использованию стандартов» — сказал Уилсон. «Сегодня стандартизированы лишь половина из этих 200 сайтов». Уилсон признал, что пока не до конца понятно, какую форму примет эта оптимизация. Но обращение к авторам сайтов с просьбой оптимизировать сайт «даст возможность делать восхитительные вещи». Дав Microsoft разрешение на то, чтобы IE 8.0 стал более стандартизированным, авторы возьмут на себя ответственность за некорректное отображение своих сайтов.

Ссылки по теме:

http://www.w3.org/QA/Tips/Doctype
https://developer.mozilla.org/en/Mozilla%27s_DOCTYPE_sniffing
https://developer.mozilla.org/en/Mozilla%27s_Quirks_Mode
https://developer.mozilla.org/en/Mozilla_Quirks_Mode_Behavior
http://www.htmlbook.ru/html/!doctype.html
http://www.webmakerslounge.com/html/pravilnyiy-doctype/
http://neveragainblog.com.ua/archives/70
http://softwaremaniacs.org/blog/2005/12/19/xhtml-you-say/
http://webmascon.com/topics/coding/25a.asp
http://hsivonen.iki.fi/doctype/.
http://habrahabr.ru/blogs/webdev/31484/ перевод SilentIT

Как распространён DOCTYPE:

Я провела исследование распространения доктайп на некоторых сайтах в рунете, подробнее читайте статью «Капля статистики: Doctype».

Тег Doctype — просто о важном

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

Некорректное отображение данных, представленных на веб-странице, обуславливается в первую очередь тем, что браузер неправильно определяет тип документа, размещенного на странице – DTD .

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

Не лишним будет упомянуть о том, что данный тег имеет достаточно долгую историю. Он был разработан в то время, когда создали Internet Explorer 5 для MacOS и столкнулись с определенными трудностями чтения некоторых страниц.

Дело в том, что новая (по тем временам) версия браузера превзошла все ожидания и просто перестала отображать старые страницы сайтов надлежащим образом. И поэтому, старые страницы, не имевшие в коде на тот момент данного тега, были оснащены Doctype , стоящим перед элементом html .

Почему необходимо указывать именно Doctype?

Как уже было сказано выше, данный тег вставляют в код любого веб-документа для правильного определения его типа. Указание типа документа требуется в первую очередь потому, что сегодня существует сразу несколько версий HTML документов, написанных на разных языках. В том числе существует и расширенная версия – XHTML.

Илон Маск рекомендует:  Assembler & win32 курс молодого бойца


Пример тега Doctype:

Разновидности тега Doctype

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

    Doctype HTML 4.01. Код с использованием данного тега выглядит следующим образом:

В данном случае используется строгий html:

  • Переходные версии Doctype HTML 4.01.
  • HTML5 Doctype выглядит таким образом . Этот тег подходит для любых документов.

Что произойдет, если использовать старые версии тега Doctype?

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

В том случае, если вы будете использовать неполную версию тега, некорректно его вставите или же не будете использовать его в коде и вовсе, то ваш браузер автоматически перейдет в « загадочный » режим.

Отображение документа в данном случае будет происходить таким образом, будто вы вольно отступали от стандартов.

На сегодняшний день только браузер Opera старается отображать страницы таким образом, как если бы они соответствовали всем стандартам, независимо от того, был ли использован тег Doctype или же нет.

Однако, стоит отметить, что данный браузер пока не полностью поддерживает все стандарты W3C DOM , но работы над этим уже ведутся.

Где можно взять качественный тег Doctype?

Если вы хотите получить и использовать правильный тег Doctype, то вы можете воспользоваться сервисом www.w3.org , что и делают сегодня большинство веб-мастеров.

Здесь вы можете взять DOCTYPE HTML PUBLIC , который потребуется для определения веб-документов типа HTML 4.01 , а также Doctype HTML 5 и многие другие типы тегов, необходимые для создания страниц, соответствующих стандартам.

Пример использования тега для HTML 5 , взятого с www.w3.org :

Надеюсь, что данная статья оказалась для Вас полезной! Удачи!

Для чего нужен DOCTYPE в HTML документах

Как я заметил в посте Основы HTML. Структура документа, первой строкой в документе HTML, должно идти объявление DOCTYPE. Этим постом, я расскажу что это такое и с чем его едят.

Определение DOCTYPE — это не тег HTML, а инструкция веб-браузеру, указывающая, на какой версии языка HTML написан документ (веб страничка).

DOCTYPE ссылается на определение типа документа (DTD — Document Type Definition). DTD задает правила для языка разметки, для того чтобы браузеры могли правильно отобразить содержание веб странички.


Рассмотрим все доступные варианты DOCTYPE по рекомендации W3C.

HTML 4.01 Strict

Этот DTD содержит все HTML элементы и атрибуты, но не включает презентационные или устаревшие элементы (например: тег font ). Использование фреймов не допускается.

HTML 4.01 Transitional

Данный DTD содержит все HTML элементы и атрибуты, включая презентационные и устаревшие элементы (например: тег font ). Использование фреймов в документе объявленном с таким DOCTYPE также не допускается.

HTML 4.01 Frameset

Следующий DTD, такой же как и HTML 4.01 Transitional, но позволяет использование фреймов в содержании документа.

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

XHTML 1.0 Strict

DTD, который содержит все HTML элементы и атрибуты, но не включает презентационные или устаревшие элементы (например, все тот же, тег font ). Использование фреймов не допускается. Разметка веб страницы должна быть оформлена по всем правилам документа XML. То есть, все теги должны быть обязательно закрыты. Все теги должны иметь общего родителя, которым в HTML документе является тег . Все атрибуты должны быть заключены в кавычки.

В настоящее время, как по мне, данный DOCTYPE является наиболее предпочтительным для наиболее валидной верстки.

XHTML 1.0 Transitional

И еще один переходной DTD, который содержит все HTML элементы и атрибуты, включая презентационные и устаревшие элементы (например: тег center ). Использование фреймов, данный DTD, также не допускает. Разметка веб страницы тоже должна быть оформлена по всем правилам документа XML.

XHTML 1.0 Frameset

И еще один DTD с фреймами, аналогичен XHTML 1.0 Transitional, но позволяет использование фреймов в содержании веб документа.

XHTML 1.1

И последний DTD, аналогичен XHTML 1.0 Strict, но позволяет добавлять модули (например, обеспечить поддержку Ruby для Восточно-азиатских языков).

В следующем посте можно будет посмотреть на таблицу всех HTML / XHTML элементов, которые поддерживаются в той или иной DTD.

Для проверки валидности HTML документа можно воспользоваться валидатором W3C Validator.

!DOCTYPE. Стандарты HTML. Валидная верстка

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

Синтаксис

Синтаксис doctype (упрощенно):

Разница в DOCTYPE для HTML 4.01 и HTML5


HTML5 не использует SGML как основу, и указывать DTD при его использовании не нужно.

Примеры DOCTYPE для популярных версий HTML

DOCTYPE HTML 5

DOCTYPE HTML 4.01 Strict

Поддерживает все актуальные для DTD HTML 4.01 элементы и атрибуты, не включая презентационные и устаревшие. Фреймсеты не допускаются.

DOCTYPE HTML 4.01 Transitional

Поддерживает все актуальные для DTD HTML 4.01 элементы и атрибуты, а также презентационные и устаревшие. Фреймсеты не допускаются.

DOCTYPE HTML 4.01 Frameset

Аналогичен HTML 4.01 Transitional. Разрешено использовать фреймсеты.

DOCTYPE XHTML 1.0 Strict

Поддерживает все актуальные для DTD HTML 4.01 элементы и атрибуты, не включая презентационные и устаревшие. Фреймсеты не допускаются. Необходимо, чтобы документ соответствовал стандартам XML.

DOCTYPE XHTML 1.0 Transitional

Поддерживает все актуальные для DTD HTML 4.01 элементы и атрибуты, а также презентационные и устаревшие. Фреймсеты не допускаются. Необходимо, чтобы документ соответствовал стандартам XML.

DOCTYPE XHTML 1.0 Frameset

Аналогичен XHTML 1.0 Transitional. Разрешено использовать фреймсеты.

DOCTYPE XHTML 1.1

Аналогичен XHTML 1.0 Strict. Есть возможность добавлять собственные модули.

Элемент !DOCTYPE в HTML

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

Версий гипертекстовой разметки существует несколько, чтобы браузер мог определить, какую именно версию вы использовали в коде страницы, применяется тег . Данный элемент указывает тип текущего документа и помогает браузерам «понять», с использованием какого стандарта следует отображать страничку. Прописывается в самом начале — в первой строчке кода создаваемого документа HTML. Если вы случайно забудете проставить данный тег (или при неправильном использовании) вашу, с таким трудом созданную, веб-страничку браузеры будут игнорировать, отображать неправильно или тратить много времени на то, чтобы «прочитать» написанный код.

История появления элемента

В процессе развития и совершенствования HTML разработчики, пытаясь облегчить себе работу, придумывали различные варианты верстки документов. Создание технологии CSS помогло в значительной мере навести порядок в коде, ведь всю информацию о внешнем виде создаваемого сайта (шрифт, цвет и т.д.) стали выносить в отдельный файл. Данное обстоятельство позволило избежать путаницы и «облегчить» вес будущей странички, так как отпала необходимость постоянно повторять код — достаточно указать CSS-файл, где прописан стиль для одинаковых блоков.

В HTML 4.01 теперь используются CSS-стили для отображения внешнего вида, а использовать HTML для различных манипуляций с отображением запрещено. Но развитие не стоит на месте — разработчики из W3C решили, что необходимо придумать что-то грандиозное и универсальное. Так появился новый XHTML стандарт, представляющий из себя HTML в котором используются принципы XML. В организации W3C подумали — и решили, что если XML, представляющий из себя простой текстовый файл, в котором прописаны структурированные данные, может проанализировать и прочитать любая операционная система, значить будущее за этим стандартом.

В своих планах разработчики представляли, что создадут язык разметки, в который можно будет добавлять новые теги и который сможет «прочитать» практически любое устройство. После XHTML 1.0, выпустили стандарт XHTML 2.0, который также забросили, посчитав неперспективным направлением. Теперь W3C переключилась на HTML 5, который должен наконец-то оправдать надежды, благодаря семантическим тегам, и в значительной мере улучшить веб-разработку.

Илон Маск рекомендует:  Longjmp длинный переход


Понятное дело, что все это происходило не за несколько дней, и пока одни целеустремленные программисты экспериментировали с HTML, другие — создавали сайты и разрабатывали браузеры, используя актуальную на то время информацию. Получилось, что код страниц писали с ошибками, при этом частенько отступали от стандартов, но организация W3C потребовала со всей строгостью у производителей браузеров использовать стандарты. Чтобы не «полетели» все сайты, написанные в вольном стиле, было принято компромиссное решение — позволить разработчикам самим выбирать, какой лучше использовать режим. Теперь браузеры стали обязаны работать не только в строгом режиме для нового стандарта, но и в режиме совместимости со старыми правилами написания.

Именно для этого и предназначен тег«показывать» всем браузерам, с помощью какого стандарта следует открывать определенную страницу. Наиболее часто используются строгая(Strict) и переходная(Transitional) гипертекстовая разметка, но существует также Frameset(фреймовая).

Информация о DOCTYPE в Html5 и xhtml

DOCTYPE в html5

Html-тег используется для определения языка и типа документа. С появлением html5 этот тег считается практически бесполезным, так как в html5 нет необходимости в объявлении типа документа. Тем не менее, для того, чтобы документ прошел валидацию, надо указывать DOCTYPE.
В html5 тег намного проще, чем в предыдущих версиях html, и ставится в самом начале, перед всем html кодом:

DOCTYPE в xhtml

В xhtml тег помогает браузеру определить тип документа и, соответственно, с помощью какого парсера его обрабатывать, а также указывает в соответствии с какими стандартами проводить валидацию документа. Существует три самых популярных типа xhtml 1.0 документов: Strict, Transitional, Frameset.

Strict — строгий тип xhtml документа. Позволяет использовать только дескрипторы, соответствующие стандарту xhtml 1.0, запрещает элементы и свойства, задающие графическое отображение, например font или bgcolor.

Transitional — переходный тип документа. Является самым распространенным и менее строгим, в отличие от Strict. В данном типе документа разрешаются атрибуты, отвечающие за графическое отображение, но, тем не менее, лучше использовать для этих целей css. Также при указании данного типа становится возможным применение iframe для страниц и атрибута target для ссылок.

Frameset — является дополненной версией типа transitional, но при этом дает возможность использовать в документе фреймы.

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

Существуют также DOCTYPE для мобильных устройств и для документов модульного типа xhtml 1.1

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

!DOCTYPE. Стандарты HTML. Валидная верстка

Когда я углубился в изучение блочной вёрстки, то обнаружил, что многие «рецепты» кодов в разных браузерах ведут себя непредсказуемо. Я задавал занудные вопросы на форумах, но никто толком не мог ничего объяснить.

Однажды я скачал готовый блочный шаблон, написанный для совместимости с XML, и начал его редактировать, убирая «лишние» слэши и установив «правильный» доктайп.

Дело оказалось именно в доктайпе. Теперь я в состоянии всё это объяснить.

В самом начале кода HTML в различных пособиях обычно рекомендуют ставить тэг . Говорят, что он «объясняет» браузеру тип документа, что это якобы может быть важно, но в подробности не вдаются. В шаблоне редактора HomeSite, в котором я постоянно работаю, стояла такая вот «глокая куздра»:

Если использовались фреймы, то рекомендовалось ставить

Я это честно копировал, не задумываясь о сущности. Потом как-то узнал, что есть ещё «строгий» доктайп:

Но опять всё было без объяснений, кто же такой этот бокр и за что его куздра будланула.

Но когда будланула уж слишком штеко, да ещё и раскурдячила всех моих бокрят, я панически загуглил.

Итак, сначала маленькое занудное пояснение:

!DOCTYPE — тип документа.


Атрибуты:

HTML — указание на тип документа HTML.

PUBLIC — документ публичный (а не SYSTEM — системный, внутренний).

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

HTML 4.01//EN говорит, что документ поддерживает версию HTML 4.01, описание которого существует на английском языке (EN).

Последний атрибут — опять же выражение в кавычках — указывает адрес файла этого описания. В шаблоне HomeSite тэг давался без последнего атрибута, но правильнее — его указывать.

Файл strict.dtd описывает «строгий» синтаксис, без поблажек и причуд.

HTML 4.01 Transitional//EN указывает на так называемый переходный синтаксис, описанный в файле loose.dtd по тому же адресу. Вот так это выглядит полностью:

И наконец полный доктайп фреймовой страницы:

Синтаксис Transitional придуман для совместимости со страницами, созданными для более старых версий как браузеров, так и самого языка разметки. Как водится, в разных браузерах это работает по-разному. Но в этой кажущейся непредсказуемости уже забрезжили закономерности.

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

Отчего в IE рассыпается блочная вёрстка?

Стиль margin

Главным образом оттого, что Internet Explorer 6 в режиме Transitional не поддерживает выравнивание блока по центру с помощью правила margin: 0 auto.

Пояснение: margin: 0 auto указывает, что верхний и нижний отступы нулевые, а правый и левый — auto, т.е. размер этих отступов будет автоматически рассчитан браузером. В ныне действующей спецификации DOM блок с такими параметрами по горизонтали позиционируется по центру. IE до версии 6.0 не поддерживает это значение и горизонтально позиционирует блок по умолчанию, т.е. по нулю.

В следующем шаблоне всё содержимое помещено в блок, позиционированный с отступами

При этом белое поле основного блока представлено как фоновая картинка в body:

background: #73C5E5 [цвет за пределами контента]

url(images/img01.gif) repeat-y center top [позиционированный по центру белый фоновый рисунок].

Позиция фонового рисунка repeat-y center top поддерживается и устаревшей спецификацией.

Вид шаблона при Strict

Вид шаблона при Transitional (блок-контейнер уезжает на левый ноль, фоновая подложка остаётся на определённом для неё месте)

Проблемы с padding, height и border

Я уже писал о трактовке свойства border разными браузерами (см. статью Блоки: IE via Mozilla). В «строгом» режиме это уже не актуально, все браузеры выносят border за пределы заданной ширины/высоты элемента.


Поведение w >

Действие width в браузерах

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

Во всех случаях Firefox действует по спецификации CSS. А именно, ширина блока получается сложением значений width, padding, margin и border.
Содержимое блока, если не помещается в заданные размеры, отображается поверх блока.

Ширина равна значению width.Содержимое блока, если не помещается в заданные размеры, отображается поверх.

Ширина формируется путем сложения значений width, padding, margin и border.
Содержимое блока, если не помещается в заданные размеры, отображается поверх.

Ширина равна значению width плюс padding, margin, и border.
Содержимое блока, если не помещается в заданные размеры, отображается поверх.

Так выглядит блок с указанными параметрами в режиме strict во всех стандартных браузерах (красной пунктирной линией показаны границы блока при «плавающей» вёрстке):

80 15 20 300 20 15 50

А так — в IE в режиме transitional:

80 15 20 20 15 50
300

Нежелательные тэги и атрибуты

Небольшой справочник по устаревшим тэгам и атрибутам, которые при определении strict могут работать криво или никак.

Тэг

Описание

Альтернатива

Вставляет на страницу апплеты, написанные на языке Java (не путать с JavaScript!)

Заменяется универсальным тэгом , вставляющим любые «инородные» объекты.

Задаёт шрифт, размер и цвет текста по умолчанию во всем документе, кроме текста, заключённого в тэг , в котором можно переопределить параметры.

Заменяется определением шрифта в стиле CSS.

Располагает содержимое по горизонтальному центру относительно родительского элемента.

Создаёт список, содержащий названия директорий (системные папки). Работает точно так же, как тэг

    .

Абсолютно логично заменить его тэгом

    .

Задаёт шрифт, размер и цвет текста, заключённого в тэг.

Заменяется определением шрифта в стиле CSS.

Предназначен для поискового индекса в текущем документе. Этого тэга я даже не знал. И так и не понял, как он работает.

Рекомендуется вместо него использовать тэги

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL