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

В этой статье мы рассмотрим структуру HTML документа и познакомимся с разными частями веб-страницы.

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

В HTML4 веб-страница состоит из трёх главных частей:

  1. Объявление типа документа (Document type declaration (DTD)) сверху;
  2. Тег HTML, включающий в себя следующие элементы:

1. Головную часть (Head);
2. Тело (Body):

html-document-structure

Посмотрите на пример, приведенный выше. Заметили красный и черный текст? Черным обозначено содержимое, а красным — теги из которых состоят элементы:

html-element

Объявление типа документа (1)

Первая строка в примере структуры HTML — не элемент, а объявление типа документа (также называемое декларацией DOCTYPE). Оно предоставляет информацию о версии HTML-документа и указывает браузерам спецификацию HTML. Правильный документ объявляет, какая версия языка используется.

Посмотрите: Информация о DOCTYPE

Элемент HTML (2)

Весь документ содержится в элементе html. Он часто называют корневым, и он не может находиться внутри любого другого элемента. Используется и в HTML, и в XHTML документах.

Внутри элемента html документ разделяется на «голову» (head) и «тело» (body).

Элемент Head (3)

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

Элементы Meta (4)

Элемент структуры сайта HTML meta внутри head предоставляют информацию о метаданных. Meta-элемент может содержать разные виды информации. В примере, приведенном выше, он определяет кодировку символов (character encoding), используемую в документе.

Примечание: метаданные — это информация о документе, но не его содержание.

Элемент Title (5)

Head также содержит обязательный элемент title. Согласно спецификации HTML, каждый документ должен включать в себя заголовок. Заголовок, который указан в этом элементе, показывается в вкладке браузера.

Элемент Body (7)

body содержит все, что мы хотим вывести на веб-странице. Это часть HTML-документа, которая отображается в браузере.

Запомните

  • Тег HTML — указывает браузеру, как контент должен отображаться в нем.
  • Любой HTML-документ состоит из трех частей — определение типа документа, голова и тело.
  • HTML 5 определяется с помощью <!DOCTYPE html>, в то время как HTML 4 имеет три разных способа определения типа — Strict, Transitional и фреймовая структура HTML.
  • <html> — это корневой элемент, который не может помещаться в любой другой.
  • Элементы <head> и <body> вкладываются внутрь элемента <html>.
  • <head> содержит информацию для браузера
  • <body> содержит все, что должно быть отображено в окне браузера.
  • Элемент HTML — это комбинация открывающего тега, содержимого и закрывающего тега.
  • Декларация Doctype сообщает браузеру, какому стандарту он следует.
  • <head> может содержать заголовок, таблицы стилей, скрипты и метаданные.
  • Метаданные — это информация о документе, но не его содержимое.

Перевод статьи “HTML Document Structure – Post #2 – HTML Tutorials” был подготовлен дружной командой проекта Сайтостроение от А до Я.