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

Тег section может использоваться для того, чтобы разбить главную страницу. Допустим, ваш блог состоит из персональной информации о вас, ваших презентаций и регулярно размещаемых постов. Попробуйте разбить это на разделы:

Возможно, каждая из этих частей носит свою «шапку», поэтому мы можем считать их довольно важными. Так что наше решение по поводу разбивки на разделы оправдано. Если бы вы писали книгу наподобие этой, вы могли бы для каждой из глав создать раздел, а затем внутри каждого раздела – подраздел. Что касается семантики на сайте, общий совет: не «зависайте» на деталях. Выберите элемент, основанный на самой полной информации, которая у вас есть сейчас – и вперед! Семантика субъективна. И не парьтесь по пустякам!

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

Если вам нужен простой критерий распознавания статьи, используйте такой практический прием: если часть контента все еще имеет смысл вне текущего контекста (т. е. если пользователь не видит элементы страницы с этим контентом), тогда это, скорее всего, статья. Отсюда – блоги и онлайн-новости.

Я использую тег article для набора контента, скажем, для списка презентаций, которые я представлял раньше, возможно, с кратким обзором:

Моипрезентации

Введениев HTML5

4-часовой мастер-класс, который я проводил

в Австралии

Compass и SASS

Используйте качественную библиотеку CSS,

и вы сможете сконцентрироваться на важных вещах.

Зоркие читатели могут спросить «Похоже на список! Почему бы не использовать тег ul?» И будут правы. Он, безусловно, может быть элементом списка. Но articleпоказывает, что, хотя эти элементы похожи, они не имеют отношения друг к другу. Мы можем спорить об этом до бесконечности. Но, в конце концов, на вкус и цвет товарищей нет, и решение за вами.

Вы когда-нибудь использовали класс или идентификатор как «шапку» или баннер? Или даже для заголовка сайта? Тег headerможет использоваться как нечто большее, чем просто заголовок сайта. Его можно (но совсем не обязательно) применять внутри тегов articleили section. Просто используйте его, когда нужно, чтобы блочный элемент разграничивал пространство на странице для ясности. Например, я часто храню заголовки и метаинформацию в шапке поста блога.

Тег footerаналогичен тегу header. Вы можете использовать его внутри тегов articleили section, или глобально, внутри body.

Тег aside может использоваться на уровне страницы или внутри article. Его содержимое можно считать полезной информацией, но вовсе не основной.

Например, для мобильных версий своего сайта вы можете скрыть aside-элементы. Как бы вы ни обошлись с тегом, он заставит вас принять решение о контенте. Запись в блоге можно представить так:

Все о тракторах

1 января 2012

Написано полностью Брюсом Лосоном

Вы заметили в предыдущем примере новый тег? Тег timeпрост: используйте его для показа времени. Вы также можете представить машинно-читаемую версию.

Опубликовано 3 April 1984

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

Элемент navявно предназначен для навигации сайта. Вы можете вставлять теги nav, чтобы создавать выпадающее меню. Тег не годится для списка презентаций, который я показывал вам, когда мы говорили о теге article. Приберегите nav для своего сайта, когда дело дойдет до структурной навигации сайта. Например:

Продукция

Контактная информация

О компании

(Хотите узнать, для чего нужен атрибут role? Тогда читайте дальше!)

Возможно, вы добавляете на свои страницы много изображений. А задумывались ли вы когда-нибудь о том, как лучше задать подписи к ним? Вот было бы здорово, если бы можно было аккуратно подписать изображение! Для этого-то нам и нужен тэг figure.

рядом маленькая бутылочка с водой.”>

маленькая бутылочка с водой.

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

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

Div(division) означает «раздел», и порой нет лучшего тега для описания куска контента. Возможно, все, что вам нужно, это контейнер для применения стилей. Так бывает. Это не в упрек вам. Семантика – штука коварная. Если вы на самом деле не умеете описывать куски контента с использованием каких-то тегов HTML, о которых мы говорили выше, берите div и не казните себя за это.

Теперь, когда у нас есть несколько новых элементов для разметки блоков (т. е. sectionи article), простая структура старого документа, которую мы использовали, чуть-чуть изменилась. Элементы разметки блоков можно рассматривать как блоки всего html-документа. Другими словами, теги заголовков от h1до h6могут использоваться внутри них.

Но будьте внимательны! Вы можете столкнуться с чем-то подобным:

Блог о велоспорте

Раннее утро на дороге Блэкспур

…

Многократно вставлять h1в один и тот же документ? Это безумие! Вместо этого я применяю заголовки, чтобы показать структуру внутри заданного раздела:

Полноформатный кадр: Блог о фотографии

Раннее утро на дороге Блэкспур

…

Купите нашу книгу!

…

Печатное издание

…

Купитьза $90

Электронное издание: PDF или eBook

…

Купитьза $15

Это не только упрощает оформление заголовков, но и выглядит лучше: меньше путаницы и не надо плыть против течения.

До того, как в наше распоряжение попали теги section и article, мы могли использовать для описания глубокой иерархии сайта только теги от h1 до h6. Теперь мы вольны описывать безграничные уровни глубины и можем точно представлять каждый уровень контента.