Doctype, Html комментарии, тег Title, и т.д.

Сам по себе элемент DOCTYPE служит для объявления типа данного документа и помогает браузеру понять, на какую версию Html или XHTML (по классификации валидатора W3C) ему следует опираться при разборе кода загружаемой веб страницы.

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

Но давайте на этом остановимся чуть поподробнее. Сейчас мы с вами наблюдаем некий дуализм или же два типа документов в сети — как делали раньше до выделения CSS из лона языка Html и как делают сейчас по принятым современным стандартам.

Естественно, что после принятия новых стандартов в сети интернет оставалось все равно огромное множество документов, созданных по старым принципам чистого Html и браузеры должны были с ними как то работать. Корпорация Майкрософт в свое время предложила использовать Doctype из нового языка разметки XML. В языке Html она получила название декларации doctype.

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

Таким образом браузер будет понимать, по каким именно стандартам ему разбирать код документа. Если декларация doctype имеет место быть, то браузер переходит в режим работы по стандартам (standarts mode). Если же декларации doctype браузер не найдет в самом начале документа (или она будет не соответствовать правильному варианту написания), то тогда браузер включит хитрый режим уловок (quirks mode).

Документ не имеющий в своем начале декларации doctype будет отображаться таким образом, как будто бы это браузер очень старый (старинный). Если в этот же документ добавить декларацию, то браузер будет осуществлять разбор кода с учетом всех имеющихся на текущий день стандартов.

Правда, понятие старого браузера очень уж расплывчатое. Все тот же лидер по скорости работы и скорости западания в сердца пользователей Google Chrome (как его установить и настроить) появился то только в 2008 году. У IE (скачать последнюю версию Эксплорера) же естественно история гораздо более долгая, именно поэтому все браузеры в режиме quirks mode (уловок, т.е. когда декларация не была прописана) будут отображать вебстраницу точно так же, как это бы делал старинный IE версии 5.5 (она считается базовой).

Более подробно узнать о том, почему обязательно нужно прописывать Doctype в начале любого веб документа вы сможете из этой статьи про CSS свойства height, width и overflow

Хотя, если вы создаете свой проект на базе какого-либо движка для сайта (CMS), то за правильность формирования Html тега DOCTYPE будет отвечать используемый вами движок, но знать назначение DOCTYPE и варианты его написания все равно лишним, на мой взгляд, не будет. Тэг (декларация) DOCTYPE может выглядеть, например, так:

Если вы читали мою предыдущую статью, то, наверное, поняли, что DOCTYPE в этом случае указывает браузеру на то, что код данного Web документа нужно будет разбирать, опираясь на стандарты языка HTML 4.01. Для поиска нужного вам варианта DOCTYPE вы можете обратиться к описанному в предыдущей статье валидатору W3C, но чтобы там найти что нибудь, нужно точно знать, где это лежит, иначе...

Сайт валидатора W3C не обладает дружественным интерфейсом и интуитивно понятной навигацией. Там вы запросто можете найти DOCTYPE с относительной ссылкой на страницу с описанием нужного вам стандарта Html или XHTML и, вставив такой вариант DOCTYPE к себе на сайт, ничего хорошего не получите:

При таком варианте DOCTYPE браузер будет искать документ с описанием стандарта Html или XHTML на вашем собственном сайте, добавив к относительной ссылке «TR/html4/strict.dtd» доменное имя вашего ресурса: «http://ktonanovenkogo.ru/TR/html4/strict.dtd». В общем, такой DOCTYPE работать не будет и в будущем следует обращать особое внимание на наличие «http://www.w3.org/» в коде вашего DOCTYPE, чтобы не наступить на подобные грабли.

В общем-то существует всего лишь несколько вариантов DOCTYPE для Html и еще несколько для XHTML. Все варианты DOCTYPE вы сможете посмотреть на соответствующей странице валидатора W3C.

Давайте начнем со стандарта языка гипертекстовой разметки 4.01 (Html 5 пока что еще только разрабатывается). Для это случая существует три варианта DOCTYPE: строгий, переходный и с поддержкой фреймов:

1. "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2. "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

3. "-//W3C//DTD HTML 4.01 Frameset//EN"http://www.w3.org/TR/html4/frameset.dtd">

Чаще всего используют второй вариант DOCTYPE для Html (Transitional), т.к. он допускает больше вольностей в написании кода Web документа, ну, а вариант с фреймами вам вряд ли пригодится, в силу неактуальности их использования на сегодняшний день.

