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

Стандарт HTML5 настаивает на следующей структуре:

в начале – специальный элемент DOCTYPE
затем – контейнерный элемент html, в котором:
- контейнерный элемент head (раздел заголовка)
- контейнерный элемент body (раздел тела документа).

В разделе заголовка – служебная информация(метаданные), в разделе тела – то, что будем отображать непосредственно в окне браузера.

DOCTYPE

Пример для HTML 5 (обратите внимание на вид тега):

<!DOCTYPE html>

Варианты DOCTYPE для HTML 4.01

Строгий (Strict): не содержит элементов, помеченных как «устаревшие» или «не одобряемые» (deprecated):

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

Переходный (Transitional): содержит устаревшие элементы в целях совместимости и упрощения перехода со старых версий HTML.

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

С фреймами (Frameset): аналогичен переходному, но содержит также элементы для создания наборов фреймов.

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

Элемент html

Элемент html называют корневым элементом. Он поддерживает атрибут manifest с указанием на файл манифеста. У элемента html рекомендуется указать атрибут lang <html lang="en">

Элемент head

Контейнерный элемент head содержит метаданные документа (заголовок, ссылки на внешние стилевые файлы и скрипты, и тому подобное). Элемент head должен содержать единственный элемент title, остальные элементы для описания метаданных (base, meta, link, style, script, noscript) опциональны.

Элемент title

Элемент title устанавливает заголовок (имя) документа. Содержимое элемента – строка, которая отображается как заголовок окна или вкладки:

Элемент base

Автономный элемент base выполняет две задачи:

инструктирует браузер относительно базового адреса текущего документа (атрибут href);
задаёт целевое окно для всех ссылок на текущей странице (атрибут target).

target values

_blank Загружает страницу в новое окно браузера.
_self Загружает страницу в текущее окно.
_parent Загружает страницу во фрейм-родитель.
_top Отменяет все фреймы и загружает страницу в полном окне браузера.
имя Имя окна или фрейма, в которое будет загружена страница.

Пример:

<base href="http://titan/listings/" target="_blank">

Элемент link

При помощи элемента link документ связывается со внешними ресурсами (как правило, с файлами CSS). Его возможные атрибуты:

href путь к связываемому ресурсу
hreflang язык ресурса
media устройство, для которого применяется CSS
rel отношение между текущим документом и ресурсом
sizes размер иконок (для rel=”icon”)
type MIME-тип подключаемого файла

Примеры:

<link rel="stylesheet" type="text/css" href="styles.css"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Элементы style, script, noscript

style – служит для внедрения правил CSS непосредственно в HTML-документ;
script – подключение или внедрение клиентского скрипта;
noscript – позволяет отобразить контент в случае, если JavaScript отключен или не поддерживается браузером.

Тело документа находится в контейнерном элементе body. В HTML5 у этого элемента нет собственных атрибутов (только глобальные).

Атрибуты alink, background, bgcolor, link, margin*, text, vlink объявлены для body устаревшими (эффект их действия достигается при помощи CSS).