Понимание необходимости в группировании контента
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 документе
Элементы из следующих разделов помогут вам придать структуру документу при помощи группирования связанных блоков контента. Есть много различных подходов к группированию содержания, начиная с простого абзаца и заканчивая сложными списками.
