Разбираем структуру HTML-документа. Обязательные элементы и как их использовать?

разбираем структуру html-документа. обязательные элементы и как их использовать?

Введение в основные структурные элементы

Мы подошли вплотную к тому моменту, кода создадим и откроем в браузере свою первую страницу, но перед этим необходимо изучить обязательные составляющие HTML-документа.

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

Декларация типа документа — DOCTYPE

По мере развития языка гипертекстовой разметки и появления новых версий, у браузеров появилась потребность явным образом определять, к какой версии языка относится обрабатываемый документ.

Так как в каждой версии имеется некоторое специфичное поведение, при отсутствии DTD (анг. Document Type Declaration, рус. Декларация Типа Документа) браузер может неправильно обработать и отобразить тот или иной элемент. В профессиональной среде этот блок информации называют просто «doctype».

Сейчас функционирует пятая версия HTML. В ней существует очень простой способ указания doctype. Нет никакого смысла задавать его образом отличным от требований HTML5.

<!DOCTYPE html>
...остальная разметка

Вот так, коротко и лаконично выглядит определение doctype в HTML5. Оно должно находится в самом начале структуры документа, до любого другого элемента. Мы решили привести пример, каким образом тип документа задавался ранее. Это может немного напугать.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
...остальная разметка

Корневой элемент — HTML

Сразу после определения типа документа следуют открывающий и закрывающий корневые теги <html></html>. Все содержимое вашей страницы должно располагаться между ними. Других функций данный элемент не выполняет.

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

<!DOCTYPE html>
<html>
    ...остальная разметка
</html>

Заголовок документа — HEAD

Он содержит в себе административную информацию о текущем документе, такую как: название, описание, указание внешних файлов стилей и скриптов. Эта информация подключается в <head> посредством дополнительных элементов, описывать которые мы будем далее по мере прохождения учебного курса.

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

<!DOCTYPE html>
<html>
    <head>
        <title>Мой первый документ</title>
    </head>
    ...остальная разметка
</html>

Заметка
Как видите, элемент <head> мы сдвинули вправо с помощью табуляции. Этот прием может улучшить восприятие вашей разметки. Таким образом, намного легче ориентироваться во вложенности элементов друг в друга.

Тело документа — BODY

Элемент <body> располагается сразу под <head> и содержит непосредственно всю основную разметку вашего документа. Это могут быть: изображения, параграфы, подзаголовки и многое другое.

Ниже мы приводим окончательный пример, содержащий открывающий и закрывающий теги <body>, а также все обязательные элементы, необходимые для составления структуры HTML-страницы.

<!DOCTYPE html>
<html>
    <head>
        <title>Мой первый документ</title>
    </head>
    <body>
        <h1>Это оказалось очень просто</h1>
    </body>
</html>

Последние публикации