Базовая структура HTML5 страниц

Базовая структура HTML5 страниц

От автора: данная статья является выдержкой из нашей книги HTML5 и CSS3 для реального мира, 2-е издание за авторством Алексиса Гольдштейна, Луиса Лазариса и Эстель Вейль. Книгу можно найти в магазинах по всему миру или купить цифровую версию. Мы разобрались с основой нашего шаблона, теперь давайте приклеим мышцы на наш скелет, создадим структуру страницы.

Далее в книге мы будем добавлять специальные CSS3 свойства и HTML5 теги, а сейчас мы разберем элементы, которые нам понадобятся для создания макета сайта. В этой и последующих главах мы будем много говорить о семантике. Когда мы упоминаем термин «семантика», мы указываем на то, как конкретный HTML элемент описывает значение своего контента.

Если вернуться к скриншоту сайта The HTML5 Herald (или посмотреть сайт онлайн), можно заметить, что сайт разделен на разделы:

хедер с логотипом и заголовком;

панель меню;

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

основной контент, разделенных на три колонки;

статьи и рекламные блоки в колонках;

футер с копирайтом и информацией об авторах.

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

Элемент header

Конечно, первый элемент, который мы рассмотрим, будет header. Спецификация описывает его коротко «группа вводных и навигационных средств».

Вопреки вашему мнению новый тег header можно вставлять в любую секцию с контентом. Он используется не только для хедера страницы (который вы по старинке могли размечать <div id=»header»>). Когда мы упоминаем слово «секция», мы не ограничиваемся только тегом section, о котором расскажем в следующем разделе. Мы имеем в виду то, что в HTML5 называется «секционный контент». То есть любой кусок контента, для которого нужен отдельный хедер, даже если таких кусочков на странице будет много.

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

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

Элемент section

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

Далее объясняется, что section не следует использовать в качестве контейнера для стилизации или скриптов. Если section нельзя использовать в качестве общего контейнера (например, для макетирования в CSS), то что можно? Наш старый добрый несемантический div.

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

Несколько примеров правильного использования section:

отдельные секции интерфейса вкладок;

сегменты страницы «О нас». Например, страница о нас компании может включать секции об истории компании, ее миссии и команде;

различные части длинной страницы «условия использования»;

различные секции новостного сайта. Например, статьи можно сгруппировать в секции о спорте, мировые новости, экономика.

Замечание: правильное использование section

Каждый раз, когда выходит новый семантический элемент, веб-дизайнеры начинают спорить о правильном использовании, о том, что имелось в виду в спецификации и т.д. Можете вспомнить обсуждения вокруг правильного использования тега dl в предыдущих HTML спецификациях. Не удивительно, что HTML5 тоже подвергся спорам, в частности по тегу section. Даже Bruce Lawson, уважаемый человек в HTML5, сказал, что раньше неправильно использовал section. Прочтите пост Брюса, объясняющий его ошибку. Если коротко:

тег section – общий тег, если есть более семантический тег (article, aside или nav), используйте его.

тег section семантический. Контент внутри него каким-то образом связан. Если вы не можете кратко описать весь контент, который хотите поместить в section, лучше используйте семантически нейтральный контейнер – обычный div.

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

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

Элемент article

Тег article похож на section, но есть заметные различия. Определение из спецификации: «Тег article представляет собой полноценную, самодостаточную композицию в документе, странице, приложении или сайте. По сути, данный тег независимый и повторно используемый, например, при агрегации.»

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Ключевые термины в этом определении – самодостаточная композиция и независимый. Тег section может хранить контент, который можно сгруппировать по теме, а тег article должен содержать один самостоятельный кусок контента. Различия довольно сложно понять, поэтому если сомневаетесь, попробуйте провести тест на агрегацию: если часть контента можно опубликовать повторно на другом сайте без модификаций, или если его можно залить как обновление через RSS, или в Twitter и Facebook, то используйте article.

Вы сами решаете, что считать статьей, ниже я привел несколько предложений вместе с рекомендациями из спецификации:

пост на форуме;

статья в журнале или газете;

запись в блоге;

пользовательские комментарии в посте в блоге или статье.

Как и section, тег article можно вкладывать в другие теги article. Также можно вкладывать section в article и наоборот. Все зависит от вашего контента.

Элемент nav

Можно с уверенностью сказать, что тег nav будет в почти каждом проекте. Тег nav представляет собой ровно то, что вы подумали: группу ссылок навигации. Самый распространенный способ использования nav – контейнер для маркированного списка ссылок, хотя есть и другие варианты. Например, тегом nav можно обернуть параграф текста с основными ссылками навигации по странице или секции страницы.

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

Замечания: ссылки skip navigation

На множестве сайтов вы могли видеть дизайнерский шаблон «skip navigation». Идея заключается в том, чтобы позволить пользователям с ограниченными возможностями, использующими скрин ридеры, пропускать те пункты меню, о которых они уже слышали. Нет смысла слушать все меню заново после каждого клика на новую страницу! Тег nav может потенциально избавить нас от этой проблемы. Он позволит пользователям пропускать меню без дополнительной ссылки. В спецификации говорится: «юзер агенты (например, скрин ридеры), ориентированные на пользователей, которые могут пропустить первичный рендеринг меню, или которые хотят получить меню сразу, могут использовать этот элемент для определения контента на странице, который можно пропустить или получать по запросу (или оба варианта)».

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

Замечание: юзер агенты

В спецификации вам часто будет попадаться термин «юзер агент». На самом деле это просто причудливое название браузера – ПО, с помощью которого пользователи получают доступ к контенту на странице. В спецификации не используется слово браузер потому, что под юзер агентом можно понимать скрин ридеры и любое другое ПО для чтения веб-страниц.

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

Как и с section, по правильному использованию тега nav, а также по условиям, в которых его можно применять, также ведутся споры (как и с footer). Некоторые считают, что этот тег нельзя использовать для постраничной навигации и хлебных крошек, формы поиска, которая является первичным средством навигации по сайту (как на сайте Google).

Тут все зависит только от вас, от разработчика. Ian Hickson, главный редактор HTML5 спецификации WHATWG на вопрос ответил прямо: «используйте этот тег там, где вы бы использовали class=nav».

Элемент aside

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

Тег aside можно использовать в качестве контейнера для контента, который косвенно связан:

с определенными независимыми частями контента (например, article или section);

со всей страницей или документом, как обычно бывает при добавлении сайдбара на страницу или сайт.

Тег aside нельзя использовать в качестве контейнера для секций страницы, которые относятся к первичному контенту. Другими словами, тег aside не вводный. Контент в aside может быть сам по себе, но в то же время оставаться частью чего-то большего.

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

Элемент footer

Последний элемент, который мы разберем в этой главе – footer. Как и header, тег footer можно использовать несколько раз на странице. Используйте footer вместо <div id=”footer”>.

Спецификация говорит, что тег footer представляет собой футер секции контента для ближайшего родительского блока. Секцией контента может выступать весь документ, section, article или тег aside.

Часто в footer помещают копирайт, список ссылок, информацию об авторе и другую информацию, которую вы будете искать в конце блока с контентом. Как и aside и header, тег footer не связан положением на странице. Его можно размещать не только в конце секции или страницы. В большинстве случаев это будет именно так, но не всегда. Например, информация об авторе поста в блоге может располагаться сверху, а не снизу, но она будет считаться информацией из футера.

Замечание: как мы пришли к тому, что у нас есть?

Если вам интересно, какой путь проделал HTML5, и как мы пришли к этим тегам, прочитайте книгу Luke Stevens правда о HTML5. Сейчас вышло второе издание книги, и оно довольно спорное. Помимо освещения множества HTML5 технологий, таких как видео и canvas, он также подробно рассказывает историю HTML5. Автор рассказывает про проблемы семантики и доступности, которые есть у новых элементов, а также дает советы по решению этих проблем.

Редакция: Louis Lazaris

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree