В первой части статьи мы увидим структуру HTML-документа, узнаем что такое декларация типа документа и разберём несколько основных тегов заголовка HTML-страницы, таких как meta и title. Условно, HTML-документ можно поделить на две составляющие:

  • Объявление типа документа (Document type declaration (DTD));
  • Тег HTML (HTML-страница).

Пример простого HTML-документа (на основе принятого стандарта HTML 5):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Заголовок страницы</title>
</head>
<body>
</body>
</html>

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

Например, для старой версии HTML 4.01 доктайп выглядит так:

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

А для последней версии (HTML 5) уже намного проще:

<!DOCTYPE html>

Простейшая HTML-страница состоит как минимум из трёх тегов:

  1. Тег html — это контейнер, в котором находится всё содержимое страницы, включая теги head и body. Как правило, тег html идёт в документе вторым после доктайпа.
  2. Тег head предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Содержимое этого тега не отображается напрямую.
  3. Тег body предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера.

Чтобы вам было понятно, представьте, что HTML-документ – это человек. Каждый из вас имеет простейший идентификатор – это ваше Имя. То же самое и с HTML-документом. За это отвечает доктайп. У каждого из вас есть скелет, в HTML-странице – это тег html, который состоит из головы – тег head (информация внутри него визуально невидима для пользователей). По аналогии – это ваша голова, где хранятся ваши мысли и обрабатывается разная информация (невидимые для других) и тег body (информация внутри него визуально видима для пользователей). Это остальная часть вашего скелета – тело, видимое для других. 

А на этом первая часть статьи о структуре HTML-документа завершается.

P.S.: Увидимся в следующей части.