<small>Размещение не предоставляется.</small>
Теперь ясно, что элемент small подпадает под заголовок “An Event Apart”, а не «Миннеаполис».
Я могу разделить это содержимое на еще более мелкие части: тогда каждый город окажется в своей собственной секции:
<h1>An Event Apart</h1>
<section>
<header>
<h2>Города</h2>
</header>
<p>Присоединяйтесь к нам в 2010 году в этих городах.</p>
<section>
<header>
<h3>Сиэтл</h3>
</header>
<p>Идите в изумрудныйгород по дороге из желтого кирпича.</p>
</section>
<section>
<header>
<h3>Бостон</h3>
</header>
<p>Для друзей – Beantown.</p>
</section>
<section>
<header>
<h3>Миннеаполис</h3>
</header>
<p>Здесь так <em>мило</em>.</p>
</section>
</section>
<small>Размещение не предоставлятся.</small>
Содержание при этом будет таким же:
• An Event Apart
• Города
• Сиэтл
• Бостон
• Миннеаполис
Алгоритм содержания
Пока новое содержимое-разделитель не дает нам ничего такого, чего мы не могли бы делать с предыдущими версиями HTML. Вот самое интересное: в HTML5 у каждого содержимого-разделителя есть свое собственное внутреннее содержание. Таким образом, вам не нужно следить, на каком уровне заголовков вы находитесь, – можете просто каждый раз начинать с h1:
<h1>An Event Apart</h1>
<section>
<header>
<h1>Города</h1>
</header>
<p>Присоединяйтесь к нам в 2010 году в этих городах.</p>
<section>
<header>
<h1>Сиэтл</h1>
</header>
<p>Идите в изумрудныйгород по дороге из желтого кирпича.</p>
</section>
<section>
<header>
<h1>Бостон</h1>
</header>
<p>Для друзей – Beantown.</p>
</section>
<section>
<header>
<h1>Миннеаполис</h1>
</header>
<p>Здесь так <em>мило</em>.</p>
</section>
</section>
<small>Размещение не предоставляется.</small>
В предыдущих версиях HTML содержание было бы построено неправильно:
• An Event Apart
• Города
• Сиэтл
• Бостон
• Миннеаполис
В HTML5 содержание строится правильно:
• An Event Apart
• Города
• Сиэтл
• Бостон
• Миннеаполис
hgroup
Бывают времена, когда вы хотите использовать элемент заголовка, но не хотите, чтобы его содержимое появлялось в содержании документа. Именно это позволяет вам сделать элемент hgroup:
<hgroup>
<h1>An Event Apart</h1>
<h2>Для людей, которые создают вебсайты</h2>
</hgroup>
В этом случае заголовок второго уровня («Для людей, которые создают веб-сайты») – это на самом деле слоган. В элементе hgroup только первый заголовок войдет в содержание. Первый заголовок не обязательно должен быть h1:
<hgroup>
<h3>Скрипты для DOM</h3>
<h4>Веб-разработка на JavaScriptдля Document Object Model</h4>
</hgroup>
Корневые элементы разделов
Некоторые элементы не появляются в сгенерированном содержании. Другими словами, неважно, сколько заголовков вы используете внутри своих элементов, – в содержании документа они не появятся.
Элементы blockquote, fieldset и td являются исключениями для алгоритма составления содержания. Эти элементы называются «корневыми элементами разделов» – это не нужно путать с элементами-разделителями.
Переносимость
Так как каждый элемент, относящийся к типу контента-разделителя, создает собственное содержание, теперь в вашем документе может быть гораздо больше заголовков, чем просто от h1 от h6. Теперь нет никакого ограничения на то, как глубоко могут спускаться уровни ваших заголовков. Что более важно, теперь вы можете начать представлять свое содержимое в более модульном ключе.