Doctype, Html комментарии, тег Title, а так же понятие блочных и строчных элементов (тэгов)

Рубрика: Html для чайников

Здравствуйте уважаемые читатели блога KtoNaNovenkogo.ru. Я хочу продолжить рассказывать об основах работы с Html с самого начала, последовательно и ничего не опуская. Сегодня мы поговорим о специальном теге (декларации) DOCTYPE, узнаем как правильно оформлять комментарии в Html коде, как прописывать заголовок веб документа Title и постараемся разобраться в отличиях блочных и строчных тэгов элементов).

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

Правильный тег DOCTYPE (Html, Xhtml и Html 5)

Первым элементом языка гипертекстовой разметки, который вы встретите в любом правильном Web документе (странице сайта), будет специальный тэг DOCTYPE, который будет содержать в самом начале запись !doctype html public. Точнее говоря, DOCTYPE — это не совсем обычный тег, а так называемая декларация, ибо он начинается с угловой скобки и проставленного сразу же за ней восклицательного знака <!. В этой статье, кроме декларации под названием DOCTYPE, мы еще рассмотрим декларацию, которая называется Html комментарий.

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

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

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

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

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

<!DOCTYPE HTML>

Таким образом браузер будет понимать, по каким именно стандартам ему разбирать код документа. Если декларация 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 HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "TR/html4/strict.dtd">

При таком варианте 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.

doctype для (X)HTML

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

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

doctype html public

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

Doctype в Html 5

Как вы можете видеть, в обеих этих таблицах присутствует столбец «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
 PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

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

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

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

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

<!DOCTYPE HTML>

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

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

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

doctype html public

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

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

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

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

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

<table border=0  width=10%>
<!--Html комментарий, подсказывающий, что здесь начинается какая-то таблица-->
 <tr>
 <td>
 <img src=image.png alt="картинка"><br>
<!--Html комментарий, подсказывающий, что здесь начинается колонка-->
 <FONT COLOR=white>Меню сайта:</FONT>
<!--Комментарий, говорящий о том, что здесь колонка заканчивается-->
 </td>

Наверное, из приведенного выше примера вы уже поняли, что все Html комментарии начинаются точно так же, как и любые другие элементы языка гипертекстовой разметки — с угловой скобки, но сразу же после открывающей угловой скобки, при формировании комментария в Html коде, нужно будет поставить восклицательный знак (при описании DOCTYPE я упоминал, что комментарии в Html тоже являются декларациями, которые обязательно начинаются с <!) и два дефиса, а перед закрывающей угловой скобкой комментария нужно будет поставить еще пару дефисов:

<!-- Текст комментария в Html коде -->

Весь текст комментария, который будет находиться между этими двойными дефисами, будет рассматриваться браузерами как служебная информация и никак обрабатываться не будет. Корректность написания Html комментария можно наглядно оценить при использовании какого-либо редактора с подсветкой кода, например, того же notepad++:

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

Все довольно просто и, думаю, что с комментариями в коде Web документа у вас проблем не возникнет. Хотя есть одна тонкость в работе с многострочными комментариями в Html. Внутрь одного Html комментария нельзя помещать другой комментарий, иначе часть закомментированной информации может быть отображена браузером на веб странице. Давайте для примера рассмотрим такую конструкцию включенных друг в друга комментариев:

<!--Начало  Html комментария <!-- Вложенный комментарий -->  продолжение внешнего коммента-->

