Глава 8.12. Метаданные, дата, автор

Зачастую оформление тегов, информации об авторе, технические данные о новости важны для правильного восприятия материала, например, если автор известен, или у материала есть «срок годности». Обычно метаданные получают из базы данных и из системы управления контентом сайта, и вопрос их получения мы рассматривать не будем. Наша задача — сверстать их красиво и правильно.

Какие данные могут попасть в «мета»? Информация об авторе, а именно имя и ссылка на профиль или все материалы автора; информация о дате создания, публикации и/или дате изменения материала; количество просмотров; количество комментариев; теги; категория материала. Из редко встречающегося — время прочтения; ключевые слова…

Если таких данных довольно много и их нужно сгруппировать, можно объединить их в <footer>. Тег <footer> семантически означает побочную информацию о контенте, а не только буквально «подвал». Футеров на странице может быть несколько, и они не обязательно должны находить внизу страницы или секции. Спецификация тега <footer>.

Обязательное использование <footer> — не правило, а только дополнительная возможность структурировать данные.

Это метаданные в блоге Академии. Мы их переверстали

Вёрстка элемента

<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" height="50" alt="Портрет Саши Смыгиной"></a> </div> </footer> <p>Сейчас все активно обсуждают радости и гадости удалённой работы, и мы даже выпустили статью на эту тему. А ещё провели небольшой опрос и попросили наших пользователей рассказать, с какими трудностями они сталкиваются во время работы дома (спойлер — все ленятся). Статистику нужно как-то красиво оформить, так почему бы не сделать SVG-график? Заодно научимся чему-нибудь новому. Поехали!</p></article>article { font-family: "Muller", "Arial", sans-serif; font-size: 16px; line-height: 1.5em; color: #333333;}

h1 {

max-width: 600px;

font-size: 42px;

line-height: 48px;

color: #ffffff;

}

.post-head {

min-height: 320px;

padding: 25px;

}

.meta {

display: flex;

justify-content: space-between;

align-items: center;

padding: 20px 25px;

background-color: #f6f6f6;

}

.meta a {

color: #302683;

text-decoration: none;

}

.meta a:hover,

.meta a:focus {

text-decoration: underline;

}

.post-info {

display: flex;

justify-content: space-between;

margin: 0;

padding: 0;

list-style: none;

}

.post-info-item {

margin-right: 15px;

}

.post-info-value::before {

content: "";

display: inline-block;

width: 20px;

height: 20px;

margin-right: 5px;

vertical-align: middle;

background-position: center;

background-repeat: no-repeat;

}

.post-info-value-datetime::before {

background-image: url("datetime.svg");

}

.post-info-value-readtime::before {

background-image: url("readtime.svg");

}

.post-info-value-visits::before {

background-image: url("visits.svg");

}

.post-tags {

margin-right: auto;

margin-left: 30px;

}

.post-author {

display: flex;

align-items: center;

}

.author-pic {

margin-left: 15px;

}

.author-pic img {

border-radius: 50%;

}

Зачастую метаданные новостей имеют вид ключа и значения. Данные могут быть разделены на категории, например, более подробная информация об авторе может размещаться сбоку или ниже. Если метаданные состоят из ключа и значения, уместно верстать их как список определений: dl > dt + dd

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

Вёрстка элемента

<h1 class="heading">Здание «Доминион» потрясающего архитектора Захи Хадид</h1><dl class="meta"> <div class="meta-item meta-item-author"> <dt>Автор</dt> <dd>Админ</dd> </div> <div class="meta-item meta-item-reading-time"> <dt>Время на прочтение</dt> <dd>3 мин</dd> </div> <div class="meta-item meta-item-publish-date"> <dt>Опубликовано</dt> <dd><time datetime="2019-11-12">2019-11-12</time></dd> </div></dl>.heading { font-family: "Montserrat", "Arial", sans-serif; font-style: normal; font-weight: bold; font-size: 16px; line-height: 20px; letter-spacing: 0.13em; text-transform: uppercase; color: #000000;}.meta { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 2px solid #e5e5e5; font-family: "Montserrat", "Arial", sans-serif; font-style: normal; font-weight: 500; font-size: 14px; line-height: 20px; color: rgba(0, 0, 0, 0.5);}.meta-item { position: relative; padding-left: 50px;}.meta-item::before { content: ""; position: absolute; left: 0; top: 0; width: 36px; height: 36px; background-position: center; background-repeat: no-repeat;}.meta-item-author::before { background-image: url("author.svg");}.meta-item-reading-time::before { background-image: url("reading-time.svg");}.meta-item-publish-date::before { background-image: url("publish-date.svg");}.meta dt { color: rgba(0, 0, 0, 0.5);}.meta dd { margin: 0; color: #d90000;}

Также допустимо объединить метаинформацию с заголовком в начале статьи в теге <header>. Рассмотрим ещё один пример с объединением заголовка, контентной картинки и метаинформации.

Метаинформация сгруппирована в теге <header>

Вёрстка элемента

<article class="main-article"> <header class="main-article-header"> <img class="main-article-header-img" src="photo.jpg" height="309" alt="Вид на горную деревню в Грузии"> <div class="container main-article-header-content"> <p class="tag"><a href="#">Путешествия</a></p> <h1 class="heading">Путеводитель по Грузии: что стоит посмотреть в первую очередь</h1> <div class="meta-row">   <div class="meta-col">     <span class="meta meta-views">1 479</span>   </div>   <div class="meta-col">     <span class="meta meta-comments">72</span>   </div>   <div class="meta-col">     <span class="meta meta-likes">938</span>   </div> </div> </div> </header> <div class="container"> <p>Итак, это произошло. Вы купили билеты, собрали чемоданы, возможно уже прилетели в страну и поняли, что не знаете куда сходить и что посмотреть. Не переживайте, сейчас во всём разберёмся.</p> </div></article>.container { width: 430px; margin: 0 auto; padding-left: 15px; padding-right: 15px;}.main-article { font-family: "Georgia", "Times New Roman", serif; font-style: normal; font-weight: normal; font-size: 13px; line-height: 20px; color: #333333;}.main-article-header { position: relative; margin-bottom: 53px; border-top: 1px solid transparent; text-align: center; font-family: "Montserrat", "Arial", sans-serif; color: #ffffff;}.main-article-header-content { position: relative; padding-top: 22px; padding-bottom: 22px; margin-top: 32px; background-color: rgba(0, 0, 0, 0.5); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);}.main-article-header-img { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto;}.heading { margin: 0; font-family: "Georgia", "Times New Roman", serif; font-style: normal; font-weight: normal; font-size: 32px; line-height: 36px;}.tag { font-weight: 300; font-size: 10px; line-height: 12px; letter-spacing: 0.04em; text-transform: uppercase;}.tag a { color: inherit; text-decoration: none;}.tag a:hover,.tag a:focus { text-decoration: underline;}.meta-row { display: flex; justify-content: center; align-items: center; margin: 32px 0 18px;}.meta-col { margin-left: 10px; margin-right: 10px;}.meta { display: flex; align-items: center; margin: 0; font-weight: 500; font-size: 10px; line-height: 11px;}.meta::before { content: ""; width: 10px; height: 7px; margin-right: 4px; background-position: center; background-repeat: no-repeat;}.meta-date::before { background-image: url("../img/calendar.svg");}.meta-read-time::before { background-image: url("../img/watch.svg");}.meta-views::before { background-image: url("../img/eye.svg");}

Методика~ 8 минут