HTML5 для веб-дизайнеров - Кит Джереми
Шрифт:
Интервал:
Закладка:
Что мне представляется интересным относительно расширяемости HTML – то, что пространства имен были необязательными: Netscape добавила blink, MSFT – marquee и т. п. Я бы сказал, что если бы в HTML с самого начала были пространства имен, это имело бы следующий эффект: вместо того чтобы (в конце концов) сойтись на одном и том же решении, различия между разными браузерами были бы легитимизированы и окончательно закреплены.
Помимо даже темы бесконечной расширяемости, это сильный аргумент за ограниченный словарь, построенный на согласии сообщества.
Скорее всего, HTML5 будет выпущен с каким-либо методом расширения его встроенной семантики. Конечно, атрибут class все еще на месте, поэтому микроформаты будут работать так, как работали. Возможно, HTML5 изменится, чтобы стать совместимым с RDFa, или, возможно, он будет использовать свой собственный словарь «микроданных».
В любом случае такая расширяемость, скорее всего, мало будет интересовать большинство веб-разработчиков. Что действительно имеет значение – это встроенная семантика, относительно которой существует согласие в сообществе и которая реализована производителями браузеров.
Новые элементы
HTML5 вводит несколько новых строчных элементов, чтобы расширить наш существующий арсенал, состоящий из span, strong, em, abbr и других. Ах да, больше мы не называем такие элементы «строчными» – теперь они описывают «семантику на уровне текста».
mark
Когда вы пролистываете список результатов поиска, вы заметите, что зачастую поисковый запрос подсвечен внутри каждого из результатов поиска. Вы можете разметить каждое вхождение поискового запроса элементом span, но span – костыль, не имеющий никакого семантического значения и годящийся мало на что, кроме как предоставлять место, куда можно было бы сунуть классы для применения стилей.
Можно использовать em или strong, но это не будет семантически верным; вы не хотите придавать особую важность запросу поиска, просто хотите, чтобы он был как-то выделен.
На сцену выходит элемент mark:
<h1>Результаты поиска по запросу 'единорог'</h1>
<ol>
<li><a href="http://clearleft.com/">
Едем на <mark>единороге</mark> юзабилитипо радуге веба.
</a></li>
</ol>
Элемент mark не придает значения содержимому внутри него, а только показывает, что в данный момент он представляет интерес. Как говорит спецификация, mark означает «отрезок текста в одном документе, отмеченный или подсвеченный для справочных целей в связи с его релевантностью в другом контексте».
Элемент mark разрешается использовать и в других контекстах, кроме как в результатах поиска, но, убейте меня, я не могу придумать ни одного такого примера.
time
hCalendar – один из самых популярных микроформатов, потому что он удовлетворяет общую для многих потребность: размечать события так, чтобы пользователи могли добавлять их напрямую в свой календарь.
Единственная сложная часть в hCalendar – описывать дату и время так, чтобы компьютер мог их прочитать. Люди любят описывать даты: «25 мая» или: «в следующую среду», но парсеры хотят видеть красиво отформатированную по ISO дату: YYYY-MM-DDThh: mm: ss.
Сообщество по микроформатам придумало несколько умных решений этой проблемы, например использование элемента abbr:
<abbr class="dtstart" title="1992-01-12">
12 января 1992
</abbr>
Если от того, что вы используете элемент abbr таким образом, вас начинает немножко мутить, есть много других способов размечать машиночитаемые даты и время в микроформатах с помощью шаблона класс-значение. В HTML5 эта проблема разрешается новым элементом time:
<time class="dtstart" datetime="1992-01-12">
12 января, 1992
</time>
Элемент time может использоваться для обозначения даты, времени или того и другого вместе:
<time datetime="17:00">17 часов</time>
<time datetime="2010-04-07">7 апреля</time>
<time datetime="2010-04-07T17:00">в 17 часов, 7 апреля</time>
Вам необязательно ставить значение даты и времени в атрибут datetime, но если вы этого не делаете, то должны отобразить значение для пользователя:
<time>2010-04-07</time>
meter
Элемент meter может использоваться для разметки любых измерений, если эти измерения являются частью шкалы с минимальным и максимальным значением.
<meter>9 из 10 кошек</meter>
Если вы не хотите, можете не выводить максимальное значение, а использовать вместо него атрибут max:
<meter max="10">9 кошек</meter>
Имеется также соответствующий атрибут min. Есть еще атрибуты high, low и optimum, с которыми тоже можно поиграть. Если хотите, вы можете вообще спрятать сам результат измерения в атрибут value.
<meter low="-273" high="100" min="12" max="30"optimum="21" value="25">
Для этого времени года довольно-таки тепло.
</meter>
progress
Если meter хорошо подходит для описания чего-то, что уже было измерено, элемент progress позволяет вам разметить значение, которое меняется сейчас:
Ваш профиль заполнен на <progress>60%</progress>.
И снова у вас есть атрибуты min, max и value, если вы предпочитаете использовать их:
<progress min="0" max="100" value="60"></progress>
Элемент progress особенно полезен, когда используется вместе со скриптами для DOM. Вы можете использовать JavaScript для динамического обновления значения, позволяя браузеру тем самым сообщить это изменение пользователю – это весьма кстати для Ajax-загрузок файлов.
Структура
Еще в 2005 году компания Google провела ряд исследований, чтобы обнаружить, какие именно низко висящие плоды можно найти на тропках веба (http://code.google.com/webstats/).
Парсер осмотрел более миллиарда веб-страниц и разметил самые частые названия классов. Результаты не принесли ничего неожиданного. Наиболее частыми были такие названия классов, как “header”, “footer” и “nav”. Эта зарождавшаяся в то время семантика отлично соотносится с новыми структурными элементами, появившимися в HTML5.
section
Элемент section используется для группировки тематически связанного содержимого. Это звучит очень похоже на элемент div, который зачастую используется как наиболее общий контейнер содержимого. Разница в том, что у div нет никакого семантического значения, его наличие ничего не говорит вам о содержимом внутри него. Напротив, элемент section явно используется для группировки связанного содержимого.
Вы вполне можете заменить ряд элементов div в своем коде элементами section, но не забудьте спросить себя: «Все ли содержимое связано друг с другом?»
<section>
<h1>Скрипты для DOM</h1>
<p>Эта книга предназначена скорее для верстальщиков,чем для программистов.</p>
<p>автор: Джереми Кит</p>
</section>
header
Спецификация HTML5 описывает элемент header как контейнер для «группы вводных или навигационных вспомогательных элементов». Звучит вполне разумно. Это как раз тот тип содержимого, который я ожидаю увидеть в шапке страницы, и слово header как раз традиционно используется как синоним термина «шапка».
Между элементом header в HTML5 и общепринятым использованием слов header и «шапка» есть принципиальная разница. На странице шапка обычно только одна, но в документе может быть много элементов header. Вы можете, например, использовать элемент header внутри элемента section. Пожалуй, это даже нужно делать. Спецификация определяет элемент section как «контейнер тематически сгруппированного содержимого, как правило, с заголовком».
<section>
<header>
<h1>Скрипты для DOM</h1>
</header>
<p>Эта книга скорее предназначена для дизайнеров, чем для программистов.</p>
<p>автор: Джереми Кит</p>
</section>
Элемент header обычно появляется в начале документа или секции, но это не обязательно должно быть так. header определяется в большей степени своим содержимым – вводными или навигационными вспомогательными элементами, – чем положением.
footer
Как и элемент header, по названию элемента footer кажется, что это описание положения, но, как и в случае с header, это не так. Вместо этого элемент footer должен содержать информацию об элементе, который его содержит: кто его автор, информацию о копирайте, ссылки на связанное содержимое и т. п.
Это отлично согласовывается с той ментальной моделью, которая есть у веб-разработчиков для слова «подвал». Разница в том, что, хотя мы привыкли использовать один подвал на весь документ, HTML5 позволяет нам делать подвалы и внутри секций.
