Всего за 364.9 руб. Купить полную версию
Новые семантические теги и их использование
Так как мы говорим о версии HTML5, по сути, все эти разговоры о производительности и скриптах к нам вроде бы не относятся. Давайте рассмотрим новые семантические теги и разработаем стратегию их применения.
Прежде чем использовать какой-то новый тег, не забудьте о так называемом HTML5 Shiv. Этот скрипт важен для нас. Без него Internet Explorer 6, 7 и 8 не смогут распознать незнакомые стили (т. е. новые HTML5-теги, которых не было, когда создавались указанные версии IE).
Вы можете скопировать HTML5 Shiv из сервиса Google Code, где выложен этот проект.
Также вы можете получить HTML5 Shiv, используя js-библиотеку Modernizr. В этом разделе мы не говорим об этом скрипте подробно, но тем не менее держите его на вооружении. Я использовал его на каждом сайте, созданном за последние два года.
Сброс HTML-стилей по умолчанию
Каждый браузер отображает элементы без присвоенных стилей немного по-разному. Поэтому, чтобы нормализовать теги для лучшей кросс-браузерной разработки и поддержки, вы можете использовать сброс стилей.
Применяйте одну из новых версий CSS reset, поскольку старые версии не задают нормированный стиль элементам HTML5.
Очень советую познакомиться с Normalize.css Николаса Галлахера и Джонатана Нила.
Многие из старых сценариев сброса (классический пример – сброс от Эрика Мейера) тяжеловесны: они сбрасывают каждый элемент, а некоторые их изменения можно оспорить, например тег strong при установке не выделяется жирным шрифтом по умолчанию. Normalize.css сбрасывает элементы более изящно и сглаживает некоторые причуды браузеров. Это позволит вам максимально нивелировать различия между ними. Джон Нил и Николас Галлахер "раскладывают по полочкам" все, что делают скрипты. Изучите подробно прокомментированный код – он фантастичен!
Строим сайт заново
Дойдя до этого пункта, вы, наверное, подумали: "OK, пора начинать писать сайт, пользуясь самыми замечательными новейшими тегами!" Когда были установлены новые семантические теги, разработчикам пришлось потрудиться: проанализировать, какие классы иидентификаторы они будут применять для своих сайтов. Ничего экстраординарного они не обнаружили: на деле все они пользовались одними и теми же именованиями (иногда с небольшими перестановками).
Итак, возможно, имена новых тегов уже подходят для того, что мы делаем.
Тег SECTION
Тег section может использоваться для того, чтобы разбить главную страницу. Допустим, ваш блог состоит из персональной информации о вас, ваших презентаций и регулярно размещаемых постов. Попробуйте разбить это на разделы:
<section class="статьи"></section>
<section class="о себе"></section>
<section class="презентации"></section>
Возможно, каждая из этих частей носит свою "шапку", поэтому мы можем считать их довольно важными. Так что наше решение по поводу разбивки на разделы оправдано. Если бы вы писали книгу наподобие этой, вы могли бы для каждой из глав создать раздел, а затем внутри каждого раздела – подраздел. Что касается семантики на сайте, общий совет: не "зависайте" на деталях. Выберите элемент, основанный на самой полной информации, которая у вас есть сейчас – и вперед! Семантика субъективна. И не парьтесь по пустякам!
Тег ARTICLE
Когда вы погружаетесь в HTML5, вам хочется знать, а в чем же разница между разделом и статьей. Возможно, вы уже предположили, что тег article используется в основном в блогах и онлайн-новостях. Вы недалеки от истины.
Если вам нужен простой критерий распознавания статьи, используйте такой практический прием: если часть контента все еще имеет смысл вне текущего контекста (т. е. если пользователь не видит элементы страницы с этим контентом), тогда это, скорее всего, статья. Отсюда – блоги и онлайн-новости.
Я использую тег article для набора контента, скажем, для списка презентаций, которые я представлял раньше, возможно, с кратким обзором:
<section class="presentations">
<header>
<h1>Моипрезентации</h1>
</header>
<article>
<h2>Введениев HTML5</h2>
<p>4-часовой мастер-класс, который я проводил
в Австралии</p>
</article>
<article>
<h2>Compass и SASS</h2>
<p>Используйте качественную библиотеку CSS,
и вы сможете сконцентрироваться на важных вещах.</p>
</article>
</section>
Зоркие читатели могут спросить "Похоже на список! Почему бы не использовать тег ul?" И будут правы. Он, безусловно, может быть элементом списка. Но article показывает, что, хотя эти элементы похожи, они не имеют отношения друг к другу. Мы можем спорить об этом до бесконечности. Но, в конце концов, на вкус и цвет товарищей нет, и решение за вами.
Тег HEADER
Вы когда-нибудь использовали класс или идентификатор как "шапку" или баннер? Или даже для заголовка сайта? Тег header может использоваться как нечто большее, чем просто заголовок сайта. Его можно (но совсем не обязательно) применять внутри тегов article или section. Просто используйте его, когда нужно, чтобы блочный элемент разграничивал пространство на странице для ясности. Например, я часто храню заголовки и метаинформацию в шапке поста блога.
Тег FOOTER
Тег footer аналогичен тегу header. Вы можете использовать его внутри тегов article или section, или глобально, внутри body.
Тег ASIDE
Тег aside может использоваться на уровне страницы или внутри article. Его содержимое можно считать полезной информацией, но вовсе не основной.
Например, для мобильных версий своего сайта вы можете скрыть aside-элементы. Как бы вы ни обошлись с тегом, он заставит вас принять решение о контенте. Запись в блоге можно представить так:
<article>
<header>
<h1>Все о тракторах</h1>
<time datetime="2012-01-01">1 января 2012</datetime>
</header>
<aside>
<p>Написано полностью Брюсом Лосоном</p>
</aside>
<! – Тело поста идет здесь.->
</article>
Тег TIME
Вы заметили в предыдущем примере новый тег? Тег time прост: используйте его для показа времени. Вы также можете представить машинно-читаемую версию.
<article> <p>Опубликовано <time datetime="1984-04-03" pubdate>3 April 1984</time></p> </article>
Атрибут pubdate может употребляться для указания исходной даты издания статьи. В спецификации сказано, что атрибут pubdate следует использовать только один раз для тега article.
NAVIGATION
Элемент nav явно предназначен для навигации сайта. Вы можете вставлять теги nav, чтобы создавать выпадающее меню. Тег не годится для списка презентаций, который я показывал вам, когда мы говорили о теге article. Приберегите nav для своего сайта, когда дело дойдет до структурной навигации сайта. Например:
<nav>
<ul role="navigation">
<a href="/products">Продукция</a>
<a href="/contact">Контактная информация</a>
<a href="/about">О компании</a>
</ul>
</nav>
(Хотите узнать, для чего нужен атрибут role? Тогда читайте дальше!)