14.07.2026 08:00
Olxa 0 1800 Источник
Ломакина Ольга

Продуктовый дизайнер в Домклик

В первой части мы выяснили, почему знание основ вёрстки так важно для дизайнера: оно помогает создавать реализуемые макеты и экономить время. Теперь перейдём от теории к практике и познакомимся с главным языком разметки — HTML.

Если CSS определяет внешний вид страницы (цвета, шрифты, отступы), то HTML (HyperText Markup Language) отвечает за то, что на ней находится и какую смысловую роль играет каждый элемент. То есть это скелет нашего сайта.

Из чего состоит HTML-код

Любой HTML-документ строится из набора тегов. Тег — это специальная команда, заключённая в угловые скобки < >. Большинство тегов парные: есть открывающий (<tag>)  и закрывающий (</tag>). Всё, что находится между ними, относится к этому тегу.

Пример простой структуры:

<!DOCTYPE html>
<html lang="ru">
<head>
    <title>Моя первая веб-страница</title>
</head>
<body>
    <h1>Заголовок страницы</h1>
    <p>Это абзац текста. Здесь можно написать приветствие или небольшое описание.</p>
</body>
</html>

Разберём этот код по частям:

  • <!DOCTYPE html>: сообщает браузеру, что это современный документ стандарта HTML5

  • <html> ... </html>: корневой элемент, который оборачивает всё содержимое страницы

  • <head> ... </head>: «голова» документа, где содержится служебная информация, невидимая пользователю напрямую: заголовок вкладки браузера (<title>), подключение стилей, шрифтов, скриптов и т.д.

  • <body> ... </body>: «тело» документа, то есть всё, что находится внутри этого тега, будет отображаться на экране пользователя

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

Типографика в HTML: от дизайна к коду

Дизайнер задаёт иерархию текста с помощью разных кеглей и начертаний. В HTML эта иерархия реализуется через специальные теги:

  1. Заголовки: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

    • Правило: на странице должен быть только один <h1> — это самый главный заголовок (например, название статьи), а далее идут подзаголовки <h2>, их подразделы <h3> и т.д.

    • Совет: не используйте заголовки просто для увеличения текста, поскольку это нарушает логику документа; для обычного крупного текста без иерархической важности используйте CSS-свойство font-size

  2. Абзацы: <p> — любой блок текста должен быть обёрнут в этот тег

  3. Выделение: <strong> (полужирное) и <em> (курсивное) — эти теги несут семантический смысл (важность и акцент соответственно)

Медиаконтент: изображения и ссылки

Макеты часто содержат изображения и кнопки. Вот как они превращаются в HTML:

  • Изображения: тег <img>— это один из немногих непарных тегов

<img alt="Логотип компании" id="image.png">

  • Здесь самое важное для дизайнера — атрибут alt (альтернативный текст, описывающий изображение для тех, кто его не видит — поисковики или люди со скринридерами), поэтому всегда продумывайте, что должно быть написано в alt

  • Ссылки: тег <a> (anchor)

<a href="https://habr.com">Перейти на Хабр</a>

Списки: когда дизайн требует структуры

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

  1. Ненумерованный (<ul>): для перечисления равнозначных пунктов (маркеры)

  2. Нумерованный (<ol>): для шагов или ранжированных пунктов (числа)

Каждый пункт списка обëртывают в тег <li>.

Стили в HTML

HTML из коробки имеет некоторую стилизацию, которую можно использовать для разметки страницы. Например, заголовки имеют жирность и размер, ссылки — цвет и состояния.

Также теги делятся на блочные и строчные элементы. Основное различие понятно из названия: блочные элементы располагаются друг под другом и занимают всю доступную ширину, строчные располагаются в одну строку. За счёт комбинации этих блоков можно разметить некую структуру.

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

Пример кусочка кода и реализации:

 <p>Параграф текста начинающийся с новой строчки</p>
 <p>Параграф текста начинающийся с новой строчки</p>
 <p>Параграф текста  <a href="#">Ссылка внутри текста, 
которая встраивается в контент</a> начинающийся с новой строчки</p>
результат компиляции HTML кода
Результат компилирования HTML-кода

Существуют также блочно-строчные элементы, сочетающие функции обоих типов. Также с помощью CSS можно изменять тип элемента, но для проведения авторского надзора можно не углубляться в такие нюансы. Если будет интересно, нюансы и подробные примеры можно изучить в следующих статьях.

Как дизайнеру упростить жизнь верстальщику с помощью HTML-мышления

Понимание структуры HTML помогает создавать более качественные макеты:

  1. Думайте блоками. При создании макета сразу выделяйте логические блоки (<header>, <main>, <footer>). Это поможет избежать хаотичного расположения элементов.

  2. Соблюдайте иерархию. Убедитесь, что заголовки выстроены в логическую цепочку от H1 до H6. Не прыгайте через уровни.

  3. Продумывайте альтернативный текст. При передаче материалов указывайте, что должно быть в alt для сложных изображений или иконок.

  4. Не забывайте про интерактивность. Если у вас есть кнопка-ссылка или кликабельная карточка, помните, что по умолчанию ссылкой можно сделать только текст или изображение. Чтобы сделать ссылкой весь блок, разработчику понадобится дополнительная разметка.

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

Полезные ссылки для углубления в тему:

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

? Telegram-канал Домклик Дизайн
https://t.me/domclickdesign

Комментарии (0)