Лекарство от избытка дивов?

HTML5 дает нам массу новых структурных элементов, которые описаны выше. Они особенно полезны, если вы разрабатываете обыкновенный сайт, например блог. Большинство блогов разработаны так, что сначала идет шапка, затем набор статей, не имеющее прямого отношения содержимое в отдельном элементе и завершается все подвалом (рис. 5.02).

^{Рис. 5.02. Блог вашего покорного слуги}

Теперь вы можете заменить какие-то из своих элементов div на структурные элементы с большей семантической точностью. Но не переходите границу. Есть шансы, что если вы используете div сегодня, будете использовать его же и завтра. Не заменяйте ваши элемент div на новые глянцевые элементы HTML5 просто ради того, чтобы их использовать. Подумайте о содержимом.

Новые элементы были созданы не просто для того, чтобы заменить элементы div. Они наделяют веб-браузеры совершенно новыми возможностями для понимания вашего содержимого.

Модели содержимого

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

Строчные элементы теперь имеют модель содержимого «семантики на уровне текста». Многие блочные элементы теперь подпадают под категорию «группирующего содержимого»: абзацы, списки, дивы и т. п. У форм есть своя собственная модель содержимого. Картинки, звук, видео и Canvas относятся к встроенному содержимому. У новых структурных элементов появляется совершенно новая модель содержимого, которая называется «содержимое-разделитель».

Содержимое, разбивающее на секции

Используя элементы заголовков, от h1 дo h6, можно создать содержание HTML-документа. Например, посмотрите вот на эту разметку:

<h1>An Event Apart</h1>

<h2>Города</h2>

<p>Присоединяйтесь к нам в 2010 году в этих городах.</p>

<h3>Сиэтл</h3>

<p>Идите в изумрудный город по дороге из желтого кирпича.</p>

<h3>Бостон</h3>

<p>Для друзей – Beantown.</p>

<h3>Миннеаполис</h3>

<p>Здесь так <em>мило</em>.</p>

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

Из этого получается следующее содержание:

• An Event Apart

• Города

• Сиэтл

• Бостон

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

Это работает достаточно неплохо. Все содержимое, следующее за элементом заголовка, считается связанным с этим заголовком.

Теперь посмотрим на элемент small. Он должен быть связан со всем документом. Но браузер никак не может об этом узнать. Он ниоткуда не может узнать, что элемент small не должен относиться к заголовку «Миннеаполис».

Добавленное в HTML5 содержимое-разделитель позволяет вам явно размечать начало и конец взаимосвязанного содержимого:

<h1>An Event Apart</h1>

<section>

<header>

<h2>Города</h2>

</header>

<p>Присоединяйтесь к нам в 2010 году в этих городах.</p>

<h3>Сиэтл</h3>

<p>Идите в изумрудныйгород по дороге из желтого кирпича.</p>

<h3>Бостон</h3>

<p>Для друзей – Beantown.</p>

<h3>Миннеаполис</h3>

<p>Здесь так <em>мило</em>.</p>

</section>

<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>

Не нашли, что искали? Воспользуйтесь поиском по сайту: