Шаг 5. Размечаем фразовые элементы

Попробуем найти на макетах фразовые элементы:

· <img>

· <a> и <button>

· <video>

· <b>, <i> и их семантических «родственников» <strong> и <em>

· <time>

· <span>

Про относительные ссылки: <base>

Размечаем изображения

Тегом <img> размечают содержательные изображения. Такие изображения имеют информационное значение и несут смысл для пользователя, так как влияют на его выбор, на принимаемое пользователем решение. К примеру, это фотографии товара в интернет-магазине.

К содержательным изображениям также относится логотип сайта и логотипы брендов.

Пример содержательных изображений на макете

При использовании тега <img> хорошим тоном считается заполнение атрибута alt, в значении которого кратко описывается изображённое на картинке. Также желательно указывать размеры изображения, чтобы браузер лишний раз не перестраивал страницу при загрузке.

<img src="img/photo-BFG9000.jpg" height="165" alt="Перфоратор BOSCH">

Размечаем ссылки

В аббревиатуре HTML «HT» значит hypertext, а «ML» — markup language, то есть язык разметки гипертекста. Гипертекст — это документы, связанные между собой ссылками. В разметке ссылки размечаются тегом <a>. В разметке наших макетов мы используем тег <a> для разметки навигации по сайту.

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

Рассмотрим примеры:

Пример ссылок на макете

<ul class="site-navigation"> <li><a href="info.html">Информация</a></li> <li><a href="photos.html">Фото и видео</a></li> <li><a href="map.html">Карта штата</a></li> <li><a href="hotels.html">Гостиницы</a></li></ul><a class="main-header-logo"> <img src="img/logo.svg" height="70" alt="Логотип сайта городка Седона"></a>

Замечание

Иногда ссылки могут выглядеть как кнопки, а кнопки — как ссылки. Ответ на вопрос, что сделать ссылкой, не всегда очевиден. Всё зависит от того, как должны вести себя элементы при наведении курсора мыши и какие действия выполняются при нажатии курсора. Обычно это прописано в техническом задании для сайта.

На макете в блоке «Новое в нашем блоге» ссылкой является текст «10 способов сервировки фруктовых щербетов к столу». Нажатие на этот текст перекидывает нас на страницу блога компании.

Пример ссылки в макете

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

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

Если обернуть тегом <a> весь блок, который реагирует на наведение мыши, скринридеры будут читать всё содержимое блока, пытаясь объяснить, куда ведёт эта ссылка. Это будет сложно понять на слух. Лучше ссылкой сделать заголовок блока. Кликабельную область можно реализовать с помощью стилей.

Пример ссылки на сайте

Статья, в которой рассказывается, каким образом это можно реализовать.

Размечаем кнопки

Другой интерактивный элемент — это кнопка, или тег <button>. Чаще всего кнопки используют для разметки элементов управления, связанных с JavaScript. Например: крестик для закрытия всплывающего окна, переключатели слайдов в слайдере, кнопки для увеличения или уменьшения количества рядом с полем формы и так далее.

Попробуем выяснить, какие элементы можно разметить кнопками.

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

Пример ссылок и кнопок в макете

Зачастую эта задача усложняется, так как дизайнеры любят рисовать ссылки и кнопки абсолютно одинаково. Теперь ответы.

· «Все новости» — это ссылка, потому что она может вести на страницу со всеми новостями.

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

· «Как проехать» — ссылка, потому что всегда может быть отдельная страница контактов с картой. С помощью JavaScript можно изменить поведение этой ссылки, чтобы по щелчку на неё происходил не переход на другую страницу, а появление попапа. Если JavaScript по какой-то причине не сработает (например, не успеет загрузиться в Сапсане), то пользователь не увидит попап, а перейдёт на страницу контактов. То есть, когда есть намёк на существование отдельной страницы, это уже ссылка.

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

· «Отправить» — классическая кнопка, которая отправляет форму.

Замечание

Размечаем видео-контент

На страницах типичных лендингов с большим количеством визуального контента часто используется встроенный видео-контент. До появления HTML5, если вы хотели добавить видео на веб-страницу, приходилось использовать элемент <object>, представляющий собой универсальный контейнер для внешних объектов, либо подключать внешний модуль браузера. Сейчас же для добавления видео на страницу достаточно тега <video>, который поддерживает большое количество видео форматов.

Пример использования тега <video>

Разметка для такого контента может выглядеть так:

…<video poster="img/preview.jpg" height="290"> <source src="video.mp4" type="video/mp4"></video><button type="button">Смотреть видео</button>…

В этом примере показано, как с помощью атрибута poster можно добавить картинку-обложку для видео. Часто встречается ситуация, когда стандартные элементы управления видео, которые подключаются с помощью атрибута controls, не подходят под макет сайта. Есть возможность их отключать, а взамен использовать кнопки, внешний вид которых задаётся с помощью стилей. В нашем случае — это кнопка «Смотреть видео».

Есть несколько неочевидных вещей при работе с видео. Во-первых, что тег <video> предназначен не для всех видео, а для тех, на которые мы можем дать прямую ссылку. Зачастую это видеофайлы, которые мы храним на нашем собственном сервере. Это материалы, за которые мы переживаем: уникальный контент, который нам не хочется выкладывать на внешние сервисы вроде YouTube. Во-вторых, что автопроигрывание — зло, и не нужно вставлять существующий для автоматического запуска видео пустой атрибут autoplay, это неприятно, когда пользователь открывает сайт, и у него тут же что-то начинает проигрываться.

Видео Вадима Макеева о том, как вставлять видео с YouTube можно найти по ссылке. Дело в том, что на YouTube невозможно получить прямую ссылку на видеоролик, чтобы вставить его в тег <video>, и это приходится делать через тег для вставки фреймов, <iframe>, который позволяет вставлять в вёрстку внешние самостоятельные документы. Подробности про тег <iframe> и фреймы вообще мы будем рассматривать, когда дойдём до интерактивных элементов сайта.

Так или иначе, <video> — это интерактивный контент, который скорее всего будет управляться скриптом, и который непросто стилизуется. Для семантической вёрстки достаточно разметить ссылки на все три основных формата видео, прописать размеры, определить, что будет загружено сразу при обновлении страницы, задать обложку.

<video controls poster="img/preview.jpg" preload="metadata" height="320"> <source src="video.mp4" type="video/mp4"> <source src="video.ogv" type="video/ogg"> <source src="video.webm" type="video/webm"></video>

Размечаем время

Тег <time> указывает на дату и время, причём как для людей, так и для роботов. Если внутри тега находится текст вроде «через день после конца каникул», то машиночитаемую форму стоит указать в атрибуте datetime. Машиночитаемый формат — это целый комплекс вариантов, и все они указаны в спецификации.

<!-- Год, месяц, день --> 2020-01-01 2020-01 01-01<!-- Локальное время --> 15:12<!-- Год, месяц, день и локальное время вместе --> 2020-01-01T15:12

Собственных стилей у тега нет, по сути он нужен для правильной индексации контента. Попробовать на практике, как работает этот тег, можно в задании 15 главы «Разметка текста».

Замечание