Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки
Зоркие читатели могут спросить «Похоже на список! Почему бы не использовать тег 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>
Написано полностью Брюсом Лосоном
</aside>
<! – Тело поста идет здесь.->
</article>
Тег TIME
Вы заметили в предыдущем примере новый тег? Тег time прост: используйте его для показа времени. Вы также можете представить машинно-читаемую версию.
<article>
Опубликовано <time datetime=”1984-04-03” pubdate>3 April 1984</time>
</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? Тогда читайте дальше!)
Теги FIGURE и FIGURE CAPTION
Возможно, вы добавляете на свои страницы много изображений. А задумывались ли вы когда-нибудь о том, как лучше задать подписи к ним? Вот было бы здорово, если бы можно было аккуратно подписать изображение! Для этого-то нам и нужен тэг figure.
<figure>
<img src=”whisky.png” alt=”Бокал виски,
рядом маленькая бутылочка с водой.”>
<figcaption>Бокал виски, рядом
маленькая бутылочка с водой.</figcaption>
</figure>
Это еще не все. Вы можете использовать тэг figure для видео, svg и всего визуального, к чему может потребоваться подпись.
Тег DIV
Познакомившись со всеми этими новыми тегами, вы наверняка считаете тег div пережитком прошлого. Это далеко не так. Уже несколько лет разработчики вовсю используют этот простой тег для всего на свете, словно их охватила эпидемия «дивификации».
Div (division) означает «раздел», и порой нет лучшего тега для описания куска контента. Возможно, все, что вам нужно, это контейнер для применения стилей. Так бывает. Это не в упрек вам. Семантика – штука коварная. Если вы на самом деле не умеете описывать куски контента с использованием каких-то тегов HTML, о которых мы говорили выше, берите div и не казните себя за это.
Несколько слов о семантической структуре
Теперь, когда у нас есть несколько новых элементов для разметки блоков (т. е. section и article), простая структура старого документа, которую мы использовали, чуть-чуть изменилась. Элементы разметки блоков можно рассматривать как блоки всего html-документа. Другими словами, теги заголовков от h1 до h6 могут использоваться внутри них.
Но будьте внимательны! Вы можете столкнуться с чем-то подобным:
<body>
<header role=”banner”>
<h1>Блог о велоспорте</h1>
</header>
<article>
<h1>Раннее утро на дороге Блэкспур </h1>
…
</article>
</body>
Многократно вставлять h1 в один и тот же документ? Это безумие! Вместо этого я применяю заголовки, чтобы показать структуру внутри заданного раздела:
<body>
<header role=”banner”>
<h1>Полноформатный кадр: Блог о фотографии</h1>
</header>
<article>
<h2> Раннее утро на дороге Блэкспур </h2>
…
</article>
<section>
<h2>Купите нашу книгу!</h2>
…
<section>
<h3>Печатное издание</h3>
…
<button>Купитьза $90</button>
</section>
<section>
<h3>Электронное издание: PDF или eBook</h3>
…
<button>Купитьза $15</button>
</section>
</section>
</body>
Это не только упрощает оформление заголовков, но и выглядит лучше: меньше путаницы и не надо плыть против течения.
До того, как в наше распоряжение попали теги section и article, мы могли использовать для описания глубокой иерархии сайта только теги от h1 до h6. Теперь мы вольны описывать безграничные уровни глубины и можем точно представлять каждый уровень контента.
Если после всего этого вы все еще сомневаетесь, какой элемент применить, проштудируйте классную блок-схему по элементам разметки блоков в HTML5[33]. Разработчики – Оли Студхолм и Петр Петрус. Распечатайте ее, приколите на стену, и вы всегда будете знать, какой элемент использовать.
Как обычно, вы захотите провести валидацию кода HTML, чтобы он был без ошибок.
Я предпочитаю это делать через Validator.nu[34].
Работа со стандартом WAI-ARIA с самых азов
Роли стандарта доступности активных интернет-приложений WAI-ARIA (сокр. от Web Accessibility Initiative: Accessible Rich Internet Applications) всегда входили в состав современной технологии HTML. У многих разработчиков темнеет в глазах при одном только упоминании о них. Роли созданы для того, чтобы сделать сайты и приложения более доступными для пользователей с ограниченными физическими возможностями, которые полагаются на программы, читающие вслух текст с экрана. Разработчики, посвятившие себя этому благородному делу (на самом деле их не так уж и много!) постоянно говорят о важности WAI-ARIA, но профессиональное сообщество в целом их как будто не замечает.
Компании могут много говорить о том, как важна доступность. Исследуют ли они этот вопрос или разрабатывают его – это уже совсем другая история. А вот ваша задача, как разработчика, – сделать так, чтобы каждый человек мог пользоваться вашим сайтом.
Для слепых и людей с пониженным зрением WAI-ARIA роли описывают контекст и цель информации, лежащей за ним. Разделы страницы отличаются не только визуально, но и по контексту. А программа, читающая с экрана, может объяснять эту разницу пользователям и позволяет им без проблем взаимодействовать с разделами.
Я ни в коем случае не позиционирую себя как эксперта по стандартам доступности. Но очень постараюсь внятно и серьезно объяснить вам, почему важность стандарта WAI-ARIA не ограничивается только вопросами доступности. Если вы когда-нибудь пользовались блочными элементами, которые описаны в этом разделе, то, скорее всего, встречались с чем-то вроде этого:
<body>
<header>
<h1>Тракторы: Интерактивное руководство</h1>
</header>
<article>
<header>
<h2>Обслуживание тракторов</h2>
</header>
</article>
</body>
Заметили? У документа два тега header, и оба использованы правильно. Вся проблема в CSS:
hheader {
margin: 0 2em;
}
Этот селектор элемента описывает оба тега header. Мы могли бы использовать селектор наследования (т. е. body > header), но это кажется немного тяжеловесным, не говоря уже о том, что верхний заголовок может стать «шапкой» целого сайта. Здесь мы можем выгодно использовать роль WAI-ARIA, просто добавив role=”banner” в HTML:
