Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

Структура HTML-документа

В этом уроке вы узнаете общую структуру HTML-документов и создадите свою первую страничку. Для начала посмотрите на следующий пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Моя первая HTML-страница</title>
</head>
<body>

<p>Здравствуйте!</p>

</body>
</html>

В этом примере показан тот минимум HTML-тегов, который необходим для создания полноценной веб-страницы. Кстати заметьте, что вы уже не смотрите на код, извините, «как баран на новые ворота», не правда ли? Вы уже вполне можете определить, где какой тег начинается и заканчивается, увидеть их вложенность и отличить теги от атрибутов. А теперь давайте разберем HTML-код поподробнее и начнем со второй строки примера (о первой поговорим позже).

Тег <HTML> или корневой элемент веб-страницы

Тег <HTML> является предком всех тегов HTML-документа, его еще часто называют корневым элементом. Вне этого элемента не должно появляться ни одного тега, а сам он может содержать теги <HEAD> и <BODY>, причем каждый только в единственном числе. Помните, что значит «содержать»? Совершенно верно, это значит, что только эти два тега могут находиться внутри <HTML> на первом уровне вложенности, а уже внутри них должны располагаться остальные теги HTML-страницы, что и отображено в примере.

Тег <HEAD> или «шапка» HTML-страницы

Внутри тега <HEAD> находятся различные служебные теги, которые указывают кодировку веб-страницы, ее заголовок и так далее, очень часто его называют «шапкой» документа. Информация, находящаяся внутри этого элемента предназначена в основном для браузеров (Internet Explorer, Opera и т.п.) и поисковиков (Яндекс, Google и т.п.), поэтому она никак не отображается на странице (за исключением текста в теге <TITLE>).

Тег <META> — указываем кодировку документа

В нашем примере тег <META> отвечает за указание кодировки HTML-документа. Он является одним из семейства тегов иначе называемых метатегами, о которых мы поговорим с вами в других уроках. А пока просто ставьте его, как показано в примере, внутри элемента-контейнера <HEAD>.

Тег <TITLE> или заголовок документа

<TITLE> является одним из самых полезных HTML-тегов, он указывает заголовок страницы, который имеет целый ряд функций. Например, его видно в названии окна и вкладки браузера, а поисковые системы показывают заголовки в первых строчках каждого результата запроса.

Каждая страница должна иметь только один заголовок, соответственно и тег <TITLE> должен быть на странице только один и только внутри элемента <HEAD>.

Пример отображения заголовка в браузере Internet Explorer.

Заголовок HTML-страницы в браузере Internet Explorer

В поисковой системе Яндекс.

Заголовок HTML-страницы в поисковой системе Яндекс

Тег <BODY> или тело документа

Тег <BODY> является контейнерным элементом, между открывающим и закрывающим тегами которого находятся все те элементы, которые мы видим на странице, поэтому его и называют телом HTML-документа.

У тега <BODY> есть одно очень важное правило — он должен содержать элементы уровня блока и не может содержать встроенные элементы (уровня строки). Многие учебники, которые я видел, никогда не заостряют на этом внимание, но мы-то с вами хотим изучить правильный HTML, верно? Кстати, вы помните, что такое блочные и встроенные элементы? Блочные создают впереди и после себя перенос строки в начало, а встроенные отображаются на одной строке.

В двух следующих примерах используется тег P — блочный тег абзаца и I — встроенный тег, выделяющий текст курсивом.

Пример правильного указания тегов

<body>
<p><i>Учим правильный HTML!</i></p>
</body>

Неправильное использование тегов

<body>
<i><p>А вот такой порядок тегов неверный!</p></i>
</body>

Вообще, подобные правила есть у каждого HTML-тега, а не только у <BODY>, поэтому вы конечно спросите: «А как же мы узнаем — какие теги может содержать элемент, а какие нет»? Все очень просто: во-первых, в этом учебнике я всегда вам буду это подсказывать, а во-вторых — в справочнике по HTML-тегам эта информация есть по каждому тегу. И поверьте, когда вы закончите обучение, то будете «на автомате» писать грамотный HTML, уж я об этом позабочусь. :)

Тег <!DOCTYPE> или выбираем версию HTML

А теперь пора вернуться к первой строке примера, тегу <!DOCTYPE>. И первое, что вам нужно понять — этот тег не входит в состав самого HTML-документа, поэтому он и вынесен за пределы тега <HTML>. А нужен он для того, чтобы браузер понял, к какой версии HTML относится созданная вами страничка. Если же <!DOCTYPE> не указать, то браузеры решат, что вы используете очень старую версию HTML и могут показать страницу так «криво», что вам и в страшном сне не привидится, поэтому пишите его всегда.

Существует три версии языка HTML 4.01, который мы будем с вами изучать, каждой из них соответствует свой Доктайп. Итак:

HTML 4.01 Strict (строгое соответствие синтаксису языка)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional (переходный синтаксис языка)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset (переходный синтаксис языка плюс использование фреймов)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "https://www.w3.org/TR/html4/frameset.dtd">

HTML 4.01 Strict является самой строгой версией HTML, в нем недопустимы никакие ошибки синтаксиса, например ошибки вложенности тегов.

HTML 4.01 Transitional — это более лояльная версия, которая спокойно переносит многие ошибки кода. НО! Когда я думал над тем, какому же языку учить в данном учебнике, то решил, что это будет именно строгая версия. Так как лучше учиться сразу правильно, чем потом переучиваться.

<!DOCTYPE> расположенный последним в списке указывается, когда на странице применяются фреймы. На самом деле фреймы — это такая головная боль, что сегодня их никто не использует, поэтому и в данном учебнике по HTML они рассматриваться не будут. Если когда-нибудь станет интересно, то сможете почитать о них в справочнике.

Вообще, существует еще несколько версий HTML, например XHTML. Но отличия синтаксиса XHTML от HTML настолько минимальны, что их можно перечислить по пальцам рук, еще и свободные останутся. :) Причем часть этих отличительных особенностей большинством вебмастеров вообще не используется. Другими словами, если вы освоите HTML 4.01, то вам уже не надо будет изучать XHTML, совсем. Прочитаете о нем разок, потратив пару часов, и все. Еще есть HTML 5, который находится в разработке, пока не утвержден и постоянно изменяется разработчиками W3C, но в нем вообще просто добавится несколько новых тегов и атрибутов.

Создаем свою первую HTML-страницу

Вот и пришло время создания вашей первой HTML-страницы. Как я уже говорил, в этом учебнике я буду использовать текстовый HTML-редактор «Notepad++». Открыв его, вы увидите уже до боли знакомые вам по другим текстовым редакторам (например, Microsoft Word или OpenOffice Writer) строки меню. Если меню на английском языке, то смените его на русский, выбрав: Settings → Preferences → General → Localisation → Русский.

Теперь напишите в редакторе пример, который показан в начале этого урока и нажмите «Сохранить».

Создание страницы в HTML-редакторе

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

Атрибуты HTML-тегов← Содержание →Параграфы и заголовки