Создание семантической вёрстки по макету
Начнём с базовой разметки документа по макету:
- У нас есть доктайп;
- Указана кодировка документа;
- В корневом элементе указан язык документа;
- У всей страницы есть заголовок.
Всю страницу можно разделить на три логические части: шапку, контент и подвал. Начнём с шапки — это тег <header>. Этот тег задаёт «шапку» сайта или раздела, в которой обычно располагается заголовок.
Шапка содержит главные навигационные элементы страницы, поэтому обернём их в тег <nav>.
Основное меню — это список ссылок, так как мы перечисляем однородные элементы. Нам не нужна нумерация, поэтому обернём его в неупорядоченный список <ul>. Каждый элемент списка должен начинаться с тега <li>.
Все ссылки ведут на разделы, которых нет на макете — для них мы сделаем заглушку, чтобы при навигации не казалось, что это ошибка.
Добавим вторую часть меню с поиском, «избранным» и корзиной. Это тоже список ссылок, поэтому обернём его в неупорядоченный список <ul>.
Иконки декоративные, их оформляют в стилях на следующих этапах вёрстки макета.
Добавим заголовок <h1>, описывающий содержимое страницы. Надписи «Коллекция часов Conquest» как таковой нет, но с точки зрения логической структуры страницы будет правильно написать на главной странице заголовок первого уровня.
Для того чтобы в будущем скрыть заголовок, мы применим класс visually-hidden, чтобы позже скрыть заголовок.
Добавим логотип и логическую ссылку вокруг него.
На макете логотип располагается на уровне навигационного меню, по логике документа ему лучше идти первым.
Как и у всех контентных картинок, у логотипа заданы размеры и задано описание в атрибуте alt.
Вокруг логотипа — ссылка на главную, так как это устоявшийся паттерн взаимодействия с логотипами: ими обновляют страницы и переходят на главную страницу с внутренних. Ссылку делаем без атрибута href, ведь мы уже на главной. Атрибут вернётся на внутренних страницах.
Добавим контейнер для основного содержимого страницы — тег <main>
с классом main.
Основное содержимое страницы состоит из четырёх секций, обозначим их тегом <section> и приступим к вёрстке первого блока. Присвоим ему класс promo.
Элемент «Весна/Лето» — заголовок второго уровня <h2>, так как он описывает содержимое блока. Также добавим подзаголовок и текст.
Элемент «Смотреть каталог» является ссылкой, а не кнопкой, так как отвечает за навигацию. Обозначим её тегом <a> с атрибутом href.
Добавляем контентное изображение с часами с помощью тега <img>.
Добавляем описание товара с помощью тега <span>, так как цена и характеристика товара у нас не являются ссылкой, заголовком или чем-то самостоятельным, а несут больше информативный характер. Этот тег используем для дальнейшего удобства работы через CMS.
Приступаем ко второй секции главной страницы с каталогом товаров. Обозначим классом popular.
По аналогии с предыдущей секцией добавим заголовок <h2>.
Также добавим ссылку «Смотреть все» с помощью тега <a>
Добавим список товаров с помощью <ul>, каждый товар — отдельный пункт списка.
Каждый товар также обернём в тег <article>, который обозначает цельный, законченный и самостоятельный фрагмент информации.
Добавляем название товара с помощью <h2>, изображение часов, стоимость и оборачиваем «Подробнее» в ссылку <a>.
Третья секция — преимущества: <section> с невидимым заголовком <h2>.
Эта секция — слайдер, однако нам доступна только одна страница. Тем не менее, для будущих слайдов сверстаем блок с помощью списка <ul>.
Секцию разобьём на отдельные блоки с помощью <div> — с изображением и текстом.
Название самого преимущества — это <h3>, описание размечаем с помощью <p>.
По аналогии элемент «Смотреть каталог» является ссылкой, а не кнопкой, так как отвечает за навигацию. Обозначим её тегом <a> с атрибутом href.
Добавим вёрстку контролов управления. Это — кнопки, так как они являются функциональными элементами, поэтому мы используем тег <button>
Последняя секция — «Новости компании». По аналогии c предыдущими разделами добавляем невидимый заголовок <h2>.
Делим секцию на две колонки с помощью <div>.
Левую колонку с текстом размечаем с помощью <p>.
Для социальных сетей создаём отдельную секцию с собственным тегом <h2>.
Каждая социальная сеть — часть ненумерованного списка <ul>. Все элементы оборачиваем в ссылки.
Правая часть секции — галерея фотографий, каждая из которых кликабельна и ведёт на страницу товара.
Добавим контейнер для подвала страницы — тег <footer>.
Футер состоит из четырёх колонок. Приступим к вёрстке первой.
Добавляем логотип компании с помощью <img>. Логотип, как и в шапке, кликабельный, поэтому оборачиваем его в ссылку.
Добавляем контакты компании с помощью <div>.
Адрес и телефон размечаем ссылками.
Размечаем вторую колонку «О компании» и добавляем тег для заголовка <h3>.
Список ссылок разметим как <ul>.
Третью колонку «Покупателям» размечаем по аналогии с предыдущей.
То же самое с последней колонкой «Оплата и доставка».
Разметка нашего макета готова!
