html.okpython.net
HTML и CSS для начинающих

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

Основные теги документа

Рассмотрим исходный текст нашей первой веб-страницы (т.е. ее html-структуру) более подробно (см. пример №1). В нашем случае присутствует 11 тегов: <!DOCTYPE html>, <html>, <head>, <!-- Задаем кодировку текста. -->, <meta charset="utf-8">, <title>, </title>, </head>, <body>, </body>, </html>. Большинство из них можно встретить в коде практически любого html-документа, поскольку именно с них и начинается создание html-структуры всей веб-страницы. Рассмотрим эти теги несколько подробнее.

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
	<head>
		<!-- Задаем кодировку текста. -->
		<meta charset="utf-8">	
		<title>Первая html-страница</title>
	</head>

	<body>
		Всем привет от HTML!
	</body>
</html>

Пример №1. Наша первая веб-страница

Тег !DOCTYPE

Тег <!DOCTYPE html> относится к одиночным тегам. Он пишется в первой строчке кода и формирует пустой элемент разметки «!DOCTYPE html», который сообщает браузеру о типе текущего документа. Дело в том, что версий HTML несколько. Поэтому, чтобы браузер мог правильно отобразить документ, необходимо указывать используемую в документе версию языка HTML. Старыми версиями мы пользоваться не будем, а для всех версий HTML, начиная с 5.0, было решено опустить всю лишнюю информацию и в качестве атрибута просто указывать html.

Комментарии в HTML

Как и в любом языке программирования, в HTML принято сопровождать разрабатываемый код комментариями. Для этого служит <тег комментария>, синтаксис которого имеет вид: <!--Текст-->. В нашем случае мы пометили, что в следующем служебном теге будет задана кодировка символов текста документа, которую браузер должен использовать при отображении текста: <!-- Задаем кодировку текста. -->.

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

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

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

Использование одних комментариев внутри других недопустимо. Это может привести к неправильному отображению текста документа или даже полной неработоспособности кода. Кроме того, при использовании комментариев внутри элемента «title» (о нем позже) они будут считаться обычным текстом и будут выведены в заголовке окна браузера.

Неправильное использование комментариев показано в примере №2.

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
	<head>
		<!-- Задаем <!--кодировку--> текста. -->
		<meta charset="utf-8">	
		<title>Неправильное использование комментариев</title>
	</head>

	<body>
		Всем привет от HTML!
	</body>
</html>

Пример №2. Неправильное использование тегов комментариев

Парные теги html, head и body

Теги <html>, <head> и <body> являются представителями парных тегов, т.к. они всегда используются в паре с соответствующими закрывающими тегами </html>, </head> и </body>. Это самые известные теги языка HTML. Они используются при разметке любого html-документа.

Первая пара тегов <html> и </html> формирует контейнер «html», который вмещает все остальное содержимое веб-страницы. Поэтому, открывающий тег <html> пишется сразу же после тега определения типа документа <!DOCTYPE html>, затем записываются все остальные элементы документа, и уже в самом конце ставится закрывающий тег </html>, свидетельствующий об окончании html-документа.

Вторая пара <head> и </head> формирует элемент разметки, называемый заголовком документа (от англ. head – голова). Он располагается после открывающего тега <html> и предназначен для хранения служебных тегов с метаданными, которые сообщают браузеру информацию, необходимую для работы с данными страницы.

Одним из таких служебных тегов является тег <meta charset="utf-8">. Здесь идентификатор charset представляет собой атрибут тега, а строка "utf-8" – значение данного атрибута. Благодаря этому атрибуту, браузер понимает, что при отображении текста необходимо использовать кодировку utf-8, указанную в качестве его значения. Более подробно тег <meta> мы рассмотрим в дальнейшем. Отметим лишь, что он относится к одиночным тегам и, следовательно, используется без закрывающего тега, формируя пустой элемент разметки.

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

Ну, и наконец, третья пара тегов <body> и </body> формирует элемент разметки, называемый телом документа (от англ. body – тело). Тело документа располагают сразу же после заголовка документа. В него помещают всю информацию, которую необходимо вывести на экран, а также теги, отвечающие за форматирование этой информации.

Быстрый переход к другим страницам

▲
▼