Итак, браузер при разборе кода веб страницы обнаружит открывающий синтаксис декларации комментария  и найдет его после слов «Вложенный комментарий», а вот все остальное (в нашем случае это продолжение внешнего коммента--> будет обработано браузером и выведено на веб странице. В принципе, если вы пользуетесь при написании Html кода редактором с подсветкой, то вы сразу же заметите неладное по изменению цвета вашего комментария:

Понятие блочных и строчных Html тегов

Все теги, которые возможно использовать внутри элементов Body (то, что отображается на веб странице и список которых вы можете найти в валидаторе W3C), можно разделить на две группы: строчные и блочные теги. Блочные элементы используются для построения структуры Web документа, а строчные используются для оформления кусков текста (строк). Причем, всегда нужно соблюдать одно незыблемое правило — не заключать внутрь строчных элементов Html кода блочные теги.

Самыми яркими и показательными представителями строчных и блочных тэгов являются соответственно Div (блочный элемент — отсюда и пошло название блочной верстки) и Span (строчный элемент). Эти теги языка гипертекстовой разметки являются парными, т.е. у них есть открывающий и закрывающий тэг. Вообще, теги Div и Span не имеют абсолютно никакого предназначения и смысла в чистом Html без использования таблиц каскадных стилей CSS. Они являются контейнерами, позволяющими изменять свойства заключенных в нем элементов через CSS.

Если вы пропишите в коде Web страницы подряд несколько элементов Div, то на веб странице каждый из них, скорее всего, попытается занять все доступное ему пространство по ширине и поэтому расположены такие элементы Div (контейнеры) будут друг под другом. Контейнеры Div при нормальных условиях рядом друг с другом стоять не будут, если принудительно не заставить их делать это. Например, такой вот Html код будет отображаться в трех блоках расположенных друг под другом:

<div>DOCTYPE для Html и Xhtml</div>
  <div>Title и комментарии в Web документе</div>
  <div>Содержимое третьего блочного тэга</div>

В браузере Firefox наряду с очень полезным плагином Firebug я еще использую плагин Web developer, который очень помогает при верстке. Среди всего прочего Web developer может показывать блочные элементы, обводя их рамочной. Именно плагин Web developer создал синие рамочки вокруг контейнеров Div.

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

<span>DOCTYPE в Html</span>
  <span>Комментарии в Html</span>
  <span>Содержимое третьего строчного тега</span>

Title html

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

Под конец статьи не хочу начинать рассматривать базовые блочные и строчные теги в Html, поэтому позволю себе отложить это до следующей статьи из раздела Учебник Html и CSS.

У Евгения Попова имеется видекурс по PHP+MySQL, который стоит того, чтобы с ним ознакомиться.

Можете посмотреть бесплатные видеоуроки по Html и CSS, а так же можете ознакомиться с другими статьями:

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Робот считает, что Вам это тоже может быть интересно:

Очень обяжете, если воспользуетесь этим блоком кнопок:

Рубрика : Html для чайников

Наверх

Комментарии

8-06-2011 в 15:05

хех, спасибо, красиво описано. Я тоже решил уроки сделать

CLASSIK

8-06-2011 в 15:21

Статья хорошая и полезная, в принципе пишете Вы как всегда качественно.

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

Например:

1.как сделать обтекание картинки текстом слева;

2.как сделать конкретный участок фона другого цвета, под цвет контекстной рекламы;

3.как сделать подписку на e-mail в стиле вашей, прописав «введите Ваш e-mail» внутри окошка ввода?

Если можете, осветите в будущем и конкретно эти вопросы.

andrew87

9-06-2011 в 7:41

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

Светлана

9-06-2011 в 11:54

Спасибо, очень полезная статья. И кстати не движок отвечает за ДОКТАЙПЫ, а шаблон. Однажды выявил, что у меня неправильные ДОКТАЙПЫ, а на некоторых страницах так вообще нет. Во всяком случае так было на одном из шаблонов WordPress, как у других движков не знаю.

san4izl

9-06-2011 в 21:50

Статейка наверняка придется по нутру в первую очередь новичкам)

Kiril

10-06-2011 в 9:11

Вложенный комментарий — удивился если бы такое работало!)

В этом даже логики нет.

Nyukers

11-06-2011 в 10:23

Отличная статья, которая кстати пригодится не только новечкам))

Яна

27-06-2011 в 12:02

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

Дмитрий, а почему такой ужасный порядок следования статей в теме « Html для чайников»?

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

Yagron

4-07-2011 в 18:24

Для начинающих, наверное проще всего для верстки страницы использовать лучше всего редактор.

mixac

24-10-2011 в 23:22

достаточно. Главное что бы этот элемент был... а на остальное браузерам плевать...

PC. так себе статья, много слов о ненужном и очень мало о нужном...

Кирилл

6-02-2012 в 14:31

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

Галина

23-04-2012 в 15:19

Если просто прописать без всяких html, один и все. Что это будет значить?

вика

Написать

Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте