Вёрстка сайта: пособие для начинающих

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

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

Что такое верстка сайта

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

Раньше вёрстка использовалась только в дизайне и была применима только к печатным материалам. Дизайнеры визуально структурировали информацию в книгах, рекламных брошюрах, журналах. По мере развития технологий появились веб-сайты, где также необходима структура. Сейчас, благодаря веб-вёрстке, мы быстро узнаём цену на товары в интернет-магазине, находим нужный раздел каталога и читаем статью.

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

Лучшие бесплатные онлайн-конструкторы сайтов

Дизайнер собирает прототип, на основе которого создаёт макет. Верстальщик преобразует макет дизайнера в блоки HTML и CSS-кода (CSS — каскадные таблицы стилей). Так тексты, инфографика, картинки и другие элементы контента размещаются на странице и становятся сайтом.

Виды вёрстки

Существуют разные подходы к вёрстке сайтов, которые развивались с течением времени и используются в зависимости от конкретной задачи.

Табличная вёрстка

Таблицы были одним из первых методов создания веб-страниц. В этом подходе структура веб-ресурса создается с помощью HTML-таблиц. По аналогии с таблицами Excel каждая ячейка содержит текст и другие элементы дизайна. Количество строк, столбцов и ячеек не ограничено. Поэтому с помощью таблиц удобно создавать уникальные элементы дизайна.

Недостатками такого подхода к вёрстке является низкая скорость загрузки и большой объём кода. Это происходит по следующим причинам:

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

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

Вёрстка слоями

Элементы располагаются на разных слоях (тег <layer>). Этот подход позволяет скрывать объекты, управлять их размещением по отношению к окну браузера, накладывать друг на друга и загружать содержимое из файлов.

Блочная вёрстка

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

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

Для описания оформления контента применяется CSS. В CSS прописывают единые стили для размеров заголовков, цвета текстов и других свойств оформления блоков.

Данный метод позволяет ускорить как загрузку страниц, так и внесение изменений. Например, если дизайнер изменил стиль оформления ссылок, верстальщику не нужно вносить изменение в каждую ссылку. Достаточно изменить это свойство в едином файле CSS.

Помимо этого, с переходом на вёрстку блоками поисковая оптимизация стала удобнее. Использование HTML5-тегов, которыми обозначается тип контента, помогает роботам лучше понимать структуру и быстрее считывать контент веб-страниц. Это повышает шансы сайта на высокие позиции в поиске и получение заявок с SEO.

Блочная вёрстка стала стандартом в веб-разработке благодаря своей гибкости и возможности легко масштабироваться. Большинство современных сайтов свёрстаны с помощью связки HTML+CSS.

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

Фиксированная вёрстка

Тип, при котором ширина элементов веб-страницы задается в абсолютных единицах, пикселях. Вне зависимости от размера экрана внешний вид сайта остается одинаковым. В случае с фиксированным размером страниц адаптивы не нужны. Это делает сайт практически нечитабельным на экране смартфона. Такой подход был популярен на ранних этапах развития веб-дизайна, когда большинство пользователей использовали экраны с одинаковым разрешением. Сейчас фиксированная вёрстка встречается очень редко, обычно в случае, если ресурс не обновлялся более 20 лет.

Резиновая (гибкая) вёрстка

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

Адаптивная вёрстка

Подстраивает элементы страницы под размер экрана с помощью запросов в CSS. Таким образом, сайт корректно отображается и на компьютерах, и на мобильных устройствах. Адаптивная вёрстка улучшает опыт пользователей и благоприятно сказывается на SEO. При этом требует от дизайнера детальной проработки макета, создания нескольких адаптивов под разную ширину окна браузера (брейкпоинты), а от верстальщика — более длительной проработки CSS. До распространения адаптивного подхода некоторые ресурсы содержали отдельные поддомены для мобильных версий, например, m.site.com.

Вёрстка сайта Mbau island — Интересная вёрстка **mbauisland.com** — сайта острова Мбау

Отзывчивая вёрстка

Промежуточный вариант между резиновым и адаптивным типами. Позволяет контенту веб-страницы автоматически подстраиваться под размер экрана устройства. Основной принцип заключается в использовании гибких макетов и запросов в CSS, которые изменяют стили в зависимости от размеров окна браузера. В отличие от адаптивной вёрстки изменение внешнего вида страницы происходит не «рывками» по брейкпоинтам, а плавно. Такой тип предполагает более легкую реализацию, но меньший контроль внешнего вида со стороны дизайнера.

Какая вёрстка является лучшей

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

Принципы правильной вёрстки

Соответствие дизайну. Идеальная вёрстка идентична макету. Для этого верстальщики используют подход Pixel Perfect (в переводе с англ. — «С точностью до пикселя»). Его соблюдение можно проверить помощью плагинов в браузерах, таких как PerfectPixel от WellDoneCode.
Отсутствие ошибок в консоли. Код корректно интерпретируется браузером и не содержит проблем, которые могут повлиять на отображение сайта и работу его функций.
Чистота и структурированность. Элементы логично сгруппированы, лишние или повторяющиеся фрагменты оптимизированы.
Обеспечение безопасности. Безопасная вёрстка защищает сайт и его пользователей от возможных уязвимостей. Включает защиту от XSS, DDoS и других атак, корректное использование атрибутов rel=»noopener» для внешних ссылок, правильное взаимодействие с пользовательскими данными.
Адаптивность. Сайт безошибочно отображается на устройствах с различной шириной экрана — от компьютеров и ноутбуков до планшетов и смартфонов.
Кроссбраузерность. Сайт одинаково и качественно выглядит во всех популярных браузерах: Chrome, «Яндекс Браузере», Safari, Edge, Opera и пр.
Соответствие семантике. HTML-теги используются в соответствии с их предназначением. Заголовки выделены в теги <h1>, <h2>, и так далее, а абзацы текста — в <p>. Для маркированных списков проставлен тег <ul>, для нумерованных — <ol>.
Производительность. Улучшение качества кода страниц для ускорения загрузки: оптимизации CSS и JavaScript, использование современных методов сжатия изображений и других файлов.
Доступность. Учитывает потребности всех пользователей, включая людей с особенностями восприятия и ограниченными возможностями. Используется семантическая разметка, для изображений прописан атрибут <alt>, сайт поддерживает навигацию с клавиатуры. Например, подробный гайд по созданию контента и веб-ресурсов для людей с ограниченными возможностями разработал фонд «Со-единение», его можно найти по ссылке.
Гибкость и масштабируемость. Позволяет легко адаптировать проект под новые требования или расширять его функционал.
Валидность. Соответствует стандартам, установленным World Wide Web Consortium (W3C).

Что такое валидная вёрстка

Валидная вёрстка соответствует установленным стандартам и рекомендациям W3C (World Wide Web Consortium). Её принципы включают корректное использование HTML и CSS, соответствие современным требованиям семантики, структуры и стиля. Код, соответствующий стандартам W3C, легче поддерживать и обновлять, он лучше воспринимается поисковыми системами.

Преимущества валидной вёрстки

Отображение в браузерах. Валидная разметка гарантирует, что сайт будет правильно отображаться во всех популярных браузерах.
Скорость загрузки. Валидный код занимает меньше оперативной памяти и загружается браузерами быстрее.
SEO-оптимизация. Поисковые системы отдают предпочтение веб-ресурсам с валидной разметкой. Роботы легче сканируют структурированную страницу и принимают во внимание положительный опыт пользователей.
Масштабируемость и долгосрочность. Веб-сайты с валидной разметкой проще поддерживать. Правильно структурированный код проще модернизировать и расширять. Это особенно важно, если планируется долгая эксплуатация и частое внесение изменений.

Существуют сервисы, которые автоматически проверяют соответствие стандартам W3C. Пример такой программы — официальный валидатор от W3C Markup Validation Service.

Как проверить вёрстку

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

