, можно создать содержание HTML-документа. Например, посмотрите вот на эту разметку:
<h1>An Event Apart</h1>
<h2>Города</h2>
Присоединяйтесь к нам в 2010 году в этих городах.
<h3>Сиэтл</h3>
Идите в изумрудный город по дороге из желтого кирпича.
<h3>Бостон</h3>
Для
друзей – Beantown.
<h3>Миннеаполис</h3>
Здесь так <em>мило</em>.
<small>Размещение не предоставляется.</small>
Из этого получается следующее содержание:
• An Event Apart
• Города
• Сиэтл
• Бостон
• Миннеаполис
Это работает достаточно неплохо. Все содержимое, следующее за элементом заголовка, считается связанным с этим заголовком.
Теперь посмотрим на элемент
small
. Он должен быть связан со всем документом. Но браузер никак не может об этом узнать. Он ниоткуда не может узнать, что элемент
small
не должен относиться к заголовку «Миннеаполис».
Добавленное в HTML5 содержимое-разделитель позволяет вам явно размечать начало и конец взаимосвязанного содержимого:
<h1>An Event Apart</h1>
<section>
<header>
<h2>Города</h2>
</header>
Присоединяйтесь к нам в 2010 году в этих городах.
<h3>Сиэтл</h3>
Идите в изумрудный
город по дороге из желтого кирпича.
<h3>Бостон</h3>
Для друзей – Beantown.
<h3>Миннеаполис</h3>
Здесь так <em>мило</em>.
</section>
<small>Размещение не предоставляется.</small>
Теперь ясно, что элемент
small
подпадает под заголовок “An Event Apart”, а не «Миннеаполис».
Я могу разделить это содержимое на еще более мелкие части: тогда каждый город окажется в своей собственной секции:
<h1>An Event Apart</h1>
<section>
<header>
<h2>Города</h2>
</header>
Присоединяйтесь к нам в 2010 году в этих городах.
<section>
<header>
<h3>Сиэтл</h3>
</header>
Идите в изумрудный
город по дороге из желтого кирпича.
</section>
<section>
<header>
<h3>Бостон</h3>
</header>
Для друзей – Beantown.
</section>
<section>
<header>
<h3>Миннеаполис</h3>
</header>
Здесь так <em>мило</em>.
</section>
</section>
<small>Размещение не предоставлятся.</small>
Содержание при этом будет таким же:
• An Event Apart
• Города
• Сиэтл
• Бостон
• Миннеаполис
Алгоритм содержания
Пока новое содержимое-разделитель не дает нам ничего такого, чего мы не могли бы делать с предыдущими версиями HTML. Вот самое интересное: в HTML5 у каждого содержимого-разделителя есть свое собственное внутреннее содержание. Таким образом, вам не нужно следить, на каком уровне заголовков вы находитесь, – можете просто каждый раз начинать с
h1
:
<h1>An Event Apart</h1>
<section>
<header>
<h1>Города</h1>
</header>
Присоединяйтесь к нам в 2010 году в этих городах.
<section>
<header>
<h1>Сиэтл</h1>
</header>
Идите в изумрудный
город по дороге из желтого кирпича.
</section>
<section>
<header>
<h1>Бостон</h1>
</header>
Для друзей – Beantown.
</section>
<section>
<header>
<h1>Миннеаполис</h1>
</header>
Здесь так <em>мило</em>.
</section>
</section>
<small>Размещение не предоставляется.</small>
В предыдущих версиях HTML содержание было бы построено неправильно: