Главная страница   /   7.1. Настройка базовой структуры документа (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

7.1. Настройка базовой структуры документа

Давайте начнем с элементов документа. Это строительные блоки, которые определяют форму вашего HTML документа и устанавливают начальный контекст для браузера. На данный момент существуют только четыре элемента документа, но они всегда необходимы в любом HTML документе.

Элемент doctype

Элемент doctype является уникальным и имеет свою собственную категорию. Вы должны начинать каждый HTML документ, который вы создаете, с элемента doctype; это элемент, который говорит браузеру, что он будет иметь дело с HTML. Большинство браузеров все же будут отображать содержимое правильно, даже если вы опустите элемент doctype, но это плохая практика – полагаться, что браузеры будут вести себя таким образом. В таблице 7-2 приведено описание элемента doctype.

Таблица 7-2: Элемент doctype
Элемент doctype
Тип элемента N/A
Разрешенные родительские элементы Нет
Локальные атрибуты Нет
Содержание Нет
Стиль тегов Один открывающий тег
Новый в HTML5 Нет
Изменения в HTML5 DTD, который был необходим в HTML 4, является устаревшим в HTML5
Соглашение по стилям Нет

Существует только один способ использования элемента doctype в HTML5, и он показан в листинге 7-1. По мере того, как вы будете прорабатывать эту главу, вы будете применять каждый элемент для создания простого, но полного HTML5 документа. В листинге 7-1 показана первая строка.

Листинг 7-1: Использование элемента doctype
<!DOCTYPE HTML>

Этот элемент говорит браузеру две вещи: он имеет дело с HTML, и с какой версией спецификации HTML будет связано содержание. Вы не должны указывать номер версии. Браузер автоматически определит, что вы используете HTML5 (потому что этот элемент имеет несколько иную форму в HTML5, чем в предыдущих версиях HTML). Для этого элемента нет закрывающего тега. Вы просто ставите один тег в начале документа.

Элемент html

Элемент html, который более правильно назвать корневым элементом, указывает на начало HTML внутри документа. В таблице 7-3 приведено описание элемента html.

Таблица 7-3: Элемент html
Элемент html
Тип элемента N/A
Разрешенные родительские элементы Нет
Локальные атрибуты manifest (для более подробной информации смотрите главу 40)
Содержание Один элемент head и один элемент body
Стиль тегов Открывающий и закрывающий теги, включающие другие элементы
Новый в HTML5 Нет
Изменения в HTML5 В HTML5 был добавлен новый атрибут manifest; атрибуты версии HTML4 сейчас считаются устаревшими
Соглашение по стилям html { display: block; } html:focus { outline: none;}

Элемент html указывает на начало HTML разметки в документе. В листинге 7-2 показано использование элемента html.

Листинг 7-2: Использование элемента html
<!DOCTYPE HTML>
<html>
	...content and elements omitted...
</html>

Элемент head

Элемент head содержит метаданные для документа. В HTML метаданные предоставляют браузеру информацию о содержании и разметке в документе, но также могут включать скрипты и ссылки на внешние ресурсы (такие как таблицы стилей CSS). Вы увидите элементы метаданных далее в этой главе. В таблице 7-4 приведено описание элемента head.

Таблица 7-4: Элемент head
Элемент head
Тип элемента N/A
Разрешенные родительские элементы Элемент html
Локальные атрибуты Нет
Содержание Требуется один элемент title; остальные элементы метаданных не обязательны
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 Нет
Соглашение по стилям Нет

В листинге 7-3 показано использование элемента head. Каждый HTML документ должен содержать элемент head, и этот, в свою очередь, должен содержать элемент title, как показано в листинге. Полную информацию об элементе title вы найдете далее в этой главе.

Листинг 7-3: Использование элемента head
<!DOCTYPE HTML>
<html>
	<head>
		<title>Hello</title>
	</head>
</html>

Элемент body

Элемент body инкапсулирует содержание HTML документа, в отличие от элемента head, который инкапсулирует метаданные и информацию о документе. Элемент body всегда следует за элементом head, так что это второй дочерний элемент элемента html. В таблице 7-5 приведено описание элемента body.

Таблица 7-5: Элемент body
Элемент body
Тип элемента N/A
Разрешенные родительские элементы Элемент html
Локальные атрибуты Нет
Содержание Все потоковые и фразовые элементы
Стиль тегов Требуются открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 Атрибуты alink, background, bgcolor, link, margintop, marginbottom, marginleft, marginright, marginwidth, text и vlink устарели; результат, который достигался при помощи этих атрибутов, сейчас достигается при помощи CSS
Соглашение по стилям Нет

В листинге 7-4 показано использование элемента body.

Листинг 7-4: Использование элемента body
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<p>
		I like <code id="applecode">apples</code> and oranges.
	</p>
	<a href="http://apress.com">Visit Apress.com</a>
</body>
</html>

Я добавил в элемент body некоторое простое содержание. Отдельные элементы, которые я использовал (р, code и a) описаны в главах 8 и 9. Вы достигли той точки, когда у вас есть простой, но полный, HTML документ. Вы можете увидеть, как браузер отображает этот документ, на рисунке 7-1.

Рисунок 7-1: Отображение простого HTML документа в браузере