Структура html-документа
belarusweb.net
© Петр Романовский Минск, 2016-2018.



belarusweb.net
Основы создания сайтов...

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

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

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

Тег !DOCTYPE

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Видеоуроки по курсу HTML

Комментарии (2)

Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Luka StarZzz
Здравствуйте. Не подумайте, что я придираюсь, мне очень нравится ваш материал и как вы его преподносите. Мне тоже хотелось бы дать вам один совет, дабы сделать ваш проект еще качественнее. По сути это мелочь, но вот мне например не хватает кнопки перейти к следующему уроку из текущего. Все таки это удобнее чем заходить отдельно в учебник и там искать нужный мне урок. Еще раз спасибо за отличный материал.
№125 от 2018-02-08 22:14:39
Нравится ()
Ответить
Петр Романовский
Luka StarZzz
Luka StarZzz
Здравствуйте. Не подумайте, что я придираюсь, мне очень нравится ваш материал и как вы его преподносите. Мне тоже хотелось бы дать вам один совет, дабы сделать ваш проект еще качественнее. По сути это мелочь, но вот мне например не хватает кнопки перейти к следующему уроку из текущего. Все таки это удобнее чем заходить отдельно в учебник и там искать нужный мне урок. Еще раз спасибо за отличный материал.
2018-02-08 22:14:39
Luka StarZzz, тут вы правы! Постараюсь в самое ближайшее время сделать.
№126 от 2018-02-09 05:08:15
Нравится ()
Ответить
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!