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

Влад Мержевич

Слово HTML представляет собой сокращение от HyperText Markup Language — язык разметки гипертекста. В основном, HTML-документ является простым текстовым файлом, который содержит текст и ничего больше. Так что создавать веб-страницы можно в любом текстовом редакторе.

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

Для обозначения тегов используется символ <тег>. Теги бывают двух видов: парные, которые выделяют блок текста, также называются еще контейнером (пример 1) и одиночные. Контейнер требует закрывающего тега, обозначаемого </тег>. Теги нечувствительны к регистру, поэтому запись и эквивалентна.

Пример 1. Использование парных тегов (контейнера)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Контейнеры</title>
</head>
<body>

Жирный шрифт в тексте.

</body>
</html>

Поскольку одновременно можно использовать любое разумное сочетание тегов, следует помнить об их вложенности (пример 2). Один контейнер должен находиться внутри другого, и никак не пересекаться (пример 3).

Пример 2. Правильное сочетание тегов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Вложение тегов</title>
</head>
<body>

Полужирный курсивный текст

</body>
</html>

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

Пример 3. Неправильное сочетание тегов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Ошибка во вложении тегов</title>
</head>

<body>

Полужирный курсивный текст

</body>
</html>

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

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

Все нормальные веб-страницы состоят из двух разделов — заголовка (<HEAD>) и тела документа (<BODY>). Раздел заголовка может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице. Тело документа предназначено для размещения тегов и содержательной части (пример 4).

Пример 4. Простейший HTML-документ

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

</head>

<body>

</body>
</html>

DOCTYPE

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 1. приведены основные типы документов с их описанием.

Табл. 1. Допустимые DTD
DOCTYPE	Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">	Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">	В HTML-документе применяются фреймы.
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">	Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">	Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам.

Раздел заголовка документа (<HEAD>)

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

Заголовок страницы (тег <TITLE>)

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

CSS (Cascading Style Sheets, Каскадные таблицы стилей)

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

Метатеги (тег <META>)

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

Скрипты

Скриптом традиционно называют программу, которая внедряется в тело веб-страницы и выполняет на ней определенные действия. Распространенным языком программирования для написания скриптов является JavaScript.

Порядок тегов в заголовке документа особого значения не имеет.

Тело документа (<BODY>)

Тело документа предназначено для отображения данных на веб-странице, в частности, в теле размещается текст, изображения, ссылки, таблицы, списки и т.д.

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

Комментарии начинаются тегом . Все, что находится между этими тегами отображаться на веб-странице не будет.

Статья опубликована: 27.06.2005

Последнее обновление: 19.02.2008

Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.

Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
Потренироваться в написании комментариев вы можете в песочнице.

Комментарии к статье

Марго.

07.07.2007

Слишком замудр?но.Тяжело для понимания.((

deda

13.07.2007

Марго, все элементарно!
просто начинать всегда трудно, приложите усилия)

09.08.2007

Согласен, все просто просто надо вдуматся, читал сначала о том же на другом сайте, щя прочитал здесь и все понял

OZH

11.09.2007

Для начала неплохо. Но я бы изложил бы иначе.

Во-первых, тег --- это комманда, которая сообщает браузеру о том, что имеется некоторый специальный объект, который надо отобразить. Это и есть разметка: пометить некоторые фрагменты текста определ?нными параметрами.

Не понял фразу: "Хотя тег <META> всего один, он имеет множество параметров, поэтому для его обращения применяется множественное число."

Могу попробовать изложить тоже самое своими словами на св?м сайте. Вы не против?

Влад Мержевич

13.09.2007

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

Про метатеги почитайте здесь
http://htmlbook.ru/content/?id=3

Григорий

13.02.2008

Оказывается вс? гораздо легче чем я предполагал)))

Александр

21.03.2008

Понятно, лаконично, спасибо

Konstantinpr

24.03.2008

Люди добрые, спасите, пожалуйста. Такая проблема. Есть много страниц. На всех этих страницах присутствуют одни и теже ссылки-изображения.Можно ли вынести их во внешний файл,так чтобы изменив их в одном файле - они изменялись на всех страницах сразу.
document.write(""). Такая конструкция во внешнем файле работает только с простым текстом и не хочет работать с изображениями и ссылками. Кто сталкнулся с подобной проблемой. Выручите!

Диман

31.03.2008

Использование SSL решает данную проблему, только сервер должен поддерживать его.

Yellowcat

03.04.2008

По поводу DOCTYPE
когда я прописываю так:
<!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 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
мои страницы отображаются не корректно и похоже css перестает читаться.
Почему так?

ExtraBrain

03.04.2008

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

Yellowcat

04.04.2008

Отлично

Спасибо

Проценты я не использую... так что теперь я спокойна

Дмитрий (Doka)

19.04.2008

Вс? элементарно и просто. Спасибо.

rodnoy

03.05.2008

Yellowcat
03.04.2008
"По поводу DOCTYPE..."
Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

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

melok

22.05.2008

Отличная статья, как и весь сайт

Супер!!!

25.07.2008

Супер!!!

YenPrior

29.07.2008

Отличный сайт, отличная статья. Большое спасибо.

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

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

DOCTYPE

Раздел заголовка документа (<HEAD>)

Заголовок страницы (тег <TITLE>)

CSS (Cascading Style Sheets, Каскадные таблицы стилей)

Метатеги (тег <META>)

Скрипты

Тело документа (<BODY>)

Комментарии

Комментарии к статье

Добавить комментарий