HTML5 для веб-дизайнеров

/section

smallРазмещение не предоставлятся./small

Содержание при этом будет таким же:

• An Event Apart

• Города

• Сиэтл

• Бостон

• Миннеаполис

Алгоритм содержания

Пока новое содержимое-разделитель не дает нам ничего такого, чего мы не могли бы делать с предыдущими версиями HTML. Вот самое интересное: в HTML5 у каждого содержимого-разделителя есть свое собственное внутреннее содержание. Таким образом, вам не нужно следить, на каком уровне заголовков вы находитесь, – можете просто каждый раз начинать с h1:

h1An 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 содержание было бы построено неправильно:

• An Event Apart

• Города

• Сиэтл

• Бостон

• Миннеаполис

В HTML5 содержание строится правильно:

• An Event Apart

• Города

• Сиэтл

• Бостон

• Миннеаполис

hgroup

Бывают времена, когда вы хотите использовать элемент заголовка, но не хотите, чтобы его содержимое появлялось в содержании документа. Именно это позволяет вам сделать элемент hgroup:

hgroup

h1An Event Apart/h1

h2Для людей, которые создают вебсайты/h2

/hgroup

В этом случае заголовок второго уровня («Для людей, которые создают веб-сайты») – это на самом деле слоган. В элементе hgroup только первый заголовок войдет в содержание. Первый заголовок не обязательно должен быть h1:

hgroup

h3Скрипты для DOM/h3

h4Веб-разработка на JavaScriptдля Document Object Model/h4

/hgroup

Корневые элементы разделов

Некоторые элементы не появляются в сгенерированном содержании. Другими словами, неважно, сколько заголовков вы используете внутри своих элементов, – в содержании документа они не появятся.

Элементы blockquote, fieldset и td являются исключениями для алгоритма составления содержания. Эти элементы называются «корневыми элементами разделов» – это не нужно путать с элементами-разделителями.

Переносимость

Так как каждый элемент, относящийся к типу контента-разделителя, создает собственное содержание, теперь в вашем документе может быть гораздо больше заголовков, чем просто от h1 от h6. Теперь нет никакого ограничения на то, как глубоко могут спускаться уровни ваших заголовков. Что более важно, теперь вы можете начать представлять свое содержимое в более модульном ключе.

Предположим, у меня есть запись в блоге под названием «Бутерброд с сыром». До HTML5 мне нужно было бы знать контекст, в котором расположена запись, чтобы определить, какой уровень заголовков использовать для заголовка записи. Если запись находится на главной странице, то она появляется вслед за элементом h1, который содержит название моего блога:

h1Мой клёвый блог/h1

h2a href="cheese.html"Бутерброд с сыром/a/h2

Моя кошка съела бутерброд с сыром.

Но если я публикую запись в блоге на отдельной странице, то я хочу, чтобы заголовок записи был заголовком первого уровня:

h1Бутерброд с сыром/h1

Моя кошка съела бутерброд с сыром.

С HTML5 мне не нужно волноваться о том, какой уровень заголовков использовать. Мне нужно просто использовать содержимое-разделитель: в данном случае – элемент article:

article

h1Бутерброд с сыром/h1

Моя кошка съела бутерброд с сыром.

/article

Теперь это содержимое по-настоящему переносимо. Неважно, где оно появляется, на отдельной странице или на главной странице блога:

h1Мой клёвый блог/h1

article

h1Бутерброд с сыром/h1

Моя кошка съела бутерброд с сыром.

/article

Новый алгоритм составления HTML5 выдает правильный результат:

• Мой клёвый блог

• Бутерброд с сыром

Локальные стили

То, что у каждого элемента-разделителя есть свое собственное содержание, делает эти элементы прекрасно подходящими для решений на Ajax. И снова HTML5 показывает свое происхождение из спецификации для веб-приложений.