Определяем структуру страниц примерного сайта

Определяем структуру страниц примерного сайта

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

Начнем сверху, с тега header. В хедер можно поместить логотип и заголовок сайта «The Herald», а также слоган. Также можно добавить меню nav.

После хедера основной контент нашего сайта разбивается на три колонки. Вы можете использовать теги section для колонок, но лучше остановитесь и подумайте о контенте. Если в колонках будут отдельные «секции» с информацией (колонка про спорт, развлечения), то можно было бы и использовать тег section. А у нас разделение на колонки только визуальное, поэтому мы возьмем обычный старый div.

Внутри блоков div у нас будут идти статьи, и идеальным кандидатом будет тег article.

В правой крайней колонке кроме статей расположено три блока с рекламой. Блоки с рекламой будут располагаться в тегах article и оборачиваться в aside. Такой подход может показаться странным, но вспомните описание тега article: «самодостаточная композиция […], которая, в принципе, независимая и повторно используемая». И рекламный блок почти идеально подходит под описание, так как обычно он должен размещаться на разных сайтах без модификаций.

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

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

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

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

На данный момент третья колонка содержит два элемента друг над другом: aside и article. Чтобы скрепить их и упростить стилизацию, мы обернем их в тег div. Мы не будем использовать section и другую семантическую разметку, так как это подразумевало бы, что article и aside каким-то образом тематически связаны. Эти блоки не связаны – это просто элементы нашего дизайна, которые расположены в одной колонке.

Новый элемент main

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

К сожалению, объявление тега main и способы его использования немного сложнее. Давайте начнем с происхождения этого элемента. В HTML документах разработчики оборачивали главный контент в общий тег:

<body> <header> ... </header>
<div id="main"> ... </div>
<footer> ... </footer>
</body>

Обратите внимание, что общий тег div здесь используется наравне с header и footer. Также взгляните на ID атрибут со значением main. Также множество разработчиков добавляли ARIA роль к этому тегу:

<div id="main" role="main"> ...
</div>

Мы не будем углубляться в ARIA, эта тема разобрана в Приложении B. Однако новый тег main должен заменить эту практику.

W3C определяет main следующим образом: «тег main представляет собой главный контент тела документа или приложения. Основная область контента содержит контент, который напрямую относится или расширяет центральную тему документа или функционал приложения».

В спецификации WHATWG определение похожее, однако дальше две спецификации сильно расходятся. В спецификации WHATWG говорится: «Нет ограничений по количеству тегов main в документе. Кроме того, существует много примеров, где даже нужно использовать несколько тегов main. Например, на странице с множеством тегов article можно обозначать доминирующий контент каждого такого элемента.»

Это полностью противоречит спецификации W3C:

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

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

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

«Авторы не должны использовать более одного тега main в документе. Нельзя использовать тег main в качестве дочернего элемента для article, aside, footer, header или nav.»

Также W3C спецификация рекомендует использовать атрибут role=»main» в теге main, пока он не будет полностью распознаваться в браузерах. Мы воспользуемся советами W3C и будем использовать один тег main на странице, а также ARIA роль в качестве фолбэка.

Вернемся к разметке нашего сайта, вот так она будет выглядеть после добавления main в body:

<body> <header> ... </header> <main role="main">
</main> <footer> ... </footer> <script src="js/scripts.js"></script>
</body>

Как видите, main не входит в header и footer. В теге main будут располагаться наши три колонки, которые будут составлять главную часть макета и контента сайта The HTML5 Herald.

Продолжаем структурировать сайт The Herald

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

Давайте добавим новые элементы на страницу, чтобы посмотреть, что получится:

<body>
  <header>
 <nav></nav>
  </header>

  <main role="main">
 <div class="primary">
 <article></article>
 </div>

 <div class="secondary">
 <article></article>
 </div>

 <div class="tertiary">
 <aside>
 <article></article>
 </aside>

 <article>
 </article>

 </div>
  </main><!-- main -->

  <footer>
 <section id="authors">
 <section></section>
 </section>
 <section id="copyright">
 </section>
  </footer>

  <script src="js/scripts.js"></script>
</body>

На скриншоте ниже показана страница с подписями основных использованных структурных элементов.

Определяем структуру страниц примерного сайта

Мы получили структуру, которая послужит надежной опорой для контента нашего сайта.

Замечание: а что если я использую не те элементы?

Иногда бывает сложно запомнить, какой элемент использовать в определенной ситуации. Рекомендуем не заморачиваться и не сидеть долго, думая о семантике. Хорошо быть последовательным, но у неправильного выбора элементов есть несколько последствий. Если ваши страницы доступны, нужно думать именно об этом. Конечно, есть случаи, когда семантически правильные элементы повышают доступность, поэтому рекомендуем вам изучить этот вопрос и быть уверенными в том, что выбранные элементы не понизят доступность ваших страниц. Начать можно с HTML5 Accessibility и The Accessibility Project.

Заключение

С этой главной закончили. Мы изучили основы структурирования контента в HTML5 и начали создавать наш примерный сайт, применяя полученные знания.

В следующей главе мы более подробно разберем HTML5 контент и продолжим добавлять семантику на нашу страницу с помощью других 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