Проверка на отсутствие ошибок в консоли: консоль в браузерах (Chrome DevTools, Firefox Developer Tools).
Проверка валидности: W3C Markup Validation Service, CSS Validation Service.
Проверка соответствия макету: PerfectPixel.
Кроссбраузерная совместимость: BrowserStack, LambdaTest, ручная проверка в браузерах: Google Chrome, Safari, Firefox, Opera, Edge и других.
Тестирование адаптивности: Chrome DevTools, Window Resizer, Responsive Viewer, проверка на реальных устройствах: ноутбук, планшет, смартфон и пр.
Тестирование скорости и производительности: Google Lighthouse, GTmetrix, PageSpeed Insights.
Проверка доступности для людей с особенностями восприятия: axe Accessibility Checker, WAVE.
Тестирование функциональности: ручная проверка на реальных устройствах.

Тестирование — стандартный процесс для верстальщика. Однако будет полезно, если готовый сайт дополнительно проверит дизайнер. Так будет возможность убедиться, что все задумки выполнены верно и функции удобны для будущих посетителей страниц. Цель правильной вёрстки — не соблюдение правил, а положительный опыт пользователя.

Ошибки, которых следует избегать верстальщику

Даже опытные верстальщики иногда допускают ошибки. Рассмотрим некоторые из наиболее распространённых ситуаций, которых следует избегать.

Злоупотребление тегами <div> и <span>. Используйте <div> только в случае, если вам требуется контейнер, а <span> для текстовых блоков. Для других элементов подойдут соответствующие семантические теги, такие как <header>, <nav>, <main>, <article>. Это поможет чётко обозначить структуру страницы.
Использование <!important>. Этот тег предназначен для принудительного изменения стилей, он меняет естественные приоритеты. Наслоение нескольких <!important> может привести к ошибке, которую будет сложно воспроизвести. Она может появляться непредсказуемо из-за конфликта приоритетов. Вместо применения этого тега продумывайте архитектуру проекта заранее и оптимизируйте CSS.
Неправильная работа с изображениями. Когда добавляете на страницу изображения, используйте современные форматы (например, WebP) и убедитесь, что размер картинки меньше размера блока, в котором она находится. Помимо этого, не забывайте про атрибуты <alt> для описания изображений. Они помогают людям с ограниченными возможностями узнать о содержимом картинки и полезны для поискового продвижения.
Использование <style> в HTML. HTML предназначен для отображения и структурирования контента на странице. Внешний вид этого контента задаётся в CSS. Стили, прописанные напрямую, делают код перегруженным и «грязным». Использование тега <style> снижает скорость загрузки, усложняет управление файлами и не позволяет использовать их снова. Всегда переносите стили в отдельный подключённый CSS-файл.
Неверные названия классов CSS. Классы помогают структурировать стили вёрстки. При изменении класса меняются все элементы, принадлежащие ему. Если у компании изменился брендбук, и кнопки вместо синих стали зелёными, достаточно изменить только один параметр, а не каждую кнопку отдельно.

Иногда начинающие специалисты используют непонятные, повторяющиеся или разнообразные имена классов. Это усложняет дальнейшую работу как самому специалисту, так и его коллегам, которые будут иметь дело с его кодом. Например, название класса «.item» слишком общее. Оно может относиться к любому элементу контента. Если в проекте у заголовков и ссылок единый синий цвет и вы назовёте оба класса «.blue», это приведёт к конфликту. Также убедитесь, что имена классов имеют единый принцип написания. Это облегчает совместное ведение проекта.

Для оптимизации CSS-классов используйте принцип DRY («Don’t Repeat Yourself», в переводе с англ. — «Не повторяйся») и методологию «БЭМ» от Яндекс.

С самого начала карьеры стоит уделять внимание деталям. Предупредить ошибки легче, чем перевёрстывать с нуля!

Задачи и инструменты верстальщика

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

Верстальщик, Frontend- и Backend-разработчик: разница

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

Верстальщик

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

Frontend-разработчик

Фронтенд-девелопер занимается клиентской частью — тем, что видит и с чем взаимодействует пользователь. В отличие от верстальщика, фронтенд занимается более сложной логикой и динамическим контентом, добавляет интерактивность. Верстальщик работает только с HTML и CSS. В навыки фронтенда входит также JavaScript, который определяет поведение объектов, например, это анимация и отклик интерфейса на взаимодействие.

Backend-разработчик

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

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

Задачи верстальщика

Преобразование макетов в код. Главная задача верстальщика — преобразование дизайна сайта в код. Дизайнер создаёт макет в графическом редакторе (Figma, Adobe XD, Sketch), после чего верстальщик переносит его в веб-формат с использованием HTML и CSS. При этом специалисту необходимо следовать требованиям технического задания. По умолчанию, вёрстка подразумевает соблюдение правил, о которых мы говорили выше. Их можно разделить на подзадачи:

Обеспечение адаптивности и кроссбраузерной совместимости. Отвечает за то, чтобы сайт верно отображался на устройствах с различными разрешениями экранов и в различных браузерах.
Оптимизация производительности. Должен следить за тем, чтобы ресурс загружался быстро и эффективно. Эта задача включает правильную настройку изображений, оптимизацию объёма CSS и JavaScript файлов, применение современных методов сжатия и кеширования.
Соблюдение валидности и семантичности кода. Несёт ответственность за корректное использование семантической разметки и соответствие стандартам W3C.

Тестирование и исправление ошибок. Должен тестировать созданные страницы, в том числе проверять наличие уведомлений об ошибках и предупреждений в консоли браузера. Это позволяет выявить и устранить потенциальные проблемы.

Документирование и поддержка кода. Важной задачей является создание документации, что облегчает дальнейшее сопровождение и масштабирование сайта. Комментарии в коде, объяснение структуры и логики помогают самому специалисту и другим веб-разработчикам в будущем оперативно ориентироваться в проекте.

Взаимодействие с командой. Верстальщик часто работает в составе команды разработчиков, дизайнеров и менеджеров проекта. Эффективное взаимодействие с коллегами помогает своевременно выполнять план, следовать общим стандартам и обеспечивать высокое качество результатов.

Задачи могут варьироваться в зависимости от специфики проекта, но их общая цель — создание высококачественного, функционального и удобного веб-интерфейса, который удовлетворяет потребностям пользователей и соответствует требованиям бизнеса.

Инструменты верстальщика

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

Текстовые редакторы, редакторы HTML, интегрированные среды разработки (IDE).

В вёрстке сайта не обойтись без программ для работы с кодом. Функционал таких инструментов может быть разным. Самый простой вариант — написание и изменение текста через классический «Блокнот». Современные редакторы включают значительно более широкий перечень функций: выравнивание строк, автоматическое форматирование, выделение синтаксических конструкций, подсказки, автозаполнение, проверку ошибок и даже встроенное тестирование. Среди популярных редакторов кода можно выделить Notepad++, Brackets, VSCode, Sublime Text, Atom.

Графические редакторы.

Дизайнер передаёт макет в графическом редакторе, например, Figma, Sketch, Adobe XD. Эти программы позволяют увидеть дизайн целиком и изучить отдельные элементы, чтобы наметить список задач. Верстальщику не нужно досконально знать функции дизайнерских инструментов, но стоит разбираться в основных принципах их работы и знать парочку горячих клавиш.

Системы контроля версий.

Помогают вносить изменения на сайт последовательно, не запутаться с порядком обновлений и работать в команде. Обычно для этих целей используют Git, GitHub, GitLab и Bitbucket.

Инструменты для проверки кода.

Плагины браузеров и другие сторонние сервисы помогают облегчить работу верстальщика и сократить объём рутины. Например, вышеупомянутые плагин для проверки макета на соблюдение Pixel Perfect и валидатор разметки W3C. Существует и множество других инструментов-помощников, таких как Chrome DevTools для просмотра исходного кода, axe DevTools для обеспечения доступности и т.д.

Инструменты для сборки проектов.

Программы, которые упрощают и ускоряют процесс разработки. Примерами таких программ являются менеджеры задач Gulp и Grunt. Они помогают автоматизировать рутинные операции в процессе разработки, обрабатывать CSS и JavaScript, оптимизировать изображения и многое другое.

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

Советы начинающему верстальщику

Если вы только начинаете свой путь в профессии и верстаете первые сайты, есть несколько советов, которые помогут вам оптимизировать работу и улучшить навыки.

Освойте основы HTML и CSS. Начните с изучения основ HTML и CSS, так как это фундаментальные технологии веб-разработки. Понимание семантической вёрстки и каскадных стилей обязательны для создания качественных современных веб-ресурсов.
Продумывайте вёрстку заранее. Перед началом работы проанализируйте макет, полученный от дизайнера, и продумайте план и архитектуру будущих HTML и CSS файлов. Это поможет сразу создать структурированную страницу и избежать лишних правок и рутины.
Используйте систему контроля версий. Научитесь работать с Git и такими платформами, как GitLab и GitHub. Это особенно важно для командной работы над проектом. Вы и ваши коллеги сможете контролировать изменения в коде и снизить вероятность потери данных.
Овладейте препроцессорами CSS. Изучите такие инструменты, как Sass или LESS. Препроцессоры упрощают управление стилями и помогают создавать более структурированный код.
Пробуйте CSS-фреймворки. Пользуйтесь современными фреймворками, такими как Bootstrap или Tailwind CSS, чтобы ускорить процесс разработки и знать общепринятые методы вёрстки. По мере накопления опыта вы научитесь подстраивать их под особенности конкретных проектов.
Используйте методологию «БЭМ». «БЭМ» (Блок, Элемент, Модификатор) — это подход к именованию классов, созданный компанией «Яндекс», который помогает поддерживать порядок в коде. Он предотвращает конфликты стилей и упрощает поддержку. Соблюдая принципы «БЭМ», вы реализуете более понятную и структурированную вёрстку.
Тестируйте свой код. Обязательно проверяйте, как выглядит и функционирует ваш сайт в популярных браузерах и на различных устройствах. Уделяйте особое внимание мобильным версиям на Android и iOS. Это поможет избежать неожиданных проблем с отображением контента и функциональности у пользователей.
Следите за чистотой кода. Пишите чистый, читаемый код. Соблюдайте единый принцип написания, делайте комментарии с строкам и не плодите сущности. Чистый код легче читать и поддерживать, что особенно важно при реализации крупных проектов и в командной разработке.
Обучайтесь и следите за трендами. Сфера веб-разработки не стоит на месте, с каждым годом появляются новые тренды и технологии, которые помогают оптимизировать работу и сделать сайты ещё более удобными и привлекательными. Подписывайтесь на страницы популярных веб-мастеров в соцсетях, следите за новостями в сообществах веб-разработчиков и проходите онлайн-курсы для повышения квалификации.
Ищите и принимайте фидбэк. Показывайте свою работу другим и будьте готовы к рациональной критике. Это важная часть процесса обучения, которая поможет вам улучшить навыки в профессии.

Эти советы помогут вам начать путь в мире веб-разработки, развивать навыки вёрстки и уверенность в своих силах.

Создание качественной вёрстки — искусство, требующее сочетания знаний, внимания к деталям и знания современных практик. Избегая распространённых ошибок и придерживаясь проверенных методологий, вы сможете разработать веб-страницы, которые будут функциональными, удобными и легко поддерживаемыми. Помните, что свёрстанные вами сайты увидят реальные люди! Пусть каждая строка вашего кода будет вкладом в создание удобного и красивого веб-пространства.

Теперь вы знаете, в чем заключается профессия верстальщика, какую роль она занимает в процессе веб-разработки, что такое валидная и правильная вёрстка и как избежать ошибок.

Читайте в блоге:

Что такое вёрстка сайта: пособие для начинающих