Корневые элементы разделов
Некоторые элементы не появляются в сгенерированном содержании. Другими словами, неважно, сколько заголовков вы используете внутри своих элементов, – в содержании документа они не появятся.
Элементы blockquote, fieldset и td являются исключениями для алгоритма составления содержания. Эти элементы называются «корневыми элементами разделов» – это не нужно путать с элементами-разделителями.
Переносимость
Так как каждый элемент, относящийся к типу контента-разделителя, создает собственное содержание, теперь в вашем документе может быть гораздо больше заголовков, чем просто от h1 от h6. Теперь нет никакого ограничения на то, как глубоко могут спускаться уровни ваших заголовков. Что более важно, теперь вы можете начать представлять свое содержимое в более модульном ключе.
Предположим, у меня есть запись в блоге под названием «Бутерброд с сыром». До HTML5 мне нужно было бы знать контекст, в котором расположена запись, чтобы определить, какой уровень заголовков использовать для заголовка записи. Если запись находится на главной странице, то она появляется вслед за элементом h1, который содержит название моего блога:
<h1>Мой клёвый блог</h1>
<h2><a href="cheese.html">Бутерброд с сыром</a></h2>
<p>Моя кошка съела бутерброд с сыром.</p>
Но если я публикую запись в блоге на отдельной странице, то я хочу, чтобы заголовок записи был заголовком первого уровня:
<h1>Бутерброд с сыром</h1>
<p>Моя кошка съела бутерброд с сыром.</p>
С HTML5 мне не нужно волноваться о том, какой уровень заголовков использовать. Мне нужно просто использовать содержимое-разделитель: в данном случае – элемент article:
<article>
<h1>Бутерброд с сыром</h1>
<p>Моя кошка съела бутерброд с сыром.</p>
</article>
Теперь это содержимое по-настоящему переносимо. Неважно, где оно появляется, на отдельной странице или на главной странице блога:
<h1>Мой клёвый блог</h1>
<article>
<h1>Бутерброд с сыром</h1>
<p>Моя кошка съела бутерброд с сыром.</p>
</article>
Новый алгоритм составления HTML5 выдает правильный результат:
• Мой клёвый блог
• Бутерброд с сыром
Локальные стили
То, что у каждого элемента-разделителя есть свое собственное содержание, делает эти элементы прекрасно подходящими для решений на Ajax. И снова HTML5 показывает свое происхождение из спецификации для веб-приложений.
Однако если вы попытаетесь перенести кусочек содержимого из одного документа в другой, то столкнетесь с рядом проблем. CSS-правила, примененные к главному документу, будут применены и к вставленному содержимому. Это в настоящий момент одна из главных проблем с распространением виджетов в вебе.
HTML5 предлагает решение этой проблемы в виде атрибута scoped, который можно применить к элементу style. Все стили, объявленные внутри этого элемента style, будут применены только к ближайшему родительскому элементу-разделителю:
<h1>Мой клёвый блог</h1>
<article>
<style scoped>
h1 { font-size: 75% }
</style>
<h1>Бутерброд с сыром</h1>
<p>Моя кошка съела бутерброд с сыром.</p>
</article>
В этом примере только у второго элемента h1 будет значение размера шрифта, равное 75%. По крайней мере теория такова. Ни один браузер еще не поддерживает атрибут scoped.
В этом-то и загвоздка. Перед тем как начать использовать какое-либо новое добавление в HTML5, вам нужно учесть, какие браузеры поддерживают эту функцию. Впрочем, какой бы ни была браузерная поддержка, у меня есть несколько стратегий, которые помогут вам начать работать с HTML5. В следующей, последней главе я хотел бы поделиться с вами этими стратегиями.