Главная страница   /   9.1. Понимание необходимости в группировании контента (Руководство по HTML5

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

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

Адам Фриман

9.1. Понимание необходимости в группировании контента

HTML требует от браузеров объединять несколько пробелов в один пробел. Как правило, это полезная функция, потому что она отделяет верстку вашего HTML документа от верстки контента в окне браузера. В листинге 9-1 показан блок контента, который я уже использовал в примерах.

Листинг 9-1: Блок контента из HTML документа
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	I like apples and oranges.
	I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
	You can see other fruits I like <a href="fruitlist.html">here</a>.
	<strong>Warning:</strong> Eating too many oranges can give you heart burn.
	My favorite kind of orange is the mandarin, properly known
	as <i>citrus reticulata</i>.
	Oranges at my local store cost <s>$1 each</s> $2 for 3.
	The
	<abbr title="Florida Department of Citrus">FDOC</abbr>
	regulates the Florida
	citrus industry.
	I still remember the best apple I ever tasted.
	I bought it at <time datetime="15:00">3 o'clock</time>
	on <time datetime="1984-12-7">December 7th</time>.
</body>
</html>

Текст в элементе body распространяется на несколько строк. Некоторые из этих строк имеют отступ, и некоторые группы строк пишутся с нового абзаца. Браузер будет игнорировать всю эту структуру и отображать все содержимое в одну строку, как показано на рисунке 9-1.

Рисунок 9-1: Браузер урезает пробелы в HTML документе

Элементы из следующих разделов помогут вам придать структуру документу при помощи группирования связанных блоков контента. Есть много различных подходов к группированию содержания, начиная с простого абзаца и заканчивая сложными списками.