1. 7. 2. Шаг 1. Выделяем крупные смысловые блоки на каждой странице сайта

Шаг 1. Выделяем крупные смысловые блоки на каждой странице сайта

Типичный список блоков: Шапка, Подвал и Основное содержимое или, если перевести это на язык тегов, <header>, <footer> и <main>.

Вспомним назначение каждого из указанных семантических тегов:

<header> — это вводная часть всего документа или одного из его разделов;
<main> — основное содержимое страницы — то, что не повторяется на других страницах, уникальное содержимое каждой страницы;
<footer> — это заключительная часть всего сайта или смыслового раздела со справочной информацией.

Про футер и хедер подробнее

В русском языке прижилась традиция называть <footer> «подвалом» и считать, что это «то, что внизу и содержит копирайт». Но мы изучаем и практикуем семантический подход к разметке, а он определяет элементы по их содержанию, а не по расположению.

Итак, что такое футер? Это поточный элемент, в который обычно помещается информация об авторе, копирайты, ссылки на связанные документы, лицензионную информацию, индексы, приложения и подобный контент. А ещё адреса, навигация, ссылки на главную — огромное количество информации. Кроме того, у секций, например, у <article>, может быть свой футер, а у сайта вообще — свой, другой. Футер относится к своему непосредственному родительскому элементу.

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

Вот пример с сайта Академии:

<article>
  <div class="post-head" style="background-image: url('bg-image.jpg');">
    <h1>Туториал. Интерактивная SVG-диаграмма</h1>
  </div>
  <footer class="meta">
    <ul class="post-info">
      <li class="post-info-item">
        <time class="post-info-value post-info-value-datetime" datetime="2020-03-27"> 27 марта 2020</time>
      </li>
      <li class="post-info-item">
        <span class="post-info-value post-info-value-readtime">17 мин</span>
      </li>
      <li class="post-info-item">
        <span class="post-info-value post-info-value-visits">4 275</span>
      </li>
    </ul>
    <p class="post-tags">
      <a href="#" alt="Ссылка на тему">Фронтенд</a>
    </p>
    <div class="post-author">
      <p class="author-text">Автор <a href="#">Саша Смыгина</a></p>
      <a class="author-pic" href="#"><img src="author-pic.jpg" width="50" height="50" alt="Портрет Саши Смыгиной"></a>
    </div>
  </footer>
  <p>Сейчас все активно обсуждают радости и гадости удалённой работы, и мы даже выпустили статью на эту тему. А ещё провели небольшой опрос и попросили наших пользователей рассказать, с какими трудностями они сталкиваются во время работы дома (спойлер — все ленятся). Статистику нужно как-то красиво оформить, так почему бы не сделать SVG-график? Заодно научимся чему-нибудь новому. Поехали!</p>
</article>

Некоторые виды информации, вроде навигации или метаданных поста, могут быть помещены в футер, в хедер, в оба или ни в один.

Так, раз футер — это не «подвал» сайта, то, может, и хедер — не шапка? Вы не поверите. Спецификация говорит нам о хедере, что это элемент для группировки навигации и вводного контента. Хедер относится к своему непосредственному родительскому элементу, то есть у отдельных секций могут быть свои хедеры, а хедер, помещённый непосредственно в <body>, относится ко всей странице.

<body>
  <header>
    <h1>Основной заголовок страницы</h1>
    <nav>
      <ul>
        <li>Пункт меню</li>
        <li>Ещё пункт меню</li>
      </ul>
    </nav>
    <img src="/logo.svg" width="100" alt="Логотип компании">
  </header>
...
</body>

Спецификация позволяет использовать группировки заголовков с помощью тега <hgroup>, но мы советуем этого не делать, потому что это противоречит принципу последовательности заголовков и влияет на семантическую структуру документа.

Мы наглядно продемонстрируем процесс определения этих блоков, для этого понадобится, как минимум, две страницы сайта.

Рассмотрим макет главной страницы и страницы каталога сайта интернет-магазина Nёrds:

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

Прямоугольниками синего цвета мы выделили крупные смысловые блоки.

Структура страницы в разметке на этом этапе такая:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Заголовок страницы</title>
  </head>
  <body>
    <header class="main-header">
      <!-- Шапка сайта -->
    </header>
    <main>
      <!-- Основное содержимое страницы -->
    </main>
    <footer class="main-footer">
      <!-- Подвал сайта -->
    </footer>
  </body>
</html>

Замечание

С помощью атрибута class ещё на этапе разметки можно уточнить, какую роль элемент будет играть на странице. К примеру, чтобы подчеркнуть, что тег <header> — это шапка всего документа, добавим ему атрибут class со значением main-header

Previous1. 7. 1. Определяем DOCTYPE Next1. 7. 3. Шаг 2. Размечаем в блоках крупные смысловые разделы

Last updated 11 months ago