Собственно, имеются такие же три варианта DOCTYPE для XHTML — строгий, переходный и с поддержкой фреймов:

1. "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2. "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3. "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Но давайте посмотрим откуда берутся эти варианты правильного написания декларации Doctype. Помните мы в первой статье по Html рассматривали таблицу допустимых Html тэгов:

И отдельную таблицу возможных Html атрибутов:

Как вы можете видеть, в обеих этих таблицах присутствует столбец «Depr», в котором буквой «D» помечены устаревшие и не рекомендуемые к применению теги и атрибуты языка гипертекстовой разметки Html. Это мы с вами уже рассмотрели. Но обратите внимание, что напротив каждой буквы «D» в соседнем справа столбце «DTD» стоит либо буква «L» (Loose DTD), либо буква «F» (Frameset DTD).

Т.о. все Html теги и атрибуты, которые не помечены буквами «D» (не рекомендуемые) входят в строгую декорацию Doctype (только рекомендованные Html элементы и ничего более). Если же вы все таки будете допускать использование не рекомендованных тегов и атрибутов языка Html (они помечены литерой «D»), то нужно будет объявлять для таких документов декларацию Doctype переходную.

Некоторые элементы и атрибуты помеченные в столбце «DTD» буквой «F» (FRAME, FRAMESET) будут входить в декларацию Doctype для фреймовых структур. Фреймовая декларация Doctype базируется на основе переходной, к которой добавляются теги и атрибуты для создания фреймов.

А теперь давайте попробуем разобраться, а из каких частей состоит декларация Doctype?

Сначала идет название декларации — «Doctype». Тут, я думаю все понятно. Дальше идет «Html» — корневой элемент данного языка разметки (все теги в Html пишутся внутри корневого тега «Html» — это вы, надеюсь, помните). Затем идет указание — публичная данная декларация Doctype или же системная. Все декларации Doctype являются публичными, что обозначается словом «PUBLIC».

А дальше идут два идентификатора документа. Первый из них называется публичным идентификатором декларации Doctype («-//W3C//DTD HTML 4.01//EN»). Минус означает то, что данная декларация не зарегистрирована в стандарте ИСО. Затем следует название консорциума, название декларации и язык, на котором она написана. Во втором идентификаторе указывается путь до файла строгой декларации.

Ну, а теперь давайте раскрою вам всю правду про Doctype. Браузерам важно только формально правильное написание декларации Doctype, но они ни в коем разе не полезут на сайт консорциума, чтобы скачать файл декларации. Даже если вы выберите вариант строгой декларации и при этом будете использовать не рекомендуемые в современной версии Html теги и атрибуты, то любой браузер все равно вас правильно поймет — это факт проверенный и подтвержденный.

Поэтому, чтобы не мудрствовать лукаво, в Html 5 декларация Doctype будет выглядеть уже вот так:

И все. Оставили только «Html». И несмотря на то, что Html 5 еще не полностью внедрен, данный вариант декларации Doctype поддерживается всеми браузерами и вы можете смело им пользоваться. О как, а вы говорите...

Html комментарии в Web документе и тег Title

В служебной области Web документа (между тэгами Head) обязательно должен быть прописан заголовок этого самого документа (веб страницы), заключенный в Html теги Title (см. на приведенном рисунке).

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

Про то, насколько важны слова, заключенные в теге Title для будущего успешного продвижения проекта, вы можете узнать из статьи Как раскрутить сайт самому, а про то, как прописать нужные вам слова в Title для Joomla и WordPress, вы узнаете из статьи Самостоятельное продвижение, оптимизация и раскрутка сайта.

Содержимое метатега Title будет отображаться вверху окна браузера пользователя и в поисковой выдаче Google и Яндекса, поэтому помимо содержания в нем ключевых слов, Title должен стимулировать пользователей перейти именно на ваш сайт из поисковой выдачи. Для каждой страницы вашего сайта заголовок Title должен быть уникальным, иначе будет ухудшение в ранжировании вашего проекта (Релевантность и ранжирование).

Теперь давайте прежде, чем переходить к рассмотрению конкретных тегов, остановимся на таком понятии, как комментарии в Html коде. Комментарии часто проставляются в Html коде для того, чтобы потом было проще найти нужные участки кода или же для того, чтобы другим было проще понять задумку автора. Само собой разумеется, что текст Html комментариев ни в коем случае не должен отображаться на веб странице, поэтому комментарии специальным образом оформляются в коде.

Особенно актуальны Html комментарии были во времена господства табличной верстки (теги html таблиц), ибо тогда, по сравнению с современной блочной версткой (Div верстка в Html), очень просто было запутаться, что и в какой ячейке таблицы выводится:

"картинка">  Меню сайта:   Наверное, из приведенного выше примера вы уже поняли, что все Html комментарии начинаются точно так же, как и любые другие элементы языка гипертекстовой разметки — с угловой скобки, но сразу же после открывающей угловой скобки, при формировании комментария в Html коде, нужно будет поставить восклицательный знак (при описании DOCTYPE я упоминал, что комментарии в Html тоже являются декларациями, которые обязательно начинаются с ) и два дефиса, а перед закрывающей угловой скобкой комментария нужно будет поставить еще пару дефисов: Весь текст комментария, который будет находиться между этими двойными дефисами, будет рассматриваться браузерами как служебная информация и никак обрабатываться не будет. Корректность написания Html комментария можно наглядно оценить при использовании какого-либо редактора с подсветкой кода, например, того же notepad++: Но внутри комментария можно размещать не только текст, но и все что угодно. Например, довольно часто в комментарии заключается часть Html кода (называется — закомментировать) и этот участок кода браузерами обрабатываться не будет. Комментарий можно будет открыть на одной строке Html кода, а закрыть хоть через сотню строк, и заключенный таким образом в элементы оформления комментария кусок кода для браузера просто перестанет существовать. Все довольно просто и, думаю, что с комментариями в коде Web документа у вас проблем не возникнет. Хотя есть одна тонкость в работе с многострочными комментариями в Html. Внутрь одного Html комментария нельзя помещать другой комментарий, иначе часть закомментированной информации может быть отображена браузером на веб странице. Давайте для примера рассмотрим такую конструкцию включенных друг в друга комментариев:   продолжение внешнего коммента--> Итак, браузер при разборе кода веб страницы обнаружит открывающий синтаксис декларации комментария  и найдет его после слов «Вложенный комментарий», а вот все остальное (в нашем случае это продолжение внешнего коммента-->будет обработано браузером и выведено на веб странице. В принципе, если вы пользуетесь при написании Html кода редактором с подсветкой, то вы сразу же заметите неладное по изменению цвета вашего комментария: Понятие блочных и строчных Html тегов Все теги, которые возможно использовать внутри элементов Body (то, что отображается на веб странице и список которых вы можете найти в валидаторе W3C), можно разделить на две группы: строчные и блочные теги. Блочные элементы используются для построения структуры Web документа, а строчные используются для оформления кусков текста (строк). Причем, всегда нужно соблюдать одно незыблемое правило — не заключать внутрь строчных элементов Html кода блочные теги. Самыми яркими и показательными представителями строчных и блочных тэгов являются соответственно Div (блочный элемент — отсюда и пошло название блочной верстки) и Span (строчный элемент). Эти теги языка гипертекстовой разметки являются парными, т.е. у них есть открывающий и закрывающий тэг. Вообще, теги Div и Span не имеют абсолютно никакого предназначения и смысла в чистом Html без использования таблиц каскадных стилей CSS. Они являются контейнерами, позволяющими изменять свойства заключенных в нем элементов через CSS. Если вы пропишите в коде Web страницы подряд несколько элементов Div, то на веб странице каждый из них, скорее всего, попытается занять все доступное ему пространство по ширине и поэтому расположены такие элементы Div (контейнеры) будут друг под другом. Контейнеры Div при нормальных условиях рядом друг с другом стоять не будут, если принудительно не заставить их делать это. Например, такой вот Html код будет отображаться в трех блоках расположенных друг под другом: DOCTYPE для Html и Xhtml    Title и комментарии в Web документе    Содержимое третьего блочного тэга В браузере Firefox наряду с очень полезным плагином Firebug я еще использую плагин Web developer, который очень помогает при верстке. Среди всего прочего Web developer может показывать блочные элементы, обводя их рамочной. Именно плагин Web developer создал синие рамочки вокруг контейнеров Div. В теги же Span можно заключать куски текста (строки) Html кода для придания им определенных свойств через CSS и такие элементы могут размещать в одной строке рядом друг с другом. Например, такой вот код в браузере будет иметь следующий вид: DOCTYPE в Html   Комментарии в Html   Содержимое третьего строчного тега Содержимое тегов Span здесь тоже было подсвечено с помощью плагина Web developer. Т.к. элементы Span являются строчными, то не следует внутрь них заключать блочные теги, например, все те же Div контейнеры. You should also read: сентябрь 1, 2012 Как назвать фирму, сайт, ооо, и т.д. Full Story