1. 7. 6. Шаг 5. Размечаем фразовые элементы
Попробуем найти на макетах фразовые элементы:
<img><a>и<button><video><b>,<i>и их семантических «родственников»<strong>и<em><time><span>
Размечаем изображения
Тегом <img> размечают содержательные изображения. Такие изображения имеют информационное значение и несут смысл для пользователя, так как влияют на его выбор, на принимаемое пользователем решение. К примеру, это фотографии товара в интернет-магазине.
К содержательным изображениям также относится логотип сайта и логотипы брендов.
При использовании тега <img> хорошим тоном считается заполнение атрибута alt, в значении которого кратко описывается изображённое на картинке. Также желательно указывать размеры изображения, чтобы браузер лишний раз не перестраивал страницу при загрузке.
Размечаем ссылки
В аббревиатуре HTML «HT» значит hypertext, а «ML» — markup language, то есть язык разметки гипертекста. Гипертекст — это документы, связанные между собой ссылками. В разметке ссылки размечаются тегом <a>. В разметке наших макетов мы используем тег <a> для разметки навигации по сайту.
Также часто тегом <a> оборачивают логотип сайта, чтобы дать пользователю возможность из любого места сайта вернуться на главную страницу.
Рассмотрим примеры:
Замечание
Логотип — это ссылка на главную страницу сайта. Но как лучше поступить с разметкой логотипа на самой главной странице? Ведь это не очень хорошо, когда страница ссылается сама на себя. В случае главной страницы логотип всё равно можно оставить в теге <a>, но без атрибута href. Такой приём облегчает стилизацию.
Иногда ссылки могут выглядеть как кнопки, а кнопки — как ссылки. Ответ на вопрос, что сделать ссылкой, не всегда очевиден. Всё зависит от того, как должны вести себя элементы при наведении курсора мыши и какие действия выполняются при нажатии курсора. Обычно это прописано в техническом задании для сайта.
На макете в блоке «Новое в нашем блоге» ссылкой является текст «10 способов сервировки фруктовых щербетов к столу». Нажатие на этот текст перекидывает нас на страницу блога компании.
Другой пример. На макете ниже показано обычное состояние блока с новостью и состояние при наведении.
В этом случае перейти на полный текст новости можно при клике на заголовок новости и на области с дополнительной информацией. При этом, как вы, наверное, заметили, появляются ещё и дополнительные элементы для работы с новостью (сохранить в закладках, поделиться и так далее).
Если обернуть тегом <a> весь блок, который реагирует на наведение мыши, скринридеры будут читать всё содержимое блока, пытаясь объяснить, куда ведёт эта ссылка. Это будет сложно понять на слух. Лучше ссылкой сделать заголовок блока. Кликабельную область можно реализовать с помощью стилей.
Статья, в которой рассказывается, каким образом это можно реализовать.
Размечаем кнопки
Другой интерактивный элемент — это кнопка, или тег <button>. Чаще всего кнопки используют для разметки элементов управления, связанных с JavaScript. Например: крестик для закрытия всплывающего окна, переключатели слайдов в слайдере, кнопки для увеличения или уменьшения количества рядов с полем формы и так далее.
Попробуем выяснить, какие элементы можно разметить кнопками.
Посмотрите на макет и попробуйте угадать, где нарисованы ссылки, а где кнопки.
Посмотреть ответ
Зачастую эта задача усложняется, так как дизайнеры любят рисовать ссылки и кнопки абсолютно одинаково. Теперь ответы.
«Все новости» — это ссылка, потому что она может вести на страницу со всеми новостями.
«Назад»/«Вперёд» — кнопка, потому что непонятно, куда она может вести. Она просто переключает фотографии, которые находятся на одной странице.
«Как проехать» — ссылка, потому что всегда может быть отдельная страница контактов с картой. С помощью JavaScript можно изменить поведение этой ссылки, чтобы по щелчку на неё происходил не переход на другую страницу, а появление попапа. Если JavaScript по какой-то причине не сработает (например, не успеет загрузиться в Сапсане), то пользователь не увидит попап, а перейдёт на страницу контактов. То есть, когда есть намёк на существование отдельной страницы, это уже ссылка.
«Обратная связь» — ссылка, её поведение очень схоже с ссылкой «Как проехать». В случае, когда сработает JavaScript, откроется попап для заполнения формы обратной связи, в противном случае пользователя можно перекинуть на отдельную страницу с данной формой.
«Отправить» — классическая кнопка, которая отправляет форму.
Замечание
У тега <button> обязательно нужно явно прописывать атрибут type. По умолчанию его значение — submit, а зачастую нужен тип button. Особенно важно это для кнопок, которые находятся вне форм и нужны для JavaScript.
Размечаем видеоконтент
На страницах типичных лендингов с большим количеством визуального контента часто используется встроенный видеоконтент. До появления HTML5, если вы хотели добавить видео на веб-страницу, приходилось использовать элемент <object>, представляющий собой универсальный контейнер для внешних объектов, либо подключать внешний модуль браузера. Сейчас же для добавления видео на страницу достаточно тега <video>, который поддерживает большое количество видео форматов.
Разметка для такого контента может выглядеть так:
В этом примере показано, как с помощью атрибута poster можно добавить картинку-обложку для видео. Часто встречается ситуация, когда стандартные элементы управления видео, которые подключаются с помощью атрибута controls, не подходят под макет сайта. Есть возможность их отключать, а взамен использовать кнопки, внешний вид которых задаётся с помощью стилей. В нашем случае — это кнопка «Смотреть видео».
Есть несколько неочевидных вещей при работе с видео. Во-первых, что тег <video> предназначен не для всех видео, а для тех, на которые мы можем дать прямую ссылку. Зачастую это видеофайлы, которые мы храним на нашем собственном сервере. Это материалы, за которые мы переживаем: уникальный контент, который нам не хочется выкладывать на внешние сервисы вроде YouTube. Во-вторых, что автопроигрывание — зло, и не нужно вставлять существующий для автоматического запуска видео пустой атрибут autoplay, это неприятно, когда пользователь открывает сайт, и у него тут же что-то начинает проигрываться.
Видео Вадима Макеева о том, как вставлять видео с YouTube можно найти по ссылке. Дело в том, что на YouTube невозможно получить прямую ссылку на видеоролик, чтобы вставить его в тег <video>, и это приходится делать через тег для вставки фреймов, <iframe>, который позволяет вставлять в вёрстку внешние самостоятельные документы. Подробности про тег <iframe> и фреймы вообще мы будем рассматривать, когда дойдём до интерактивных элементов сайта.
Так или иначе, <video> — это интерактивный контент, который скорее всего будет управляться скриптом, и который непросто стилизуется. Для семантической вёрстки достаточно разметить ссылки на все три основных формата видео, прописать размеры, определить, что будет загружено сразу при обновлении страницы, задать обложку.
Размечаем время
Тег <time> указывает на дату и время, причём как для людей, так и для роботов. Если внутри тега находится текст вроде «через день после конца каникул», то машиночитаемую форму стоит указать в атрибуте datetime. Машиночитаемый формат — это целый комплекс вариантов, и все они указаны в спецификации.
Замечание
Тег <time> удобно использовать для разметки даты публикации поста в блоге. Если в метаинформации для поста блога используется период, каждая дата размечается тегом <time>.
Размечаем мелкие текстовые элементы
Дальше давайте разберём примеры разметки мелких текстовых элементов.
До появления HTML5 теги <i> и <b> обозначали текст, который выделен курсивом и жирным шрифтом. Когда же идея о том, чтобы отделить семантику от представления, стала набирать обороты, к этим тегам начали относиться с подозрением. Их заменили на <em> и <strong>, которые обозначают акцент (stress emphasis) и большую важность, серьезность (strong importance).
В HTML5 теги <i> и <b>, наконец, получили хорошую семантическую интерпретацию.
Тегом <i> помечается текст, у которого отличается тон или настроение. Это полезно, например, для описания мыслей или технических терминов.
К примеру, в статье ниже используются записанные мысли, разметим их тегом <i>.
Тег <b> авторы HTML5 предлагают использовать для выделения отрывков текста с целью обратить внимание читателя, однако не подразумевая усиления значимости текста или интонации. Спецификация приводит примеры использования тега <b> для разметки ключевых слов в документе и лидов (первый абзац статьи в журналистике).
На макете страницы «Глоссарий» интернет-магазина электроинструмента даётся определение узкоспециализированных терминов (или ключевых слов). Предложения состоят из термина и текста, который поясняет этот термин. Название терминов при разметке можно обернуть в тег <b>.
При описании технических данных товара необходимо чтобы пользователь обратил внимание на технику безопасности при использовании. Возможно, вы встречали подобный текст в инструкциях по применению. В макете этот текст выделен жирным начертанием. Поскольку на этом тексте есть и смысловое акцентирование, в разметке используем подходящий для этого случая тег <strong>.
В статье с обзором дрелей серии «Bosch» хочется сделать акцент на таких важных для пользователя понятиях, как «Надёжность», «Качество сборки», «Запатентованные конструктивные решения». В разметке в этом случае поможет тег <em>:
Замечание
В дополнение к этому материалу есть хорошая статья про отличия очень схожих фразовых тегов <b>, <i>, <em> и <strong>. Причём обсуждение в комментариях не менее интересно, чем сама статья.
Для зачёркиваний обычно используется <s> — тег, который можно очень коротко определить как тег для зачёркивания. Но что он означает семантически? Это информация, которая важна, которая является частью контента, но больше не актуальна. Например, старая цена зачёркнута и вписана новая цена, старая дата зачёркнута, а новая вписана, и так далее. Когда важно показать то, что зачёркнуто, поскольку оно является частью материала, используется тег <s>.
А что же делают теги, которым посвящена целая глава спецификации: теги изменений?
Это теги для того, чтобы работать с редактурой: что мы убрали, что добавили. Это может быть очень полезно при работе с проектами или изменениями документов: какие параграфы удалены и больше не имеют значения, а какие — добавлены, заодно можно дать ссылку на причину изменений. Значение этих тегов — редакционное, и они обычно применяются в уже опубликованных документах.
Тег <ins> предназначен для того, чтобы разметить добавление в материал. Тег <del>, соответственно, чтобы разметить ту информацию, которую мы оттуда удалили. У этих тегов могут быть атрибуты cite и datetime. Атрибут datetime используется для отображения информации о дате произошедшего изменения, и, хотя это необязательный атрибут, он может быть полезным в некоторых ситуациях, а cite используется для ссылки на источник или описание произошедшего изменения.
Оба тега, <ins> и <del>, являются поточным и фразовыми элементами, то есть могут функционировать как метод выделения или как отдельный элемент внутри секции. Обычно эти теги используются для редактуры уже готового материала.
Какие семантические элементы могут удаляться и вставляться этими тегами вообще? Например, абзацы или отдельные фразы.
Типичным примером использования фразового тега <span> может стать фрагмент текста, который выглядит немного иначе, чем окружающий его текст. К примеру, на макете ниже размер единицы измерения товара /кг явно меньше числа и символа рубля. Чтобы задать тексту меньший размер шрифта, можно обернуть его в тег <span> для удобства дальнейшей стилизации.
Разметка элемента будет такой:
Итог
Следуя алгоритму разметки, мы идём от общего к частному: сначала размечаем крупные блоки, а затем детализируем каждый блок. Такой подход позволяет чётко представлять структуру размечаемого документа и подробно реализовывать её. По сути, мы сначала создаём оглавление нашего документа, а затем пишем каждую его главу.
Last updated
