HTML5 для веб-дизайнеров, Джереми Кит

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

на обложку

Джереми Кит

Шрифт:

<h1>Отзыв на книгу Скрипты для DOM</h1>

</header>

Маленький маяк, который освещает длинную и зачастую темную дорогу в мире JavaScript.

Опубликовано в

<time datetime=?2005-10-08T15:13? ачастую темную дорогу в мире JavaScript.

Опубликовано в

15:13 8

октября 2005 года.

</time>

автор: Гленн Джонс

</footer>

</article>

Если внутри статьи у вас есть несколько элементов

time

, то атрибут

pubdate

может быть только у одного из них.

Элемент

article

особенно хорошо применим для записей в блогах, новостных репортажей, комментариев, оценок, записей на форумах. Он покрывает ровно те же сценарии, что и микроформат

hAtom

Но спецификация HTML5 идет дальше. Она также объявляет, что элемент

article

должен использоваться для самостоятельных виджетов: графиков акций, калькуляторов, часов, виджетов погоды и тому подобного. В этом случае элемент

article

пытается закрыть те же сценарии, что Web Slices компании Microsoft [13] .

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

http://www.ieaddons.com/en/webslices/

Что более проблематично – это то, что

article

section

очень во многом похожи. Все, что их разделяет, – слово «самостоятельный». Решить, какой элемент к чему относится, было бы просто при четких и быстрых правилах. В данном же случае все зависит от интерпретации. У вас может быть много статей внутри секции, много секций внутри статьи, можно создавать вложенные секции в секциях и статьи в статьях. Вы решаете, какой элемент больше подходит семантически в той или иной конкретной ситуации.

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

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

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

Теперь

вы можете заменить какие-то из своих элементов

div

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

div

сегодня, будете использовать его же и завтра. Не заменяйте ваши элемент

div

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

Новые элементы были созданы не просто для того, чтобы заменить элементы

div

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

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

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

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

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

Используя элементы заголовков, от

дo

, можно создать содержание HTML-документа. Например, посмотрите вот на эту разметку:

<h1>An Event Apart</h1>

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

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

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

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

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

Для друзей – Beantown.

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