Вернуться ко всем урокам
html
Структура HTML документа
HTML
Обновлено
18.08.2023
Просмотров
468
Время прочтения
15 мин.
Сложность
Любая веб страница, независимо от её внешнего вида, функциональности и прочего, имеет одинаковую базовую структуру. Пример простой страницы представлен ниже:
<!DOCTYPE html>
<!-- это комментарий -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример веб страницы</title>
</head>
<body>
<h1>Заголовок веб страницы</h1>
<p>Обыкновенный абзац из нескольких слов.</p>
<img src="images/mountains.jpg" alt="красивое изображение">
</body>
</html>
Вы можете создать разметку html документа довольно быстро, воспользовавшися универсальной функцией, которая есть в любом редакторе кода. Вам необходимо открыть файл с расширением .html или .htm , либо выбрать в редакторе кода синтаксис HTML. После этого достаточно в пустом документе ввести восклицательный знак и нажать клавишу TAB. Редактор кода создаст разметку по умолчанию. На скриншоте пример работы Sublime Text 3 с установленным плагином Emmet:
Первый элемент это всегда <!DOCTYPE>. Мы уже немного говорили об этом и выяснили, что он указывает браузеру на версию языка html, которая используются на текущей веб странице. Останавливаться на этом нет смысла, т.к. вы должны использовать в своей работе только HTML 5 и соответствующий доктайп <!DOCTYPE html>. Другие версии, которые вы ещё можете встретить — это HTML 4.01, XHTML 1.0.
Следующий тег <html> определяет начало и конец документа. Кроме доктайпа, тега html и комментариев в документе на этом уровне не могут находиться другие теги или текстовые узлы. Всё, что вы поместите вне тега html, при обработке файла браузером будет автоматически перемещено внутрь этого тега, как в примере:
Я намеренно разместил <p> и <img> вне документа, чтобы продемонстрировать работу браузера. Итоговая разметка, которая отображается для пользователя, видна в окне разработчика справа. Как видим, браузер Google Chrome при обработке веб страницы переместил всё не только внутрь <html>, но ещё и сразу внутрь <body>.
Это произошло потому, что внутрь тега <html> допустимо вкладывать только два других тега — <head> и <body>. Всё, что будет находиться внутри <html> кроме этих тегов, будет также перемещено либо в head, либо в body (поведение разных браузеров в таких случаях может отличаться). В любом случае браузер будет пытаться сделать разметку валидной. Ещё один пример:
Во втором случае мы поместили теги <p> и <img> внутрь <html>, но вне <body>. Браузер исправил нашу ошибку. Мы, однако, не должны допускать такого поведения и должны внимательно следить, чтобы содержимое в нашем файле всегда находилось там, где оно может находиться.
Следующий тег <head> это «голова» веб-страницы. Здесь находится важная информация, которая, однако, не отображается непосредственно в окне браузера (за исключением заголовка <title>, который является названием вкладки открытого сайта). Здесь размещаются meta теги, например определяющие кодировку документа:
<meta charset="UTF-8">
А также определяющие, как браузеру отображать веб страницу на устройствах с различной шириной экранов — масштабировать страницу или адаптировать её под размер экрана:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> является основным заголовком веб страницы и позволяет пользователю сразу понять, что это за вкладка, с которой он работает. Также этот заголовок крайне важен для поисковых роботов Google, Yandex и др. Содержимое тега будет отображено во вкладке браузера:
Вы можете обратить внимание на отсутствие иконки у веб страницы рядом с заголовком вкладки (эта иконка называется фавиконкой, favicon). Это нормально для столь простой страницы-примера. Фавиконку мы можем добавить в любой момент, но это пока что нам не нужно.
Кроме указанных тегов в <head> могут помещаться теги, подключающие файлы CSS и шрифты (тег <link>), описывающие CSS правила (тег <style>), подключающие файлы или описывающие логику Javascript (тег <script>). Более подробно о каждом теге будет рассказано в следующих уроках.
Тег <body> это основное содержимое страницы, отображаемое для пользователя. Именно сюда помещаются заголовки, тексты, изображения и пр. Это, однако, не исключает того, что здесь же могут быть подключены стили CSS и Javascript код, которые важны для страницы, но не видны для пользователя.
Тег <h1> это заголовок первого уровня. Он используется для заглавия раздела, статьи, блока на странице. Текстовый абзац <p> и изображение <img> необходимы для размещения соответствующего контента. Это теги, которые вы будете в дальнейшем постоянно использовать в работе, и о каждом из них обязательно будет рассказано. Пока что стоит обратить внимание на то, что в самом конце документа находятся закрывающие теги </body> и </html>. Они показывают, что тело документа и веб страница закончились.
Что необходимо запомнить по итогу этого урока: в HTML есть определённые правила размещения тегов, и их всегда следует соблюдать. Первый тег это всегда доктайп, второй <html>, внутри которого <head> и <body>. Внутрь <head> помещаем то, что не нужно отображать напрямую пользователю. Внутрь <body> помещаем весь видимый контент. Пока что этих правил достаточно, по мере изучения веб разработки вы узнаете и об остальных правилах.
